Accessibility is a foundation for every component and workflow. Automated checks can find some defects; keyboard, screen-reader, zoom, and human evaluation are also necessary. Passing one contrast check is not a compliance certification.
Make the task operable
Use semantic HTML, visible labels, logical focus order, and clear keyboard focus. Return focus when a dialog closes. Do not require a precise gesture, hover, or drag when a simpler alternative is possible.
Support visual and cognitive differences
Check normal text at 4.5:1 and large text at 3:1. Essential graphical objects and control boundaries generally need 3:1 against adjacent colors. Pair colors with language, symbols, or patterns. Let people reduce motion and increase text size.
Validate complete journeys
Test reflow at 320 CSS pixels, 200% text resizing, error recovery, and focus visibility. WCAG 2.2 AA target-size minimum is 24 CSS pixels with defined exceptions; prefer larger targets where practical. Record manual checks and unresolved issues rather than reporting a blanket pass.
Default decisions
Starting conventions for this system. Validate them in the context of your product.
- Normal text
- At least 4.5:1
- Large text
- At least 3:1
- Essential UI graphics
- At least 3:1
- Target baseline
- 24 CSS px minimum; prefer 44px