The WCAG contrast check runs through a few straightforward steps. Nothing leaves your browser.
- You enter a foreground and a background color. The tool parses hex, rgb(), hsl(), or named CSS colors into their red, green, and blue channel values.
- Each RGB channel is linearized using the sRGB transfer function. This converts the gamma-encoded display values into linear light intensities.
- The linear values are weighted by the human eye’s sensitivity to each channel — 0.2126 for red, 0.7152 for green, 0.0722 for blue. The sum is the color’s relative luminance.
- The contrast ratio is (L1 + 0.05) ÷ (L2 + 0.05), where L1 is the lighter color’s luminance and L2 is the darker one. The extra 0.05 keeps the formula valid for pure black.
- The ratio is compared against the WCAG thresholds: AA normal text needs at least 4.5:1, AA large text needs 3:1, AAA normal text needs 7:1, and AAA large text needs 4.5:1. Large text means at least 18pt or 14pt bold.
FAQ
Common questions about WCAG contrast checking.
What’s the difference between AA and AAA?
AA is the minimum conformance level for most web content. It requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. AAA is a higher standard that requires 7:1 for normal text and 4.5:1 for large text. You might target AAA for key content like body copy on a news site, while using AA for the broader design. Meeting AAA everywhere can be hard with brand colors, so many teams aim for AA across the board and bump key text to AAA where they can.
What counts as “large text” under WCAG?
WCAG 2.x defines large text as at least 18 point (24px) for regular weight, or 14 point (about 19px) for bold weight. Symbols and icons that are part of a font face follow the same thresholds. If you’re not sure which threshold applies to your UI, check both — AA Large has a lower bar (3:1), so most color pairs that fail AA Normal actually pass AA Large when the text is big enough.
Why does my pair pass AA Large but fail AA Normal?
Because AA Large only requires a 3:1 ratio while AA Normal requires 4.5:1. WCAG sets a lower threshold for large text because bigger characters are easier to read even with less contrast. A color pair that scores, say, 4.0:1 passes AA Large (3:1 threshold) but fails AA Normal (4.5:1 threshold). This is very common with lighter brand colors used as foreground on white backgrounds.
Can I rely on this tool alone for accessibility auditing?
This tool checks one thing — the WCAG 2.x contrast ratio between two solid colors. Real accessibility involves more: focus indicators, font size and weight, color as the only way to convey information, and compatibility with screen readers and zoom tools. Use this contrast check alongside other audit methods for a complete picture of your application’s accessibility.
What color formats does the input accept?
You can paste 3, 4, 6, or 8-digit hex codes (with or without the #), rgb() and rgba() values in legacy comma syntax or modern space-separated syntax, hsl() and hsla() with any standard hue unit (deg, rad, grad, turn), hsv(), hwb(), and any of the 150 named CSS colors from the CSS Color Module Level 4 spec. The color is parsed entirely on your device.