Why Color Contrast Matters
Adequate color contrast between text and its background is essential for readability. Users with low vision, color blindness, or those viewing screens in bright sunlight rely on strong contrast to perceive content.
WCAG 1.4.3 Contrast (Minimum), Level AA
This success criterion requires that text and images of text have a minimum contrast ratio of 4.5:1 against their background.
Exceptions for Large Text
Large text requires a lower contrast ratio of 3:1. WCAG defines "large text" as:
- At least 18pt (typically 24px) regular weight
- At least 14pt (typically 18.66px) bold weight
Exceptions for Incidental and Logotypes
Text that is part of an inactive user interface component, pure decoration, or part of a logo/brand name has no contrast requirement.
WCAG 1.4.11 Non-text Contrast, Level AA
Introduced in WCAG 2.1, this criterion applies contrast requirements to graphical objects and UI components (like buttons, form inputs, and icons). The visual presentation of these elements must have a contrast ratio of at least 3:1 against adjacent colors.
How to Check Color Contrast
You can use various tools to check your contrast ratios:
- Automated Scanners: Tools like AccessiSight flag contrast failures on every page they scan.
- Browser DevTools: Chrome and Firefox both show contrast ratios in their developer tools.
- Standalone Checkers: WebAIM's Contrast Checker is a popular online tool for testing specific color pairs.
Designing Accessible Palettes
When designing a color palette, don't rely solely on visual estimation. Use a contrast checker early in the design process to make sure your brand colors can be combined in accessible ways. If you offer a dark mode, check it separately: a color pair that passes in light mode can fail in dark mode.