Color contrast describes how distinguishable foreground content is from its background. WCAG measures it as a ratio based on relative luminance, from 1:1 (no contrast) to 21:1 (black on white). Sufficient contrast helps people with low vision or color vision deficiencies, and anyone reading on a phone in bright light. Low-contrast gray text and pale buttons are among the most common accessibility failures on marketing sites.
WCAG requirements
WCAG 2.2 sets the following thresholds. Large text is at least 18 point, or 14 point bold, which is roughly 24 and 18.66 CSS pixels.
- 1.4.3 Contrast (Minimum), level AA: 4.5:1 for normal text, 3:1 for large text.
- 1.4.6 Contrast (Enhanced), level AAA: 7:1 for normal text, 4.5:1 for large text.
- 1.4.11 Non-text Contrast, level AA: 3:1 for UI component boundaries, focus indicators and meaningful graphics.
How the ratio is calculated
The ratio compares the relative luminance of the lighter color (L1) and the darker color (L2). Contrast checkers in browser developer tools and online tools do the math for you; the formula is useful for understanding why some color pairs that look distinct still fail.
contrast ratio = (L1 + 0.05) / (L2 + 0.05)
L1 = relative luminance of the lighter color
L2 = relative luminance of the darker colorCommon problem areas
Placeholder text, disabled-looking secondary buttons, text over images or gradients, light gray captions and brand colors used for links all often fall short. Check every state, including hover and focus, and both light and dark themes. Contrast is not the only way to convey meaning: WCAG also requires that color is not the only way information is shown, such as red alone marking an error.
Example
Adjusting a brand color for buttons
Hypothetical CRM Hazelpoint's brand color is a light teal. White text on it fails the 4.5:1 ratio for its button labels. Rather than change the brand, the team uses a darker shade of the same teal for buttons and links and keeps the original for large decorative areas.
Common mistakes
Checking only body text
Buttons, form borders, icons and focus rings need contrast too, under the non-text contrast criterion.
Text on busy images
Contrast varies across a photo. Add a solid or semi-opaque overlay behind text so every part meets the ratio.
Questions
Meeting the minimum is the baseline. Some readers find pure black on pure white harsh, so many designs use near-black on white, which can still far exceed the requirement.
