Color Contrast Checker (WCAG)
Check the contrast ratio of a text and background color against WCAG 2.2 AA and AAA for normal text, large text and UI parts, and get the nearest colors that pass
Loading the tool…
Pick a text color and a background color to get the WCAG 2.2 contrast ratio and the AA and AAA results at once. When a level fails, the page suggests the nearest passing color with only the lightness changed.
How to use
- On "Check two colors", set "Text color" and "Background color" with the picker or by typing HEX, rgb() or hsl().
- Type your own wording into "Preview sentence" to see it as normal, large and bold text and as a border and icon.
- Under "Nearest colors that pass", press "Apply" next to "Change the text color" or "Change the background". Press a HEX value to copy it.
- On "Check a palette", enter 2 to 12 colors for a table of every combination and the list "Pairs that reach the level".
How it works
- Contrast ratio = (L1 + 0.05) ÷ (L2 + 0.05), with L1 and L2 the relative luminances of the two colors. It runs from 1:1 to 21:1 and is rounded down to two decimals.
- Levels follow WCAG 2.2 criteria 1.4.3 (AA: 4.5:1 normal text, 3:1 large text), 1.4.6 (AAA: 7:1 and 4.5:1) and 1.4.11 (3:1 for UI parts). Large text is 24px, or bold 18.66px, or more.
- A suggestion keeps hue and chroma in OKLCH and moves only the lightness until the level is reached. When no lightness can reach it, the page says so.
- The last colors, the sentence and the palette list stay in this browser.
Questions and answers
- What does a contrast ratio of 4.5:1 mean?
- The lighter color's relative luminance plus 0.05 is 4.5 times the darker color's plus 0.05. It is the minimum for normal-size text at AA.
- Does grey text #777777 pass on white?
- Its ratio is 4.47:1, just under 4.5:1, so only the large-text level passes. One step darker, #767676, gives 4.54:1 and passes AA.
- What is the difference between AA and AAA?
- AA needs 4.5:1 for normal text, AAA needs 7:1. Most sites aim for AA; AAA suits long reading text.
- Do button borders and icons need contrast too?
- Yes. Under WCAG 1.4.11, UI parts and graphics that carry meaning need at least 3:1 against their surroundings; the row "UI parts and graphics" checks that.