Contrast checker
Is your text readable on its background? Check any color pair against WCAG AA and AAA.
Large text, 24 pixels
Normal text at 16 pixels. The quick brown fox jumps over the lazy dog, and this is what your readers will see.
Button outline
Contrast ratio
2.46:1
- Normal text · AA 4.5:1Fail
- Normal text · AAA 7:1Fail
- Large text · AA 3:1Fail
- Large text · AAA 4.5:1Fail
- UI components and graphics · AA 3:1Fail
Nearest text colors that pass
Same hue, adjusted lightness. Click to use it.
Accessibility
Why contrast matters
Low-contrast text is hard to read for everyone in bright sunlight, on cheap screens or with tired eyes, and impossible for many of the hundreds of millions of people with low vision or color vision deficiency. Light grey text on white is one of the most common accessibility failures on the web.
The Web Content Accessibility Guidelines (WCAG) set minimum contrast ratios. Level AA is the standard referred to by accessibility laws such as the European Accessibility Act and by most organisations' own policies.
The WCAG contrast requirements
| What | AA | AAA |
|---|---|---|
| Normal text | 4.5:1 | 7:1 |
| Large text (24 px, or 18.7 px bold) | 3:1 | 4.5:1 |
| Icons, input borders, focus indicators | 3:1 | – |
| Logos and decorative elements | No requirement | No requirement |
Tips for accessible color
- For body text, aim well above 4.5:1. Near-black on off-white is comfortable and elegant.
- Check every state: hover, disabled, placeholder and error text are often the ones that fail.
- Don't use color alone to carry meaning. Add an icon or text to errors and success messages.
- Test dark mode separately. A pair that works on white may fail on a dark background.
More tools
Work with your colors
Color picker and converterPick a color and get HEX, RGB, HSL, HSB, CMYK and OKLCH, plus shades and harmonies. Palette generatorBuild a color palette from harmony rules, with shades and CSS variables.
Frequently asked questions
What contrast ratio do I need?
For WCAG level AA, the standard most laws and policies refer to: 4.5:1 for normal text, 3:1 for large text, and 3:1 for icons, input borders and other interface elements. Level AAA asks for 7:1 for normal text and 4.5:1 for large text.
What counts as large text?
Text that is at least 18 point (24 CSS pixels) in regular weight, or at least 14 point (about 18.7 CSS pixels) in bold. Large text is easier to read, so it may have lower contrast.
How is the contrast ratio calculated?
WCAG compares the relative luminance, the perceived brightness, of the two colors: (lighter + 0.05) ÷ (darker + 0.05). The result runs from 1:1 (no contrast) to 21:1 (black on white).
Why does 4.49:1 fail when it rounds to 4.5?
WCAG thresholds are exact, so a ratio just below 4.5 fails even if it looks like 4.5 when rounded. ColorPeekr checks the unrounded value and rounds the displayed ratio down, so it never shows a pass that isn't one.
How does the suggested color work?
ColorPeekr keeps the hue and intensity of your text color and only changes its lightness, darker or lighter, until it reaches the target contrast. It picks whichever direction needs the smallest change, so the fix stays close to your original color.
Does good contrast guarantee accessibility?
It is one important part. Accessible design also means readable font sizes, not relying on color alone to convey meaning, visible focus states and more. Contrast is where many sites fail first, though.