Guide
WCAG Color Contrast Guide
WCAG 2.1 sets the standard for accessible color contrast on the web. This guide explains the AA and AAA conformance levels, minimum contrast ratios for text and UI components, and practical steps to make your designs accessible to everyone — including people with low vision and color blindness.
What Is Color Contrast?
Color contrast is the difference in luminance (perceived brightness) between two colors. It's measured as a ratio — for example, 4.5:1 means the lighter color is 4.5 times brighter than the darker one. Pure black on white has the maximum ratio of 21:1. Same-color on same-color has a ratio of 1:1.
Higher contrast means easier readability, especially for people with low vision, older adults, and anyone reading in bright sunlight or on low-quality displays.
WCAG Conformance Levels
WCAG (Web Content Accessibility Guidelines) defines three conformance levels: A, AA, and AAA. For color contrast, the relevant criteria are in Guideline 1.4.
| Level | Normal Text | Large Text | UI Components |
|---|---|---|---|
| AA | 4.5:1 | 3:1 | 3:1 |
| AAA | 7:1 | 4.5:1 | — |
Large text is defined as 18pt (24px) or 14pt (18.66px) bold. Most body copy is normal text and requires the higher 4.5:1 ratio at AA level.
AA is the standard — most legal requirements (ADA, EN 301 549, EAA) reference WCAG AA. AAA is aspirational and not always achievable with brand colors, but aim for it where possible.
How Contrast Ratio Is Calculated
The WCAG contrast formula uses relative luminance — a measure of how bright a color appears to the human eye, accounting for the fact that we're more sensitive to green light than red or blue.
Contrast Ratio = (L1 + 0.05) / (L2 + 0.05)
L1 = relative luminance of the lighter color
L2 = relative luminance of the darker color
You don't need to calculate this manually. Kulr's Contrast Checker computes the ratio in real time as you adjust colors, and tells you instantly whether you pass AA, AAA, or fail.
Common Contrast Mistakes
- Light gray on white#999 on #FFF is only 2.85:1 — fails even AA Large. Use #767676 (4.54:1) minimum.
- Colored text on colored bgBlue on purple, green on teal — these often fail despite looking "different." Always check the ratio.
- Placeholder textInput placeholders are often too light. They must still meet 4.5:1 if they convey information.
- Icons without labelsUI icons need 3:1 contrast against their background if they're the only way to identify a control.
Color Blindness Considerations
Approximately 300 million people worldwide have some form of color vision deficiency. WCAG requires that color is never the only way to convey information. Use icons, text labels, patterns, or underlines alongside color.
The most common types of color blindness are:
- Protanopia — reduced sensitivity to red light (~1% of men)
- Deuteranopia — reduced sensitivity to green light (~5% of men)
- Tritanopia — reduced sensitivity to blue light (very rare)
- Achromatopsia — total color blindness (extremely rare)
Test your designs with Kulr's built-in color blindness simulator on the Picker and Generator pages to see how your colors appear to affected users.
Quick Fix Checklist
- Check every text color against its background — not just headings, but body text, links, captions, and labels
- Test interactive elements (buttons, form borders, focus rings) at 3:1 minimum
- Don't rely on color alone — add icons, underlines, or patterns for status indicators
- Test in both light and dark mode if your app supports both
- Use auto-suggest tools to find the nearest accessible alternative when a color fails
- Simulate color blindness for every critical flow in your UI
Check your contrast now
Paste any two colors and get instant WCAG AA & AAA results with auto-suggest.
Open Contrast Checker