Free WCAG color contrast checker: Contrast.
Two colors. One question: can everyone read them?
Conformance.
13.19:1
AAA.
| A | AA | AAA | |
|---|---|---|---|
| Normal textUnder 24px | Not applicable | 4.5:1: Pass, SC 1.4.3 | 7:1: Pass, SC 1.4.6 |
| Large text24px, or 18.66px bold | Not applicable | 3:1: Pass, SC 1.4.3 | 4.5:1: Pass, SC 1.4.6 |
| UI & graphicsIcons, borders, focus | Not applicable | 3:1: Pass, SC 1.4.11 | No AAA criterion |
Passes AAA for normal text, passes AAA for large text, passes AA for UI.
Yellow marks the highest level each row reaches. WCAG sets no Level A contrast requirement; contrast starts at AA.
Pick your colors
Up and Down change lightness, Left and Right change chroma. Hold Shift for bigger steps. Lines mark 3:1, 4.5:1 and 7:1; the hatched ground is under 4.5:1.
WCAG 2.2
The verdict.
13.19:1
AAA.
Clears every text rule there is. Readable in bright sun.
#ffd400 on #111111
Next-gen APCA
Lc -82.5
Fine for body text at 18px and up.
Light text on dark, so the score is negative. APCA is the contrast method drafted for WCAG 3. It reads font weight and polarity better than the 2.x ratio, but it isn’t a requirement yet. WCAG 2.2 is what audits and the law measure, so pass that first.
Body text
Under 24px, or under 18.66px bold. Needs 4.5:1.
Pass.Large text
24px and up, or 18.66px bold. Needs 3:1.
Pass.Icons & UI
Borders, focus rings, icons, chart marks. Needs 3:1.
Pass.Body text
Under 24px, or under 18.66px bold. Needs 7:1.
Pass.Large text
24px and up, or 18.66px bold. Needs 4.5:1.
Pass.
Nearest passing colors
Fix it.
The closest colors that clear the bar. Same hue, same chroma where sRGB allows; only the lightness moves.
Nothing to fix. This pair clears AAA for text of every size, and 3:1 for icons and controls.
Color vision
Through other eyes.
Contrast ratios measure lightness, so they mostly survive color blindness. Hue doesn’t. If red means error and green means done, add a word or an icon too.
Protanopia
No red cones. About 1 in 100 men.
12.25:1 #edd000 on #111111
Deuteranopia
No green cones. About 1 in 100 men.
13.78:1 #f7dd23 on #111111
Tritanopia
No blue cones. Rare.
12.18:1 #ffc1b5 on #111111
Achromatopsia
No color at all. About 1 in 30,000.
13.25:1 #d8d8d8 on #111111
Every pair at once
Palette.
Up to eight colors, every pairing checked. Text down the side, backgrounds across the top. Choose a cell to open it in the checker.
| Background Ink | Background Ground | Background Yellow | Background Mint | Background Lilac | Background Ultramarine | |
|---|---|---|---|---|---|---|
| Text Ink | Same color | |||||
| Text Ground | Same color | |||||
| Text Yellow | Same color | |||||
| Text Mint | Same color | |||||
| Text Lilac | Same color | |||||
| Text Ultramarine | Same color |
AAA 7:1 and upAA 4.5:1, any textAA 18+ 3:1, large text and icons onlyFail under 3:1
Why it matters
Three numbers.
4.5:1
Body text, at AA. The line most of the web is held to, and the one most often missed.
3:1
Large text, icons, input borders and focus rings. If you need to see it to use it, it counts.
7:1
Body text, at AAA. Worth it for long reading, older eyes and phones in the sun.
Contrast is one check out of dozens. We build to WCAG 2.2 AA on every project, and we audit sites that need to get there. See our accessibility work.
Questions
Contrast, explained.
It compares how much light two colors give off, from 1:1 (the same color twice) to 21:1 (black on white). WCAG works it out from each color’s relative luminance: the lighter one plus 0.05, divided by the darker one plus 0.05. Hue doesn’t enter into it, only lightness.
4.5:1 for body text, 3:1 for large text (24px and up, or 18.66px bold and up), and 3:1 for icons, input borders, focus indicators and other parts of the interface you need to see to use it. AAA asks for 7:1 for body text and 4.5:1 for large text.
No. The thresholds are minimums, and WCAG says not to round. 4.48:1 fails AA for body text. This checker never rounds a ratio up across a threshold, so the number you see always agrees with the verdict.
APCA (Accessible Perceptual Contrast Algorithm) is the method drafted for WCAG 3. It accounts for font size, weight and whether text is light on dark or dark on light, so it often matches what people actually see better than the 2.x ratio. It isn’t a requirement yet. Pass WCAG 2.2 first, since that’s what audits, procurement and the law measure, and use APCA as a second opinion.
Logos and brand names are exempt, and so is text in a control that’s disabled, or text that’s purely decorative. Everything else on the page, placeholders and captions included, needs to clear the ratio.
No. Everything runs in your browser. The colors sit in the page’s address so you can share a pair, and nothing is sent to us beyond the site’s normal visit analytics.