Check any color pair instantly
Use the free color contrast checker — enter any foreground and background color in hex format and get the contrast ratio plus AA and AAA pass/fail results. No account required.
Why contrast matters
Approximately 300 million people worldwide have color vision deficiency. Many more have low vision, read in bright sunlight, or use displays with poor calibration. Text that looks fine to a designer with a high-quality monitor can be completely unreadable to a significant portion of the actual audience.
Beyond accessibility, contrast affects all users: outdoor reading, aging eyes, and fatigue all reduce effective contrast sensitivity. Good contrast makes content easier to read for everyone.
What the WCAG contrast ratio means
The contrast ratio compares the relative luminance (brightness) of two colors on a scale from 1:1 (identical colors, no contrast) to 21:1 (black text on white background, maximum contrast).
WCAG 2.1 defines two conformance levels:
| Level | Normal text | Large text | UI components |
|---|---|---|---|
| AA (minimum) | 4.5:1 ratio | 3:1 ratio | 3:1 ratio |
| AAA (enhanced) | 7:1 ratio | 4.5:1 ratio | N/A |
Large text is defined as 18pt (24px) normal weight or 14pt (18.67px) bold. Text at larger sizes is easier to read with lower contrast, hence the relaxed requirement.
UI components includes button borders, input focus indicators, icon outlines, and other graphical elements that convey meaning (but not decorative elements).
Common color combinations and their ratios
| Text / Background | Ratio | AA text | AAA text |
|---|---|---|---|
| Black on white (#000 / #fff) | 21:1 | Pass | Pass |
| Navy on white (#003366 / #fff) | 11.8:1 | Pass | Pass |
| Gray on white (#767676 / #fff) | 4.54:1 | Pass | Fail |
| Light gray on white (#aaa / #fff) | 2.32:1 | Fail | Fail |
| White on blue (#fff / #0066cc) | 5.1:1 | Pass | Fail |
| Yellow on white (#ffff00 / #fff) | 1.07:1 | Fail | Fail |
The most common failure: light gray placeholder text, footer text, or captions on white backgrounds. Many designers use #999 or #aaa for secondary text — these fail AA for normal text sizes.
How to fix failing contrast
When a color pair fails, you have three options:
- Darken the foreground color: for light text on white, moving from #aaa to #767676 is the minimum for AA compliance. Verify with the checker as you adjust.
- Lighten the background: if the background is dark, lightening it increases contrast with dark text.
- Increase text size: large text (18px+ or 14px+ bold) has relaxed contrast requirements — 3:1 for AA instead of 4.5:1.
The gray minimum for body text
The minimum gray value for body text on a white background to pass WCAG AA is approximately #767676 (ratio: 4.54:1). Anything lighter than this fails.
For primary content, aim for #595959 or darker for comfortable reading at normal sizes. Reserve the minimum-passing gray for secondary content like captions.
WCAG 3.0 and APCA
The upcoming WCAG 3.0 uses a different contrast algorithm called APCA (Advanced Perceptual Contrast Algorithm) that is more perceptually accurate — especially for dark mode and colored backgrounds. WCAG 3.0 is not yet the adopted standard, but APCA is worth evaluating for new design systems.
Summary
- Normal text needs 4.5:1 contrast for AA, 7:1 for AAA
- Large text (18px+ or bold 14px+) needs 3:1 for AA
- The minimum gray for body text on white: #767676
- Yellow on white is essentially invisible — never use it for text
- Check any color pair with the free contrast checker