Free tool
Color contrast checker
Check a text and background color against WCAG 2.2. You'll see the contrast ratio, every AA and AAA result, and the closest shade of your text color that passes.
How to read the result
The ratio runs from 1:1 (no contrast, the same color twice) to 21:1 (black on white). Each row in the table is one WCAG threshold:
- Normal text, AA (4.5:1) is the one most sites aim for. It comes from 1.4.3 Contrast (Minimum).
- Large text, AA (3:1) applies to text at least 24px, or about 18.66px when bold.
- AAA (7:1 and 4.5:1) is the stricter level from 1.4.6 Contrast (Enhanced).
- UI components and graphics (3:1) covers input borders, focus indicators, icons and chart lines, from 1.4.11 Non-text Contrast.
How is the ratio calculated?
WCAG compares the relative luminance (perceived brightness) of the two colors: (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color. Each color's luminance weights its red, green and blue channels after converting them from sRGB to linear light. Green counts most, which is why a pure green looks brighter than a pure blue.
What a contrast checker can't tell you
- Text over photos, gradients or video: check the lightest and darkest spots behind the text.
- Hover, focus, visited and disabled states: check each state's colors, not only the default.
- Whether color is the only way you show something, such as an error or a required field (WCAG 1.4.1).
- Thin or light font weights, which read as lower contrast than the ratio suggests.
For the full explanation, with fixes, read WCAG color contrast requirements.
Frequently asked questions
What contrast ratio does WCAG require?
For WCAG 2.2 Level AA, normal text needs at least 4.5:1 against its background and large text at least 3:1 (success criterion 1.4.3). Level AAA asks for 7:1 and 4.5:1 (1.4.6). User interface components and meaningful graphics need 3:1 (1.4.11).
What counts as large text?
At least 18 point (24 CSS pixels) regular, or 14 point (about 18.66 CSS pixels) bold. Anything smaller is normal text.
Why does a ratio of 4.49:1 fail?
WCAG thresholds are minimums with no rounding: 4.499:1 is below 4.5:1. This checker shows ratios truncated to two decimals so a near miss never looks like a pass.
Can I share a result?
Yes. The page address updates as you change the colors, so you can copy the URL and send it to someone.