🌗 Color Contrast Checker
Enter a text color and background color to see the WCAG contrast ratio and whether it passes the AA and AAA accessibility levels for normal and large text.
The ratio comes from luminance, not from how different the colours look
Each channel is scaled to 0-1 and put through the sRGB gamma step, which undoes the display encoding so the numbers represent actual light. Only then are the three weighted and combined:
v = c / 255
lin = v <= 0.03928 ? v / 12.92 : ((v + 0.055) / 1.055) ^ 2.4
L = 0.2126·linR + 0.7152·linG + 0.0722·linB
ratio = (L_lighter + 0.05) / (L_darker + 0.05)The green weight of 0.7152 dwarfs blue's 0.0722 because the eye takes most of its brightness signal from green. The default #1A1A1A has a luminance of 0.0103 against white's 1.0, giving (1.0 + 0.05) / (0.0103 + 0.05) = 17.4:1. That 0.05 is an allowance for screen flare, and it is why the scale tops out at 21:1 for black on white rather than running to infinity.
Because only luminance counts, hue difference earns you nothing. Pure red on pure blue is as different as two colours get, and it scores 2.15:1 - a failure at every level - because their luminances, 0.2126 and 0.0722, are close together. Yellow on white manages 1.07:1. Swapping the two fields changes nothing, since the formula always divides the lighter by the darker.
The thresholds, exactly
| Requirement | Minimum |
|---|---|
| AA, normal text (1.4.3) | 4.5:1 |
| AA, large text (1.4.3) | 3:1 |
| AA, UI components and graphics (1.4.11) | 3:1 |
| AAA, normal text (1.4.6) | 7:1 |
| AAA, large text (1.4.6) | 4.5:1 |
Large text means 18pt (24px) or larger, or 14pt (18.5px) and bold. The 3:1 bar also covers the things this checker has no row for: input borders, focus rings, icon glyphs, chart lines and the boundary of a button. Text that is purely decorative, or part of a logo, is exempt.
Frequently asked questions
What contrast ratio is needed to pass WCAG AA?
4.5:1 for normal body text, and 3:1 for large text - 24px, or 18.5px bold and above. AAA raises those to 7:1 and 4.5:1.
Do buttons, icons and input borders need 4.5:1?
No, they need 3:1 under success criterion 1.4.11. That covers the visual boundary of a control, focus indicators and any graphic you must see to understand the content. Text inside the button still needs 4.5:1.
My two colours look completely different but the checker says they fail. Why?
Contrast ratio measures relative luminance, which is a brightness figure, and ignores hue entirely. Red on blue is 2.15:1 despite being opposite colours, because both are similarly dark. Change one colour's lightness, not its hue.