1. Begin with a difficult reading moment
Imagine a white heading over a rotating lamp. When its pale shade passes behind the words, part of the heading becomes hard to distinguish. This is a synthetic example. Pausing the animation in its most favourable position would conceal the problem.
List the essential blocks: heading, explanation, specifications, controls and enquiry action. Observe what moves behind each during rotation and scrolling. Repeat on a phone: line breaks and object positions can produce different overlaps from the desktop layout.
2. Match the protection to the content
For a longer description, consider a stable surface behind the text. A short heading might work over a local gradient, provided that it protects every line in the intended states. Moving text outside the object’s path is another option.
Request a comparison using final copy. A decorative shadow can improve separation without resolving the hardest points. If the gradient ends before the last line, extend the protected area or change the layout rather than shortening useful information just to make it fit.
3. Check the effective contrast
The WCAG 2.2 minimum contrast criterion generally requires 4.5:1 for ordinary text and 3:1 for large text, which has a size-and-weight definition. Specific exceptions apply. Calling something a heading does not automatically make it large text.
Compare the text with its effective background, including transparency and scene states. A declared page background colour may not describe what appears behind the letters. Do not base the measurement on antialiased character edges. If the background remains unpredictable, stabilise the local surface and check again.
4. Review motion as a separate decision
Pausing the scene and reading its content are separate checks. A still frame can still have insufficient contrast. Also decide what to show when a visitor prefers reduced motion, and confirm that information remains available.
The pause control should be identifiable and reachable. Then use the keyboard to follow the journey: focus should make your current position clear. A readable heading does not approve the rest of the page. Buttons, fields and any messages need their own attention.
5. Keep a record of difficult states
Record the page, viewport width, affected text and scene state. A screenshot helps someone find the issue again, but the next review should still include movement. Keep the test copy alongside the image so a later wording change can be checked.
| Review point | Practical check |
|---|---|
| Heading over changing scenery | Observe the brightest object passing behind it. |
| Description on a phone | Check every line with enlarged text. |
| Contact button | Check its label, keyboard focus and activation. |
| Paused scene | Read the information and reach contact. |
| Form message | Check readability when the message is longer. |
6. Agree what the review should establish
Bring longer descriptions, product names and realistic messages to the review. Ask for clear reading under the agreed conditions, rather than preserving an effect at any cost. Decide who records remaining problems and who confirms that a revised version addresses them.
- Essential blocks that remain readable throughout the scene.
- Devices, widths and scene states included in the review.
- Expected behaviour for pause and reduced motion.
- Observed issues, corrections and repeat checks at the same points.
- Other necessary checks: contrast alone does not establish overall accessibility.
Explore an example
On Ospivia’s homepage you can observe text over a 3D scene and try the pause control. Use it as a reference when discussing composition and movement in your project.
Inspect the Ospivia homepage ↗Prepare your project brief
A reusable text template: objectives, users, features, materials and acceptance checks. Download it without registration and edit it with your team.
Download the project brief (.txt) ↓Technical references
Published by Ospivia Studio, prepared with AI assistance and checked against the linked technical sources. Examples are illustrative and are not customer results.