Color Contrast Checker — WCAG 2.1 AA and AAA, With a Live Preview

The Color Contrast Checker takes two colours — the text and what sits behind it — and computes the WCAG contrast ratio between them. That ratio is then tested against all five WCAG 2.1 thresholds at once, so you get pass or fail for AA normal text, AA large text, AA non-text components, AAA normal text, and AAA large text from a single pair of inputs rather than one at a time.

The maths is the WCAG definition, not an approximation: each channel is converted from sRGB to linear light, weighted 0.2126 / 0.7152 / 0.0722 for red, green, and blue, summed into a relative luminance, and the two luminances compared as (lighter + 0.05) / (darker + 0.05). The result is shown to two decimal places.

Alongside the number there is a live preview of the actual pair at 16px regular, 24px bold, and 12px caption — because a ratio of 4.6:1 is a pass, and looking at 4.6:1 rendered at 12px will still tell you something the number won't. Everything runs in your browser; no colours are sent anywhere.

Low-contrast text is consistently the most common accessibility failure on the web. WebAIM's annual automated scan of the top one million home pages has found it on roughly four in five sites in every year it has run — ahead of missing alt text, missing form labels, and empty links. It is not usually negligence; it is that contrast is invisible to the person choosing the colours, who is looking at a calibrated screen in good light with functioning vision.

The people it affects are not a niche. An estimated 300 million people worldwide have some form of colour vision deficiency, and far more have low vision, age-related loss of contrast sensitivity, or cataracts. Add everyone reading a phone in direct sunlight and the population that benefits from a 4.5:1 ratio is a large share of any real audience.

There is a compliance dimension too. WCAG 2.1 Level AA — the level this checker's AA rows test — is the standard referenced by the US ADA in web accessibility litigation, by Section 508, and by the European Accessibility Act, which became applicable across EU member states on 28 June 2025. Contrast is one of the easiest criteria to test automatically, which is exactly why it shows up so often in audits and complaints.

The honest framing: passing every row here does not make a site accessible. It makes one criterion out of dozens defensible. Keyboard navigation, focus indicators, form labels, heading structure, and alt text are all separate work that no contrast tool can check for you.

AA Normal Text — 4.5:1. The main one. It applies to body copy, navigation links, form labels, and anything below 18pt (24px) regular or 14pt (18.67px) bold. The 4.5:1 figure was chosen to keep text legible for roughly 20/40 vision — about what an unaided eye reaches in later life — while staying achievable for real designs.

AA Large Text — 3:1. Text at 18pt (24px) regular or 14pt (18.67px) bold and above. Bigger glyphs have thicker strokes and more area, so they stay readable at a lower ratio. Headlines and large nav items usually qualify — but check the actual rendered size, not the intent: a "heading" styled at 20px regular is normal text as far as WCAG is concerned.

AA UI Components — 3:1. Non-text things you have to be able to see to use: input borders, checkbox outlines, focus rings, icon-only buttons, chart lines. This is the most-missed row on the list, and light-grey borders on white are the usual culprit — #e5e7eb on #ffffff is about 1.2:1.

AAA Normal Text — 7:1. The enhanced level, aimed at roughly 20/80 vision without assistive technology. Not mandated by the regulations above, but a reasonable target for healthcare, government, and education, where users with low vision are more likely to arrive without a screen magnifier.

AAA Large Text — 4.5:1. Same number as AA normal text. A useful mental shortcut: if every pair on your site clears 4.5:1, your headings are already at AAA and your body text is at AA.

Will: compute the exact WCAG 2.1 ratio for one foreground/background pair, test all five thresholds simultaneously, render the pair at three text sizes so you can judge it as well as measure it, swap the two colours in one click, and tell you the target ratio when a pair fails.

Won't accept anything but a solid six-digit hex. The hex field validates against #RRGGBB, so three-digit shorthand like #fff is rejected — write #ffffff. There is no rgb(), hsl(), or named-colour input; use the swatch picker, or convert the value in the Color Picker first.

Won't handle transparency, gradients, or images. This is the limitation most likely to catch you out in practice. Text at 60% opacity over white is not the colour you typed — it is the composite, and WCAG measures the composite. Same for text over a gradient, a hero photograph, or a semi-transparent overlay: you have to work out the effective background colour yourself and test that. For a photo background, test against the lightest and darkest points the text crosses and make sure both pass.

Won't check a whole page. It tests one pair at a time. To audit an existing site, use a browser-based scanner such as axe DevTools, WAVE, or Lighthouse, and use this tool to work out the fix once the scanner has told you where the problem is.

Won't simulate colour blindness. Contrast ratio and colour-vision deficiency are related but different problems. A pair can clear 7:1 and still be a red/green distinction that some users cannot tell apart — which is why WCAG has a separate criterion saying colour must never be the only way information is conveyed.

Won't use APCA. These are WCAG 2.x ratios. The perceptual contrast algorithm being developed for WCAG 3 produces different — sometimes very different — numbers, particularly for light text on dark backgrounds, where WCAG 2.x is known to be over-generous. WCAG 2.1 AA is what regulation currently points at, so it is what this tool reports.