What Is Color Contrast? Making Text and UI States Readable
Color contrast affects whether text, buttons, errors, and UI states are readable. It is one of the most common WCAG AA checks.
Last updated:
Key Takeaways
- Low contrast makes text, errors, and states hard to perceive.
- Do not rely on color alone to communicate meaning.
- Check text, icons, borders, and states before release.
Common problems
WCAG 2.2 AA generally requires 4.5:1 for text against its background, or 3:1 for large text. Non-text information needed to identify controls and states is assessed separately under 1.4.11. See the contrast guide for sizing, measurement, and exceptions.
Genuinely inactive controls have contrast exceptions; a pale disabled button is not automatically a failure. Placeholders or operable gray text are not exempt for that reason. Errors must not be conveyed only by red.
Frequently Asked Questions
Does contrast only affect low-vision users?
No. Bright light, aging vision, low-quality displays, and outdoor mobile use can affect many users.
Related Pages
- Measure text and interface-state contrast
- Accesserty DevCheck
Run browser-based checks for web accessibility, WCAG, ARIA, keyboard access, focus paths, AI semantic review, and PDF structure signals.
- WCAG testing checklist
- Understand WCAG check results