Color contrast checker
Check any foreground and background pair against WCAG AA, AAA and APCA. See real text at every size, fix failing pairs in one click, and preview the result under color blindness.
Live preview
The quick brown fox
jumps over
The quick brown fox
jumps over
The quick brown fox
jumps over
The quick brown fox
jumps over
The quick brown fox
jumps over
The quick brown fox
jumps over
Contrast ratio
17.06:1
- AAPass
Normal text · ≥ 4.5:1
- AA LargePass
Large text · ≥ 3:1
- AAAPass
Normal text · ≥ 7:1
- AAA LargePass
Large text · ≥ 4.5:1
Any text, including thin weights. APCA is the perceptual contrast method proposed for WCAG 3.
Color-blindness simulation
How this pairing appears to viewers with the four common types of color vision deficiency.
- Aa
Original
- Aa
Protanopia
no red cones
- Aa
Deuteranopia
no green cones
- Aa
Tritanopia
no blue cones
- Aa
Achromatopsia
no color
Accessible color pairings
A quick reference of common pairings that pass WCAG AA for body text. Click any row to load it above.
| Preview | Pairing | Foreground | Background | Ratio | Level |
|---|---|---|---|---|---|
| Aa | Near-black on white | #1A1A2E | #FFFFFF | 17.06:1 | AAA |
| Aa | White on near-black | #FFFFFF | #1A1A2E | 17.06:1 | AAA |
| Aa | Navy on white | #0B3D91 | #FFFFFF | 10.04:1 | AAA |
| Aa | White on navy | #FFFFFF | #0B3D91 | 10.04:1 | AAA |
| Aa | Green on mint | #14532D | #F0FDF4 | 8.70:1 | AAA |
| Aa | Maroon on rose | #7F1D1D | #FEF2F2 | 9.16:1 | AAA |
| Aa | Blue on ice | #1E3A8A | #EFF6FF | 9.52:1 | AAA |
| Aa | White on slate | #FFFFFF | #111827 | 17.74:1 | AAA |
| Aa | Slate on grey | #111827 | #F3F4F6 | 16.12:1 | AAA |
| Aa | Yellow on slate | #FDE047 | #111827 | 13.46:1 | AAA |
Frequently asked questions
What contrast ratio do I need to pass WCAG?
For WCAG 2.1 AA, normal body text needs a contrast ratio of at least 4.5:1 and large text (24px, or 18.66px bold) needs at least 3:1. The stricter AAA level requires 7:1 for normal text and 4.5:1 for large text.
What is APCA and why is it shown here?
APCA (Accessible Perceptual Contrast Algorithm) is the contrast method proposed for WCAG 3. Unlike the WCAG 2.1 ratio, it accounts for how the human eye actually perceives light and dark text, so it reports contrast as an Lc value from roughly -108 to 106. It is shown alongside the WCAG ratio because it often gives a more realistic answer, especially for light text on dark backgrounds.
My colors fail. How do I fix them without redesigning?
When a pair fails AA, this tool suggests the nearest passing color by holding the hue and saturation and only adjusting lightness, in both directions — lighten or darken the text, or lighten or darken the background. Each suggestion is one click to apply, so you keep your color identity while reaching compliance.
Why simulate color blindness?
Roughly 1 in 12 men and 1 in 200 women have some color vision deficiency. A pairing that relies on a red/green difference can vanish for them even when its contrast ratio passes. The simulation shows your exact colors under protanopia, deuteranopia, tritanopia and achromatopsia so you can check the difference survives.