Color Contrast Checker
Check the WCAG contrast ratio between two colors and see AA and AAA results.
Large heading text
The quick brown fox jumps over the lazy dog. Small body copy at a normal reading size.
Higher is better. The WCAG scale runs from 1:1 (no contrast) up to 21:1 (black on white).
The contrast ratio between two colors is a single number from 1:1 to 21:1 that measures how different their brightness is. For normal body text, WCAG AA needs a ratio of at least 4.5:1; large text needs 3:1. Black on white scores the maximum, 21:1.
Why contrast matters
Text that sits too close in brightness to its background is hard to read — especially for people with low vision, colour-blindness, or anyone squinting at a phone in bright sunlight. The Web Content Accessibility Guidelines (WCAG) turn “readable enough” into a measurable rule: the contrast ratio between the text colour and the colour behind it.
The ratio compares the two colours’ relative luminance — a measure of perceived brightness that weights green most, then red, then blue. It runs on a scale from 1:1 (the two colours are identical, so the text is invisible) up to 21:1 (pure black on pure white). The higher the number, the easier the text is to read.
L₁ is the lighter colour’s relative luminance, L₂ the darker; each L is 0.2126R + 0.7152G + 0.0722B on linearized channels.
- 1 Enter your two colors. Type the text (foreground) and background colours as hex codes, e.g. #767676 on #FFFFFF.
- 2 Read the ratio. The tool converts each colour to relative luminance and divides: #767676 on #FFFFFF gives about 4.54:1.
- 3 Check the AA and AAA badges. 4.54:1 clears the 4.5:1 AA threshold for normal text, so the AA · normal badge shows Pass.
- 4 Adjust if it fails. If a badge fails, darken the text or lighten the background and watch the ratio climb until it passes the level you need.
WCAG contrast thresholds
Large text is 18.66px (14pt) bold or 24px (18pt) regular and larger. Ratios are minimums.
| Requirement | Minimum ratio |
|---|---|
| AA — normal text | 4.5:1 |
| AA — large text | 3:1 |
| AAA — normal text | 7:1 |
| AAA — large text | 4.5:1 |
| UI components & graphics (AA) | 3:1 |
Reading the result
AA is the level most sites and legal accessibility standards target; AAA is a stricter enhanced level that is not always achievable for every design. A colour pair only needs to meet the threshold for the level and text size you are actually using — a large heading passes AA at 3:1, while the same colour on small captions would need 4.5:1.
Two cautions. First, contrast alone doesn’t make text readable — a thin or decorative typeface can still be hard to read at a passing ratio. Second, the ratio is symmetric: swapping the text and background colours gives the same number, so light-on-dark and dark-on-light versions of a palette score identically.