Glossary / Color contrast
Color contrast
Color contrast is the measurable difference in luminance between foreground content and its background. Sufficient contrast helps people with low vision, color-vision differences, aging vision, and users in glare or low-quality displays. WCAG contrast requirements apply to text and meaningful non-text interface graphics; color alone must not communicate meaning. Contrast should be designed into tokens and tested across states, themes, transparency, gradients, and real rendered backgrounds.
WCAG 2.2 essentials
- SC 1.4.3 AA: normal text needs at least 4.5:1; large-scale text needs 3:1. “Large” is at least 18 pt regular or 14 pt bold (roughly 24 CSS px / 18.67 CSS px bold, though CSS points are not generally used in web layout).
- SC 1.4.11 AA: visual information needed to identify UI components and meaningful graphical objects generally needs 3:1 against adjacent colors. Exceptions include inactive components and certain incidental graphics.
- SC 1.4.6 AAA raises text contrast to 7:1 normal and 4.5:1 large.
- Logos and purely decorative text have exceptions; placeholder text that conveys a field label is still text users need to perceive.
- Contrast ratio is computed from relative luminance, not perceived hue difference. A ratio of 4.5:1 is not a percentage.
- Color must not be the only cue for errors, required state, charts, or selected state; add text, shape, pattern, or another redundant indicator.
Engineering practice
Choose accessible foreground/background pairs in design tokens and validate every theme and component state: hover, focus, disabled, error, selected, visited, and high-contrast/forced-colors modes. Semi-transparent overlays and images require checking the final composite color, not the nominal token. Do not reduce font size to evade a large-text threshold. Use automated contrast tooling for candidate detection, then inspect actual UI and non-text indicators. Preserve user agent forced-colors behavior where possible instead of disabling it.
Interview questions
- What is the AA text contrast requirement? 4.5:1 for normal text and 3:1 for large text.
- What contrast applies to control boundaries and icons? Often 3:1 under Non-text Contrast when the visual cue is necessary to identify the component or state.
- Does passing contrast make a chart accessible? No. It also needs non-color distinctions and, where appropriate, text or tabular alternatives.
- Why test composited colors? Transparency, gradients, and imagery change the actual foreground/background relationship.
- Can a tool prove every contrast issue absent? It can help measure known color pairs, but dynamic backgrounds and state/context require manual verification.