Color Contrast Ratio
Color contrast ratio measures the difference in luminance between foreground text and its background, expressed as a ratio (e.g., 4.5:1). WCAG requires a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text (18px bold or 24px regular) at Level AA. Low contrast is the most common accessibility failure on the web, affecting users with low vision and everyone in bright sunlight.
§ 1 Definition
Color contrast ratio is a mathematical relationship between the relative luminance of two adjacent colours, calculated using the formula defined in the WCAG specification. The ratio ranges from 1:1 (identical colours, no contrast) to 21:1 (black on white, maximum contrast). WCAG 2.1 Level AA requires a contrast ratio of at least 4.5:1 for normal-sized text (under 18px bold or 24px regular) and 3:1 for large-scale text and UI components such as icons, form field borders, and focus indicators. Level AAA raises the bar to 7:1 for normal text and 4.5:1 for large text. According to WebAIM's annual analysis of the top 1 million homepages, insufficient colour contrast is consistently the number one detected accessibility issue, appearing on over 80 percent of homepages tested.
§ 2 How contrast ratio is calculated
The WCAG contrast formula uses the relative luminance of each colour, which accounts for how the human eye perceives different wavelengths. The formula is (L1 + 0.05) / (L2 + 0.05), where L1 is the luminance of the lighter colour and L2 is the luminance of the darker colour. This means contrast is not simply a matter of light versus dark colours. Two medium-grey colours can have the same lightness but poor contrast against each other. Tools such as the WebAIM Contrast Checker, axe DevTools, and the browser DevTools colour picker (which shows the contrast ratio in real time) can do the math for you.
§ 3 Where contrast requirements apply
Contrast requirements apply to text, text in images, large-scale text, and non-text components that convey information. Non-text components include icons (if meaning depends on the icon shape), form input borders (the border must be visible for the user to know where to click or tab), focus indicators, and graphical objects such as charts and graphs. Decorative elements that do not convey information are exempt. Placeholder text in form fields is also exempt, but you should never rely solely on placeholder text to label a form field anyway, since it disappears on input.
§ 4 Contrast and brand colours
A common tension arises between brand colour guidelines and contrast requirements. A light grey brand colour (#999) on a white background is approximately 2.8:1, which fails AA for any text size. Designers must adjust brand palettes to meet contrast targets. Options include using the brand colour for large decorative elements only while using a darker tint for text, or using the brand colour as an accent and pairing it with sufficiently dark text. Accessible brand design does not mean abandoning brand identity. It means applying it thoughtfully. Atomic Glue recommends establishing accessible colour tokens in the design system from the start rather than retrofitting them.
§ 5 Common questions
- Q. Do I need to check contrast for disabled buttons?
- A. Disabled buttons typically have reduced opacity, which naturally lowers contrast. WCAG allows for reduced contrast on disabled controls as long as the disabled state is consistently indicated (e.g., the icon or border style makes the disabled state clear). The text contrast requirement is relaxed for disabled elements, but the disabled state itself must be perceivable.
- Q. What about dark mode?
- A. Dark mode introduces its own contrast challenges. Light text on a dark background is subject to the same 4.5:1 ratio. But high contrast in dark mode can cause visual fatigue or halation effects for users with astigmatism. Aim for the AA minimum without exceeding about 16:1 in dark mode. Test in both modes.
- WCAG AA requires 4.5:1 for normal text, 3:1 for large text and UI components.
- Low contrast is the most common accessibility failure on the web.
- Contrast requirements apply to text, icons, form borders, and focus indicators.
- Brand colours often need adjustment to meet contrast targets.
- Use automated tools for initial checks, but verify visually too.
Atomic Glue audits all colour pairs against WCAG contrast thresholds and builds accessible design tokens into the project from the start, not as a retrofit. We ensure your brand identity translates into an accessible colour system. Our Web Development services include full colour accessibility review. Get in touch.
Get in touchColor contrast ratio measures the difference in luminance between foreground text and its background, expressed as a ratio (e.g., 4.5:1). WCAG requires a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text (18px bold or 24px regular) at Level AA. Low contrast is the most common accessibility failure on the web, affecting users with low vision and everyone in bright sunlight.
Category: Accessibility (also: Design)
Author: Atomic Glue Team
## Definition
Color contrast ratio is a mathematical relationship between the relative luminance of two adjacent colours, calculated using the formula defined in the WCAG specification. The ratio ranges from 1:1 (identical colours, no contrast) to 21:1 (black on white, maximum contrast). WCAG 2.1 Level AA requires a contrast ratio of at least 4.5:1 for normal-sized text (under 18px bold or 24px regular) and 3:1 for large-scale text and UI components such as icons, form field borders, and focus indicators. Level AAA raises the bar to 7:1 for normal text and 4.5:1 for large text. According to WebAIM's annual analysis of the top 1 million homepages, insufficient colour contrast is consistently the number one detected accessibility issue, appearing on over 80 percent of homepages tested.
## How contrast ratio is calculated
The WCAG contrast formula uses the relative luminance of each colour, which accounts for how the human eye perceives different wavelengths. The formula is (L1 + 0.05) / (L2 + 0.05), where L1 is the luminance of the lighter colour and L2 is the luminance of the darker colour. This means contrast is not simply a matter of light versus dark colours. Two medium-grey colours can have the same lightness but poor contrast against each other. Tools such as the WebAIM Contrast Checker, axe DevTools, and the browser DevTools colour picker (which shows the contrast ratio in real time) can do the math for you.
## Where contrast requirements apply
Contrast requirements apply to text, text in images, large-scale text, and non-text components that convey information. Non-text components include icons (if meaning depends on the icon shape), form input borders (the border must be visible for the user to know where to click or tab), focus indicators, and graphical objects such as charts and graphs. Decorative elements that do not convey information are exempt. Placeholder text in form fields is also exempt, but you should never rely solely on placeholder text to label a form field anyway, since it disappears on input.
## Contrast and brand colours
A common tension arises between brand colour guidelines and contrast requirements. A light grey brand colour (#999) on a white background is approximately 2.8:1, which fails AA for any text size. Designers must adjust brand palettes to meet contrast targets. Options include using the brand colour for large decorative elements only while using a darker tint for text, or using the brand colour as an accent and pairing it with sufficiently dark text. Accessible brand design does not mean abandoning brand identity. It means applying it thoughtfully. Atomic Glue recommends establishing accessible colour tokens in the design system from the start rather than retrofitting them.
## Common questions
Q: Do I need to check contrast for disabled buttons?
A: Disabled buttons typically have reduced opacity, which naturally lowers contrast. WCAG allows for reduced contrast on disabled controls as long as the disabled state is consistently indicated (e.g., the icon or border style makes the disabled state clear). The text contrast requirement is relaxed for disabled elements, but the disabled state itself must be perceivable.
Q: What about dark mode?
A: Dark mode introduces its own contrast challenges. Light text on a dark background is subject to the same 4.5:1 ratio. But high contrast in dark mode can cause visual fatigue or halation effects for users with astigmatism. Aim for the AA minimum without exceeding about 16:1 in dark mode. Test in both modes.
## Key takeaways
- WCAG AA requires 4.5:1 for normal text, 3:1 for large text and UI components.
- Low contrast is the most common accessibility failure on the web.
- Contrast requirements apply to text, icons, form borders, and focus indicators.
- Brand colours often need adjustment to meet contrast targets.
- Use automated tools for initial checks, but verify visually too.
## Related entries
- [WCAG (2.1, 2.2)](atomicglue.co/glossary/wcag)
- [High Contrast Mode](atomicglue.co/glossary/high-contrast-mode)
- [Accessibility Audit](atomicglue.co/glossary/accessibility-audit)
Last updated July 2026. Permalink: atomicglue.co/glossary/color-contrast-ratio