How do you check contrast, targets, and accessible states?
Check visibility, accurate operation, and whether states make sense without colour alone.
Accessibility checks consider whether information is clear, actions are usable, and different users can understand states. Colour, size, and text explanations need to work together.
Keep these basics in mind
- WCAG means Web Content Accessibility Guidelines. AA is a commonly used conformance level; passing one check does not establish conformance.
- Ordinary text usually requires at least 4.5 contrast at AA. Large text and some other content have different conditions. Comfortable appearance alone is not a measurement. See W3C’s text-contrast explanation .
- A target is the actual clickable or touchable area, not just the drawn icon. WCAG 2.2 AA generally requires at least 24 by 24 CSS pixels, with exceptions including spacing and inline targets. A minimum is not necessarily the most comfortable size. See W3C’s target-size explanation .
- Explain selected, error, and success states with text, shape, or other cues as appropriate, avoiding colour alone.
A checking process
Illustrative state adjustments
These are teaching observations, not claimed contrast measurements.
| Part | Previous problem | Adjustment |
|---|---|---|
| Supporting note | Too pale to read | Measure and improve the combination |
| Small icon action | Nearby buttons crowded together | Enlarge targets and check spacing |
| Selected item | Only turns green | Add a selection mark or text |
Walk through an example
A member list has a tiny Remove icon. The team enlarges the actual button area and checks its distance from Edit. After checking text and icon visibility against the background, they add an action name. They check keyboard and touch operation separately rather than measuring the icon alone.
Limits and common misunderstandings
Some disabled controls have contrast exceptions, but important instructions still need to be readable. Passing a contrast tool does not establish full accessibility. Names, order, keyboard behaviour, and error recovery also require checking.