Resource centre
5 min read
Colour contrast: what to check beyond text
Contrast affects reading, but also recognising controls, errors, focus, and interface states.
Do not only check text colour
Low contrast also appears in subtle links, disabled buttons, error messages, icons, and field borders. Check real states, not only a static design.
Contrast checklist
Turn these checks into a repeatable task for design, content, and development.
- Normal and small text on every real background.
- Links are recognisable without colour alone.
- Focus is visible on buttons, links, and fields.
- Errors and warnings have text or an additional icon.
- Charts use labels or patterns in addition to colour.
Next step
Add approved combinations to the design system so the issue does not return in every component.