The contrast checker measures how readable one color is against another and tells you whether the pair meets accessibility standards. Use it before committing a color combination to your brand. No account is required.
Check a pair of colors
- Open the contrast checker. It starts with a random pair you can replace.
- Set your Text Color and Background Color, either by typing a hex value or by clicking the swatch to open the picker.
- Read the contrast ratio and the AA and AAA badges below.
The colors are stored in the page address, so you can bookmark a combination or send it to someone with Copy URL. Press the space bar, or click Generate, for a fresh random pair.
Reading the result
The ratio is shown as a number against 1, so 7.42:1 means the text is 7.42 times brighter or darker than its background. Higher is more readable.
Below it, two badges show whether the pair meets each WCAG level. A green badge with a tick passes, a neutral badge with a cross does not. You also get a plain-language verdict: Very good, Good, or Poor.
The thresholds
| Level AA | Level AAA | |
|---|---|---|
| Normal text | 4.5:1 | 7:1 |
| Large text | 3:1 | 4.5:1 |
Large text means 18pt or larger, or 14pt or larger when bold. Because large text is easier to read, it is held to a lower bar.
AA is the level most organisations aim for and the one commonly written into accessibility requirements. AAA is stricter and is not always achievable with a given brand palette.
A pair can pass for large text and fail for body text. The tool tells you when that is the case, and it is worth knowing: a color that works for headings is not automatically safe for paragraphs.
Fixing a failing pair
Use Auto-adjust to have the tool change the colors for you. You choose what it is allowed to move:
- Adjust Text Color keeps your background and shifts the text.
- Adjust Background Color keeps the text and shifts the background.
- Adjust Both Colors moves both towards each other.
Auto-adjust darkens or lightens in small steps until the pair reaches the AA threshold for normal text, so it aims at AA rather than AAA. If it cannot get there without moving the color you locked, it tells you so, and you will need to change the other color instead.
Swap colors flips text and background, which is a quick way to see whether the reverse combination reads better.
Practical use
- Test your real pairs. Check your body text on your background color, then your buttons, then your links. It is the combinations you actually ship that matter, not colors in isolation.
- Check both themes. If your brand has a light and a dark version, both need testing.
- Do not rely on color alone. Contrast is one part of accessibility. Links should be distinguishable by more than hue, and states should not be signalled only by color.
The palette generator links straight into the checker when a palette has two colors, and the checker links back out, so you can move between choosing colors and testing them.