Documentation navigation

On this page

Visual

Barriers#

Common failures

  1. Low contrast text
  2. Color-only errors or required fields
  3. Missing text alternatives for meaningful images
  4. Layouts that break when zoomed

Contrast#

Interactive demo

Contrast playground

Contrast checker

Normal text sample — body copy at typical size.

Large text sample — 18pt / 14pt bold.

Contrast ratio: 17.40:1

AA normal (4.5:1)
Pass
AA large (3:1)
Pass
AAA normal (7:1)
Pass

Color dependence#

Interactive demo

Error cues

Color-only: the red border is the only error cue. Toggle to add text and programmatic description.

Test

ActionExpect
Check contrastBody text meets AA at minimum
Remove color cueStatus still understandable
Zoom 200%Content reflows without clipping essential UI