Color Contrast Checker — WCAG AA & AAA

How the Color Contrast Checker Works

1. 1Click the color swatch to open the native color picker, or type a hex value directly into the input field (e.g. #1a1a2e).
2. 2Set both foreground (text/icon colour) and background colours — use the swap button to quickly reverse them.
3. 3The preview panel shows your colours applied to normal text, large text, and a UI button in real time.
4. 4The results panel shows the contrast ratio and Pass/Fail for every WCAG AA and AAA criterion simultaneously.

WCAG Contrast Ratio Thresholds

The contrast ratio is calculated using the WCAG relative luminance formula — a weighted combination of linearised RGB values that models human perception of brightness. A ratio of 1:1 means identical colours; 21:1 is black on white. The thresholds below define what counts as accessible under the international standard.

The Complete Guide to Colour Contrast and Accessibility

Colour contrast is one of the most common and most fixable accessibility problems on the web. When text does not stand out enough from its background, it becomes hard or impossible to read for a large number of people — and unlike many accessibility issues, it can be checked and corrected with a single number. This guide explains who benefits from good contrast, how the ratio is actually calculated, why contrast alone is not enough, and the legal and business reasons it matters.

Who Benefits from Good Contrast

It is tempting to think of contrast as an edge case for a small group, but the reality is that it helps almost everyone in some situation. People with low vision — a group that grows with an ageing population — rely on strong contrast to distinguish letters. People with colour blindness, which affects roughly one in twelve men, may not perceive colour differences that seem obvious to others, so luminance contrast becomes their main cue.

Just as important is situational impairment, which affects people with perfect vision. Anyone reading a phone screen in bright sunlight, using a dimmed display to save battery, looking at a cheap or ageing monitor, or simply tired at the end of a long day benefits from higher contrast. Designing for sufficient contrast is therefore not a niche accommodation — it makes your interface more usable for your entire audience, which is why accessibility advocates describe it as a benefit that flows to everyone.

How the Contrast Ratio Is Calculated

The WCAG contrast ratio is not a simple comparison of colours — it is based on relative luminance, a measure of how bright each colour appears to the human eye. This matters because our eyes are far more sensitive to green than to blue or red, so the formula weights the colour channels accordingly (green counts for about 72% of perceived brightness, red about 21%, and blue just 7%). Each colour's red, green, and blue values are linearised and combined with those weights to produce a luminance value.

The ratio itself is then (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter colour's luminance and L2 the darker's. The result runs from 1:1 (two identical colours, no contrast at all) up to 21:1 (pure black on pure white, the maximum). WCAG's thresholds sit along this scale: 4.5:1 for normal text at the AA level, 3:1 for large text and UI components, and 7:1 for the enhanced AAA level. Because the formula models perception rather than raw colour difference, two colours that look distinct on a colour wheel can still fail if their brightnessis too similar — a common surprise that the checker instantly reveals.

Contrast Is Necessary but Not Sufficient

Passing a contrast check is essential, but it is only one piece of accessible colour use. The most important companion principle is to never rely on colour alone to convey information. A form that marks errors only by turning a field red is invisible to a colour-blind user; a chart that distinguishes lines only by colour is unreadable to many. The fix is to add a second cue — an icon, a text label, a pattern, or a shape — so the information survives even when the colour is not perceived.

It is also worth remembering that contrast is just one of dozens of accessibility requirements. WCAG Level AA also covers keyboard navigation, screen-reader compatibility, text alternatives for images, captions for video, and much more. Good contrast makes your content readable; it does not by itself make your site fully accessible. Think of the contrast checker as one important instrument on a larger dashboard, not a complete accessibility audit.

The Legal and Business Case

Beyond being the right thing to do, accessible contrast increasingly carries legal and commercial weight. In many jurisdictions, web accessibility is a legal requirement: the Americans with Disabilities Act has been the basis for a rising number of lawsuits over inaccessible websites, the European standard EN 301 549 references WCAG, and public-sector bodies in many countries must meet Level AA by law. Contrast failures are among the most frequently cited issues in accessibility complaints precisely because they are easy to detect.

The business case is just as real. An accessible site reaches a larger audience, tends to have cleaner and more legible design that benefits all users, and often correlates with better usability metrics and even SEO. Building contrast checking into your design process — testing colour pairs before they ship, watching out for the commonly missed cases like placeholder text and focus indicators, and aiming to exceed the AA minimum on body copy — is a small, cheap habit that prevents costly retrofits and makes your product usable by more people. Enter your foreground and background colours above, aim comfortably past the thresholds, and you will have covered one of the highest-impact accessibility bases.