Color Contrast Checker

Low-contrast text is the most common accessibility defect on the web, and the easiest to fix — provided somebody checks before the palette is locked. The tool above takes a foreground and a background colour and reports the WCAG contrast ratio along with the four pass/fail thresholds that matter.

How it works

Enter two hex colours, or use the native pickers. The tool computes each colour's relative luminance using the WCAG 2 formula: each channel is normalised to 0–1, linearised (values above 0.03928 are raised to the power 2.4 after an offset), then weighted 0.2126 red, 0.7152 green, 0.0722 blue. Those weights are why green dominates and blue barely registers — they approximate how sensitive human vision is to each part of the spectrum.

The ratio is then (L_lighter + 0.05) / (L_darker + 0.05), rounded to two decimals. It runs from 1:1 for two identical colours to 21:1 for pure black on pure white, and it is symmetric: swapping foreground and background gives the same number.

Four results are reported against that ratio:

• AA normal text — needs 4.5:1. This is the threshold most audits are run against.
• AA large text — needs 3:1. "Large" means 18pt (24px) regular, or 14pt (18.66px) bold.
• AAA normal text — needs 7:1.
• AAA large text — needs 4.5:1.

Reading the result

AA is the practical target. WCAG 2.1 Level AA is what most public-sector procurement, the European Accessibility Act and comparable regimes reference. AAA is worth aiming for in body copy but is genuinely hard to hit with a brand palette, and WCAG itself does not recommend AAA as a blanket requirement for whole sites.

Interface components have their own threshold. Success criterion 1.4.11 requires 3:1 for the visual boundary of controls — input borders, focus indicators, toggle states, and the parts of an icon that convey meaning. A form whose input outlines are a fashionable light grey typically fails here while the text inside passes.

Placeholder text is text. So are disabled labels people are expected to read, and text baked into images. Greying something out is not an exemption.

Gradients and images need the worst case. A caption over a photograph has a different ratio at every pixel. Check the lightest point of the background against your text, not the average, or add a scrim behind the text so the background is known.

Failing by a little still fails. 4.4:1 is a fail. Nudging the lightness down a few percent in HSL is usually enough — the color converter makes that adjustment straightforward, since holding hue and saturation while dropping lightness keeps the colour recognisably the same.

Where this fits

Contrast is one criterion among many, but it is the one that affects the largest number of people: low vision is common, and so are bright sunlight, cheap screens and the fact that most of us get older. Semantic markup, focus management and text alternatives are the rest of the picture, and HTML5 essentials covers the structural elements that assistive technology depends on. If your colours are produced at runtime — a theme switcher, a chart palette, user-chosen tags — the check belongs in code as well as in review, and JavaScript fundamentals is the starting point for computing luminance on the fly.

Two limits of this tool, stated plainly. It implements the WCAG 2 ratio, not the newer APCA model being explored for WCAG 3, which scores the same pairs differently. And it takes opaque hex input only — for semi-transparent text, composite the colour against its actual backdrop first and check the result.