How to check colour contrast
- Set the text colour and background colour. Use the swatch, type a HEX code, or both, the RGB value updates automatically.
- Read the ratio. The big number is the contrast ratio, anywhere from
1:1(no contrast) to21:1(black on white, the maximum possible). - Check the four badges. Each one shows PASS or FAIL against a WCAG success criterion, AA normal, AA large, AAA normal and AAA large.
- Look at the preview. Sample sentences render in your actual colours at normal and large size, so you can judge readability with your own eyes.
- Use Swap to flip the two colours, handy when you want to check text-on-background and background-on-text in one click.
- Try Suggest an accessible text colour if the ratio fails AA. It nudges your text colour darker or lighter, keeping the same hue, until it just clears 4.5:1.
How the contrast ratio is calculated
WCAG 2 defines contrast in terms of relative luminance, a measure of how bright a colour appears, not just its raw RGB values. Each of the red, green and blue channels is first normalised to a 0-1 range, then run through a small correction for how monitors actually render brightness (low channel values are divided by12.92, higher ones go through a power curve with an exponent of 2.4). The three corrected channels are combined with fixed weights, 0.2126 for red, 0.7152 for green and 0.0722 for blue, because the eye is far more sensitive to green than to blue. The result is a single luminance value between 0 (black) and 1 (white) for each colour.
The contrast ratio itself is (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter of the two luminances and L2 is the darker. The 0.05 offset accounts for ambient light scattering on a real screen, so even black text on a mid-grey never divides by zero. Black on white gives the theoretical maximum of exactly 21:1; identical colours always give exactly 1:1.
WCAG sets four thresholds for text. AA normal text needs at least 4.5:1, the baseline most accessibility laws (like the ADA and EN 301 549) point to. AA large text, meaning at least 18pt (24px) regular or 14pt (18.66px) bold, needs only 3:1, because bigger strokes stay legible at lower contrast. AAA is the stricter, optional level: 7:1for normal text and 4.5:1 for large text.
Why contrast matters
Low contrast is one of the most common accessibility failures on the web, and one of the easiest to fix once you can see the actual number. It affects far more people than screen-reader users alone: anyone with low vision or age-related vision changes, anyone with a common form of colour blindness, and honestly anyone reading a phone screen in bright sunlight. Meeting AA is also a legal requirement in many jurisdictions for business and government sites, and a routine item in accessibility audits. Beyond compliance, higher-contrast text is simply easier and faster to read for every visitor, which tends to show up in lower bounce rates and better conversion on real sites.
Frequently asked questions
What is the difference between AA and AAA?
AA is the standard WCAG conformance level most laws and audits require: 4.5:1 for normal text and 3:1 for large text. AAA is the stricter, optional level: 7:1 for normal text and 4.5:1 for large text.
What counts as "large text"?
WCAG defines large text as at least 18pt (24px) regular weight, or at least 14pt (18.66px) bold. Anything smaller is judged against the stricter normal-text thresholds.
Does a passing ratio mean the colours are not colour-blind safe?
Not on its own. Contrast ratio is based on relative luminance (lightness and darkness), not hue, so it does not detect problem combinations like red-on-green that some forms of colour blindness struggle with even at a high ratio. Pairing a strong contrast ratio with a colour-blindness check covers both bases.
Is contrast the only accessibility requirement for text?
No. Contrast is one of many WCAG success criteria. Font size, line spacing, focus indicators, alt text and keyboard access all matter too, but contrast is one of the quickest wins and one of the most commonly failed checks in automated audits.
Does it work offline?
Yes, once the page has loaded the calculation runs entirely in your browser and keeps working without a connection.
Related: color picker · color converter · color palette generator.