WCAG Color Contrast Checker
Check whether the contrast between two colors meets WCAG AA and AAA levels.
Your data is never sent to any server.
The WCAG color contrast checker computes the ratio between your text color and your background color and tells you whether the pair meets AA and AAA, for both normal and large text. If it falls short, it suggests the closest color to yours that passes, so you do not have to guess.
The thresholds at a glance
| Level | Normal text | Large text |
|---|---|---|
| AA | 4.5:1 | 3:1 |
| AAA | 7:1 | 4.5:1 |
Large text means 24 pixels or more, or about 18.66 pixels in bold. Most text on a website, including buttons and captions, counts as normal text.
What the law asks for
In the United States, Section 508 adopts WCAG AA for federal agencies, the 2024 ADA rule does the same for state and local governments, and ADA lawsuits against businesses use WCAG AA as the usual yardstick. In the European Union, the EN 301 549 standard builds in WCAG AA; it applies to public sector websites and, since June 2025 under the European Accessibility Act, to many private services such as e-commerce, banking and passenger transport.
Low contrast is one of the most common failures in accessibility audits, and one of the easiest to fix: darkening a gray is usually enough.
When the pair fails
The usual suspects are light gray on white, which looks so clean in a mockup, white text on a bright brand color such as orange or light green, and text on top of photos. In the first two, the tool’s suggestion usually solves it with a slightly darker shade of the same color. Photos have no single background, so the common fix is a semi-transparent dark layer between the image and the text.
How to use WCAG Contrast
- 1
Choose the text color
Use the visual picker or type the hex code of the foreground color, the one used for the text.
- 2
Choose the background color
Do the same for the color the text will sit on. If you entered them the wrong way round, the swap button flips them.
- 3
Read the ratio and the four levels
The ratio goes from 1:1, no contrast, to 21:1, black on white. Below it you can see whether it passes AA and AAA for both normal and large text.
- 4
Apply the suggestion if it fails
When the pair misses a level, the tool suggests the text color closest to yours that does pass. Press Apply to try it in the preview.
Frequently asked questions
What contrast ratio do I need to meet WCAG?
For level AA, 4.5:1 for normal text and 3:1 for large text. For level AAA, 7:1 for normal text and 4.5:1 for large text.
What counts as large text?
Text of 18 points or more, which is about 24 pixels on screen, or 14-point bold text, about 18.66 pixels. Because it is easier to read, WCAG asks for less contrast.
What is the difference between AA and AAA?
AA is the level that accessibility laws and public contracts require. AAA is stricter and is not expected for a whole site, because some brand colors could never reach it, but it is worth aiming for in long-form reading or for low-vision audiences.
How is the contrast ratio calculated?
From the relative luminance of both colors, using the WCAG formula (L1 + 0.05) / (L2 + 0.05), where L1 is the luminance of the lighter color.
Why is there sometimes no suggestion?
On mid-luminance backgrounds neither black nor white reaches 7:1, and sometimes not even 4.5:1. No text color can work there, so the only fix is to make the background lighter or darker.
Does contrast matter outside text?
Yes. Since WCAG 2.1, interface components and graphics that carry meaning need at least 3:1, such as the border of a form field, an icon without a label or the focus indicator.