Colour contrast checker
Check text and background colours against WCAG AA and AAA, with transparency and the nearest colour that passes.
How to use
Enter the text colour and the background colour, by typing a code or with the colour picker. The contrast ratio and the WCAG results appear as you type. Swap colours exchanges the two, for light text on a dark background.
The ratio follows WCAG 2.2: each colour’s relative luminance is worked out from its sRGB values, and the ratio is (lighter + 0.05) ÷ (darker + 0.05), from 1:1 for two identical colours to 21:1 for black on white. Normal text needs 4.5:1 for level AA and 7:1 for AAA; large text, at least 24 px or 18.5 px in bold, needs 3:1 and 4.5:1. Icons, the borders of form fields and other parts of the interface need 3:1 against what is next to them (success criterion 1.4.11).
The ratio is never rounded up before it is compared: W3C says 4.499:1 does not meet 4.5:1. That is why the figure shown is cut, not rounded, to two decimals.
Colours can be written as #hex with 3, 4, 6 or 8 digits, as rgb() or hsl() in either CSS syntax, or as one of the 148 CSS colour names. A colour with transparency is checked as it is painted, blended over the colour behind it; a transparent background is checked over white, which WCAG assumes when no background is known. When the text fails, the tool proposes the nearest text colour with the same hue and saturation that reaches 4.5:1 and 7:1. Everything runs in your browser.
Example
Grey #777777 on white is 4.47:1, just under the 4.5:1 that normal text needs for AA. The nearest grey that passes is #767676, at 4.54:1.
#777777 on #ffffff4.47:1: fails AA for normal text by a hair; #767676 gives 4.54:1 and passes.#ffffff on #1a73e84.5:1: white text on this blue reaches AA exactly, and is far from AAA.rgba(0, 0, 0, 0.5) on #ffffffPainted as #808080, so 3.94:1: enough for large text and icons, not for normal text.#ff0000 on #ffffff3.99:1: pure red text on white just misses AA for normal text; #ee0000 passes with 4.53:1.
Frequently asked questions
What is the difference between AA and AAA?
They are two conformance levels of WCAG. AA is the one most laws and policies ask for: 4.5:1 for normal text and 3:1 for large text. AAA is stricter, 7:1 and 4.5:1, and W3C does not recommend requiring it for whole sites, because some content cannot meet it.
What counts as large text?
At least 18 point, or 14 point in bold. W3C gives the CSS equivalents as about 24 px and 18.5 px. Text that is merely in a large font family is not large; the size is what counts.
Does the contrast rule apply to logos and disabled buttons?
No. WCAG makes exceptions for text in logos and brand names, for purely decorative text, and for parts of an inactive interface, such as a disabled button.
Why does my design tool show a different ratio?
Usually because it rounds: 4.495 rounded to two decimals reads as 4.5, but it does not meet 4.5:1. Older tools also used 0.03928 instead of 0.04045 in the luminance formula; W3C notes this has no practical effect on the results.
Are my colours sent anywhere?
No. The calculation runs in your browser.