Color Contrast Checker
Check the WCAG contrast ratio between any two colours and see whether your text passes AA and AAA.
Privacy: This tool runs entirely in your browser. Your data never leaves your device and is never uploaded to any server.
Large text sample
Normal text sample — the quick brown fox jumps over the lazy dog.
How to use this contrast checker
- Set the text colour and the background colour.
- Read the contrast ratio, or use Swap to try the reverse.
- Check the pass or fail list for AA and AAA at each text size.
- The preview shows the pair in context — no values are uploaded.
The WCAG contrast thresholds
| Level | Normal text | Large text |
|---|---|---|
| AA (minimum) | 4.5:1 | 3:1 |
| AAA (enhanced) | 7:1 | 4.5:1 |
| Non-text — icons, borders | 3:1 | 3:1 |
How the ratio is calculated
Each colour is converted to a relative luminance between 0 and 1, adjusting for how the eye responds to red, green and blue.
The ratio is then the lighter luminance plus 0.05, divided by the darker luminance plus 0.05. That small offset stops the scale from being infinite when a colour is pure black.
Making a colour pass
- Change the lightness, not the hue — darken or lighten the same colour rather than picking a new one.
- If a brand colour fails on white, try it on a dark surface instead of abandoning it.
- Bold or large text buys you a lower threshold for free.
- Check placeholder and disabled states too; they fail most often.
Frequently asked questions
What contrast ratio do I need?
WCAG asks for at least 4.5:1 for normal text and 3:1 for large text. The stricter AAA level wants 7:1 for normal text.
What counts as large text?
Roughly 18pt regular or 14pt bold. Thicker strokes stay legible at a lower contrast, which is why the threshold is lower.
Why do the same colours pass in one place and fail in another?
The threshold depends on text size and weight. A pair can pass comfortably for a heading and still fail for body copy.
Does contrast care about hue?
Not directly. The ratio is based on relative luminance, so a bright red and a bright blue of equal lightness score the same.
What about icons and borders?
Non-text elements such as icons and input borders need 3:1 against their surroundings under the same guidelines.
Is the calculation done locally?
Yes. The luminance maths runs in your browser and no colour value is sent anywhere.
More Color tools
Color Converter
Convert colors between HEX, RGB, HSL and CMYK instantly, and copy any format with a single click.
Color Picker
Pick a color with a visual picker or the on-screen eyedropper, and read its HEX, RGB and HSL values plus contrast.
Color Palette Generator
Generate complementary, analogous, triadic and tint/shade palettes from any base color, ready to copy.