WCAG 2.2 / Inclusive Design / 04
Visual access and reflow
Test contrast, text spacing, zoom, motion, color independence, forced colors, and responsive reflow.
Before you begin
By the end, you can…
- Test contrast without relying on color alone
- Verify reflow at zoom
- Respect forced colors and reduced motion
01 / Understand
Visual access is more than contrast
Contrast helps text and controls remain distinguishable, but color cannot be the only signal for errors, status, or selection. Pair color with text, shape, iconography, or position.
At 400% zoom a desktop layout effectively becomes narrow. Content should reflow without two-dimensional scrolling for ordinary reading. Fixed heights, clipped text, and rigid columns often fail first.
02 / Apply
Let user preferences win
Forced-colors mode may replace your palette. Use semantic borders and system colors where needed. Reduced motion should remove effects that imply movement through space or trigger discomfort.
Test with browser zoom, text-only spacing changes, high contrast, grayscale, and motion reduction. Do not infer accessibility from a design token’s name.
03 / Make
Your studio task
Make — Test at 200% and 400% zoom, forced colors, increased text spacing, and reduced motion.
- Identify every place color communicates meaning.
- Add a non-color cue and test contrast.
- Test 200% and 400% zoom plus text spacing.
- Enable forced colors and reduced motion, then repair lost meaning.
Nothing essential clips, overlaps, vanishes, or depends on color or animation alone.
04 / Check