The Color Contrast Checker measures the contrast ratio between a text color and its background and tells you whether it meets the WCAG accessibility guidelines. Enter two hex colors (or pick them with the swatches), and it shows the ratio, a pass/fail against WCAG AA and AAA for both normal and large text, and a live preview of the two colors together.
Good contrast is what makes text readable — especially for people with low vision or colour blindness, and for anyone on a phone in bright sunlight. The ratio ranges from 1:1 (no contrast) to 21:1 (black on white). Everything is calculated in your browser.
How to use the color contrast checker
- Enter or pick the text (foreground) color.
- Enter or pick the background color.
- Read the contrast ratio and whether it passes WCAG AA and AAA.
- Check the live preview, and adjust either color until it passes the level you need.
What the WCAG levels require
WCAG defines two conformance levels. AA is the common legal and practical standard; AAA is the enhanced level. The required ratio is lower for large text, because bigger letters stay readable at lower contrast. Large text means 18pt (about 24px) or 14pt bold (about 18.66px bold) and larger.
Minimum contrast ratios required by WCAG 2.x.
| Content | AA | AAA |
|---|---|---|
| Normal text | 4.5:1 | 7:1 |
| Large text (18pt / 14pt bold) | 3:1 | 4.5:1 |
| UI components & graphics | 3:1 | — |
How the contrast ratio is calculated
The ratio is based on relative luminance — how much light each color reflects. Each color is converted to luminance by linearising its red, green, and blue channels and weighting them (green counts most, blue least), then the ratio is (lighter + 0.05) ÷ (darker + 0.05).
That is why a pure black-on-white pairing gives the maximum 21:1, and two mid-greys can fail even if they look different — luminance, not hue, drives readability.
Tips for passing contrast
- Aim for AA (4.5:1) on body text as a baseline — it is what most accessibility laws expect.
- Darken the text or lighten the background (or vice versa) rather than changing the hue; luminance is what moves the ratio.
- Large headings and buttons can use the looser 3:1 large-text threshold, but body copy should not.
- Do not rely on color alone to convey meaning — pair it with text, icons, or underlines for links.
Frequently Asked Questions
What is a good color contrast ratio?
For normal body text, aim for at least 4.5:1 to meet WCAG AA, or 7:1 for the stricter AAA level. Large text (18pt, or 14pt bold) needs 3:1 for AA and 4.5:1 for AAA. The maximum possible ratio is 21:1 (black on white).
What is the difference between WCAG AA and AAA?
AA is the standard most accessibility laws and audits require (4.5:1 for normal text). AAA is an enhanced level (7:1 for normal text) that is harder to meet across a whole design, often used for content that must be maximally readable.
What counts as large text?
WCAG defines large text as 18 point (about 24px) and up, or 14 point bold (about 18.66px bold) and up. Large text only needs a 3:1 ratio for AA because bigger letters remain legible at lower contrast.
How is the contrast ratio calculated?
It compares the relative luminance of the two colors: (lighter + 0.05) ÷ (darker + 0.05). Luminance is found by linearising the red, green, and blue channels and weighting them, so brightness — not hue — determines the ratio.
Does contrast matter for color blindness?
Yes. Sufficient luminance contrast keeps text readable even when hues are hard to tell apart, which is why you should never rely on color alone and should pair it with strong contrast and non-color cues.