WCAG Color Contrast

The accessibility standard that defines minimum contrast ratio requirements for text and UI components to ensure content is readable by users with low vision or color blindness.

What is WCAG Color Contrast?

WCAG (Web Content Accessibility Guidelines) color contrast requirements define how much difference in lightness there must be between foreground content (text, icons) and its background in order for the content to be reliably readable. These requirements are part of WCAG 2.1, published by the W3C (World Wide Web Consortium), and form the basis of color accessibility law in many countries.

The requirements are expressed as contrast ratios, calculated from the relative luminance of two colors. The main thresholds are:

AA level

Text - 4.5:1
Large text - 3:1
UI components - 3:1

AAA level

Text - 7:1
Large text - 4.5:1
UI components - WCAG does not specify a contrast ratio for AAA, but the general recommendation is to aim for 4.5:1 or higher for UI elements as well

"Large text" means 18pt regular (24px) or 14pt bold (approximately 18.67px bold) and above.

Why is WCAG Color Contrast important?

Insufficient contrast is one of the most common accessibility barriers on the web. Approximately 2.2 billion people worldwide have some form of vision impairment, including low vision, color blindness, and age-related decline. For these users, low-contrast text can be literally unreadable.

WCAG compliance is also a legal requirement in many jurisdictions. In the United States, the ADA (Americans with Disabilities Act) has been applied to websites. In the EU, the European Accessibility Act requires digital products to meet WCAG AA standards. Failing contrast requirements exposes organizations to legal risk.

Beyond compliance, accessible contrast simply means readable contrast. Designs that meet WCAG standards are easier for everyone to use, including people reading on mobile in sunlight or on lower-quality screens.

How to check WCAG Color Contrast

Use a contrast checker (like the one built into Atmos) to enter your foreground and background colors
The tool calculates the contrast ratio
Check whether your use case (body text, large text, UI component) meets the required threshold
Adjust lightness of one or both colors until the ratio meets your target level

Tips for passing AA:

Dark text on light backgrounds: your text color should have a luminance close to black, or adjust until the ratio reaches 4.5:1
Light text on dark backgrounds: use near-white text or check that the specific shade is light enough
Medium tones in both directions are the most likely to fail. Avoid similar lightness values

Examples

White #FFFFFF on #2563EB (blue-600): ~4.6:1, passes AA for normal text
#6B7280 (gray-500) on white: ~4.6:1, passes AA (just barely)
#9CA3AF (gray-400) on white: ~2.8:1, fails AA. A common placeholder text mistake
#111827 on #F9FAFB: ~18.1:1, comfortably passes AAA

Best practices

Check contrast during design, not as a final QA step. It's much faster to fix early
Don't rely on the minimum. Aim for 5:1 or higher for body text when possible
Check every text/background pair, including placeholder text, disabled states, and link text
The 3:1 requirement for UI components applies to the component's boundary against its background, not to text within the component

FAQs

AA is the standard that most products aim to comply with. It's the threshold referenced in accessibility laws. AAA is an enhanced level that provides even more legibility but is considered aspirational rather than mandatory, as meeting AAA for all text is not always feasible. WCAG recommends conforming to AA and going to AAA where possible.

No. It applies to normal-sized text. Large text (18pt / 24px and above at normal weight, or 14pt / ~18.67px and above at bold) only requires 3:1. Text in logos or decorative text with no informational value is exempt. Disabled UI elements are also exempt. WCAG recognizes that disabled states are intentionally low-contrast to signal non-interactivity.

Yes, significantly. WCAG 3 (still in draft as of 2024) proposes replacing the contrast ratio formula with APCA (Advanced Perceptual Contrast Algorithm), which accounts for font size, font weight, and usage context in a more nuanced way. APCA will not use simple pass/fail ratios but instead match contrast requirements to the specific text being evaluated. Until WCAG 3 is finalized and legally adopted, WCAG 2.1 AA remains the standard.