What color contrast is
Color contrast measures how much the brightness of your text differs from the background it sits on. It is written as a ratio, running from 1:1 (two identical colors, text invisible) up to 21:1 (pure black on pure white, the highest possible). The larger the number, the easier the text is to read — especially for people with low vision or color blindness, and for anyone squinting at a phone in bright sunlight.
The Web Content Accessibility Guidelines (WCAG) set minimum ratios a page must meet to count as accessible. This checker computes the exact ratio between two colors and tells you instantly whether it passes the AA and AAA levels, for both normal and large text. Everything runs in your browser — no data is ever sent to a server.
How to use the checker
- Pick the text color with the swatch or by typing its HEX code (for example
#333333, or the three-digit shorthand#333). - Pick the background color the same way.
- Read the contrast ratio and scan the results table: green means it passes, red means it fails.
- Hit Swap colors to test the reverse combination, and check the preview to see the real text on the real background.
How it is calculated (WCAG)
There are three steps. First, each channel (R, G, B) is scaled from 0–255 down to 0–1 and linearized:
c = channel / 255, then c/12.92 if c ≤ 0.03928, otherwise ((c + 0.055) / 1.055) ^ 2.4.
Next, the relative luminance of each color:
L = 0.2126·R + 0.7152·G + 0.0722·B
Finally the ratio, where L1 is the lighter color and L2 the darker one:
ratio = (L1 + 0.05) / (L2 + 0.05)
Worked example
Take a mid gray #777777 on a white #ffffff background. White has a luminance of 1.0. For the gray, every channel is 119, so 119 / 255 = 0.4667 and ((0.4667 + 0.055) / 1.055) ^ 2.4 ≈ 0.1845. The ratio is:
ratio = (1.0 + 0.05) / (0.1845 + 0.05) = 1.05 / 0.2345 ≈ 4.48:1
That 4.48:1 lands just short of the AA minimum for normal text (4.5:1), even though it clears AA for large text. It is the perfect example of why you should measure rather than trust your eyes. For reference, black on white gives the maximum of 21:1.
Normal text versus large text
WCAG asks for less contrast on large text, because its heavier strokes are already easier to read.
| Level | Normal text | Large text |
|---|---|---|
| AA | 4.5:1 | 3:1 |
| AAA | 7:1 | 4.5:1 |
Text counts as large from 18 pt (24 px), or 14 pt (18.66 px) when bold.
Frequently asked questions
What contrast ratio do I need?
For most sites the practical target is AA: at least 4.5:1 for normal text and 3:1 for large text. AAA (7:1) is stricter and is usually reserved for content where readability is critical. If you hit AA everywhere, you satisfy the great majority of accessibility laws and audits.
Why does large text need less contrast?
Because large or bold letters have wider strokes and stand out from the background even when the difference in brightness is smaller. That is why WCAG lowers the AA threshold from 4.5:1 to 3:1 for large text.
How do I fix contrast that fails?
Darken the text or lighten the background (or the reverse): push one of the two colors toward pure black or pure white. Adjusting only the lightness while keeping the hue lets you stay on brand. Every step toward the extremes raises the ratio — keep checking the number here until the row you care about turns green.
Does contrast apply to icons and borders too?
Yes. WCAG requires at least 3:1 for user-interface components and meaningful graphics — input borders, icons, focus indicators. You can use this checker for them by entering the element’s color as the “text” and its adjacent surface as the “background”.