:::
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.
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
Common problems include light gray text, errors communicated only by red, disabled states too close to the background, and weak hover or focus states.
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
- Accesserty DevCheck
Run browser-based checks for web accessibility, WCAG, ARIA, keyboard access, and visual contexts.
- WCAG testing checklist