Color Contrast Checker — WCAG Accessibility Made Simple

Why Contrast Ratios Matter

Low contrast is the single most common accessibility barrier on the web. An estimated 300 million people worldwide have some form of color vision deficiency, and hundreds of millions more struggle with low-contrast interfaces in bright sunlight, on aging screens, or simply because of age-related vision decline.

WCAG 2.1 (Web Content Accessibility Guidelines) sets minimum contrast ratios that websites must meet to be considered accessible. These requirements are now part of legal compliance frameworks in the US (Section 508), the EU (EN 301 549), and the UK (Equality Act 2010). Failing them is not just an accessibility problem — it is an increasing legal risk for public-facing products.

The good news: fixing contrast is cheap. You change a hex color. The challenge is knowing which pairs pass and which fall short — that is exactly what a color contrast checker automates.

How to Use the Color Contrast Checker

1. Open the tool at publicsofttools.com/tools/color-contrast-checker.
2. Pick a foreground color — this is your text or icon color. Use the color picker or type a hex value directly.
3. Pick a background color — the surface behind the text.
4. Read the contrast ratio — the tool calculates it instantly and shows pass/fail badges for every WCAG criterion.
5. Adjust and iterate — tweak either color until all the levels you care about show a pass. The live preview updates as you type.

The preview panel shows exactly how your color pair looks at normal body text size and at a larger heading size, so you can see the practical result, not just the number.

WCAG Contrast Requirements — What Each Level Means

The tool checks five separate criteria. Understanding what each one covers will help you interpret the results correctly.

WCAG Level AA is the baseline for legal compliance in most jurisdictions. Level AAA is aspirational — it is difficult to achieve across an entire interface and WCAG itself does not require full-site AAA conformance. The UI components criterion (from WCAG 1.4.11, Non-text Contrast) is often overlooked but applies to interactive elements and informational graphics.

How the Contrast Ratio Is Calculated

The formula uses relative luminance — a measure of how bright a color appears to the human eye, accounting for how differently the eye responds to red, green, and blue light.

Each RGB channel is linearized (gamma-corrected), then weighted: red at 21.26%, green at 71.52%, blue at 7.22%. The two luminance values are then combined into a ratio using the formula (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color and L2 the darker. A ratio of 1:1 means identical colors; 21:1 is the maximum (pure black on pure white).

All of this runs locally in your browser — no colors, no pixel data, and no input is ever transmitted anywhere.

Advanced Workflows

Auditing an Entire Design System

If you maintain a design system, work through your token combinations systematically: each text color against each background color, plus each icon color against every surface. Focus first on primary and secondary text colors — these are the highest-traffic pairs on any interface. Mark failing pairs in your token documentation and propose replacements that preserve the brand hue while increasing lightness or darkness enough to pass.

Checking Brand Colors During Initial Palette Creation

When building a new brand palette, run every candidate combination through the checker before committing to a design system. A light brand primary on white frequently fails AA — catching this at the palette stage avoids expensive rework later. A practical rule: any mid-tone color (HSL lightness between 35% and 65%) is a risk; always verify it.

Testing Focus Ring Visibility

Focus rings are a critical accessibility requirement (WCAG 2.4.7 and the stricter 2.4.11 in WCAG 2.2). The ring must have at least 3:1 contrast against both the adjacent component background and the unfocused state. Use the UI components threshold in the checker to verify that your custom focus styles meet the minimum before shipping.

Dark Mode Consistency

Many interfaces pass AA in light mode but fail in dark mode — especially mid-toned brand colors that look fine on white but disappear on dark surfaces. Test every color pair twice: once for light mode, once for dark mode. A systematic approach is to use the same background tokens (surface-light and surface-dark) against every foreground token in the system.

Checking Placeholder Text and Disabled States

WCAG technically exempts placeholder text and disabled controls from contrast requirements, but it is still good practice to maximize contrast there. Many users find low-contrast placeholder text confusing — they cannot tell whether a field is empty or pre-filled. Aim for at least 3:1 for placeholder text even though it is not strictly required.

Common Questions

What is a good contrast ratio for body text?

4.5:1 is the WCAG AA minimum. Most professional design teams target 5:1 to 7:1 for primary body text so there is headroom for slight rendering variation across screens and operating systems. Pure black on white is 21:1 — often too stark for comfortable reading over long passages, which is why most designs use near-black (e.g. #1a1a1a) rather than #000000.

Does this cover color blindness?

The WCAG contrast ratio is based on luminance, not hue — so it does not directly test for color blindness. A red/green pair might technically pass the contrast ratio while being completely indistinguishable to someone with deuteranopia. For full color blindness testing you need a dedicated color blindness simulator. The contrast checker tells you about luminance-based accessibility, which is a separate (and larger) population concern.

What counts as “large text” under WCAG?

WCAG defines large text as 18pt (24px) or larger, or bold text at 14pt (18.67px) or larger, measured in CSS points at 96dpi. In practice this means headings and large UI labels typically qualify; body text and navigation items typically do not.

Why does the ratio show as a decimal instead of a round number?

The contrast ratio formula produces precise decimal outputs — for example, 4.54:1 or 7.00:1. WCAG thresholds are exact (4.5 and 7), so a result of 4.50 passes AA normal text while 4.49 does not. The checker shows two decimal places to make marginal passes and failures immediately visible.

Do I need AAA compliance?

Most legal requirements reference WCAG 2.1 Level AA, not AAA. Achieving AAA across a full interface is genuinely difficult — some design constraints (brand colors, dark surfaces, small type sizes) make it practically impossible without sacrificing design integrity. Aim for AA compliance as a floor, and meet AAA where it is achievable without trade-offs.