Color Contrast Checker — WCAG AA & AAA Accessibility Tool

Why color contrast matters

If text doesn’t stand out from its background, a lot of people can’t read it — users with low vision, anyone with color-vision deficiency, and everyone squinting at a phone in direct sunlight. The Web Content Accessibility Guidelines (WCAG) turn “readable” into a measurable number: the contrast ratio between two colors. Meeting it isn’t just good practice — it’s the bar most accessibility laws (ADA, the European Accessibility Act, Section 508) point to.

This free online color contrast checker turns that into a one-step check. Paste a text color and a background color into the tool above — as HEX, rgb(), hsl(), oklch(), or any other CSS color — and it computes the ratio, grades it against every WCAG threshold at once, previews the pair for color blindness, and shows an APCA (WCAG 3) score alongside.

Reading the contrast ratio

Contrast is expressed as a ratio from 1:1 (identical colors, invisible) to 21:1 (pure black on pure white). It’s derived from the relative luminance of each color, not a simple difference in RGB values, so two colors that look “different” can still fail — mid-gray text on a slightly lighter gray is a classic trap. The higher the ratio, the more the text separates from its background.

The number is symmetric: swapping text and background gives the same ratio. Use the Swap button when you’re checking a design both ways (light card vs. dark card).

How the contrast ratio is calculated

The ratio isn’t the difference between two hex codes — it’s built from each color’s relative luminance, a model of how bright the color actually looks. Every channel is first linearized (undoing the sRGB gamma curve), then combined with weights that mirror the eye’s sensitivity — green counts far more than red or blue:

L = 0.2126 · R + 0.7152 · G + 0.0722 · B   (on linearized channels)

ratio = (L1 + 0.05) / (L2 + 0.05)          (L1 = lighter color)

Because luminance ignores hue and saturation, two vivid colors can still fail — red text on a green background looks loud but its ratio is low. That’s exactly why eyeballing isn’t enough. The W3C’s relative-luminance definition spells out the formula in full; this tool runs it for you on every keystroke.

Common contrast ratios

A few reference pairs make the scale concrete — every value below is what this checker returns for that pairing:

Text on background	Ratio	Passes
#000000 on #ffffff (black on white)	21:1	Everything
#595959 on #ffffff	7.0:1	AAA normal & below
#767676 on #ffffff	4.54:1	AA normal & below
#1a73e8 on #ffffff (link blue)	4.51:1	AA normal & below
#949494 on #ffffff	3.03:1	Large text / UI only
#777777 on #999999 (gray on gray)	1.57:1	Nothing

#767676 on white is the lightest gray that still clears AA for normal text — a handy anchor when you’re dialing in a muted text color.

AA vs AAA, and the thresholds

WCAG defines two conformance levels. AA is the practical target for almost every production site; AAA is a stricter goal for content where legibility is critical. The thresholds below come straight from the W3C’s Contrast (Minimum) success criterion.

Check	Minimum ratio
Normal text — AA	4.5:1
Normal text — AAA	7:1
Large text — AA	3:1
Large text — AAA	4.5:1
UI components & graphics — AA	3:1

Aim for AA on body text as a hard floor. AAA is worth chasing for long-form reading, small captions, and anything users stare at for minutes at a time.

Large text and the non-text rule

Two thresholds trip people up. First, large text — 24px and up, or 18.66px (14pt) bold — only needs 3:1, because larger glyphs stay legible at lower contrast. Don’t assume a heading that passes is fine when shrunk into body copy; re-check at the real size.

Second, contrast isn’t only about text. WCAG 1.4.11 requires 3:1 for the visual information you need to perceive or operate a control: an input’s border, a toggle’s on/off state, an icon’s shape, the focus ring. A button label can pass while the button outline against the page fails — check both. WCAG 2.1 and 2.2 share these contrast criteria; 2.2 adds 2.4.13 Focus Appearance, which extends the idea to the size and contrast of the focus indicator itself.

Contrast, the law, and SEO

Meeting AA isn’t only a nicety — it’s the line regulators draw. In the US, ADA Title III web-accessibility lawsuits routinely cite WCAG 2.1 AA as the expected standard, and Section 508 (federal) references the same WCAG success criteria. In Europe, EN 301 549 and the European Accessibility Act point to WCAG AA as well. Contrast is one of the most common — and most easily fixed — failures in every one of those audits.

There’s a search payoff too. Google’s Lighthouse and open-source auditors like axe score color contrast as part of their accessibility checks, and a page that’s hard to read loses on the engagement signals — bounce, dwell time, task completion — that ranking actually tracks. Passing contrast is one of the cheapest accessibility wins with a direct line to both compliance and UX.

Any CSS color: HEX, RGB, HSL, OKLCH, LAB, named…

The checker accepts any color your browser understands — not just hex. Paste #1a73e8, rgb(26 115 232), hsl(214 82% 51%), a named color like rebeccapurple, or modern wide-gamut syntax such as oklch(62% 0.19 256), lab(54% 20 -70), hwb(), even color-mix(in oklch, blue, white). Anything valid is normalized to sRGB (the space WCAG 2 is defined in) before measuring, so you can check the OKLCH values you author without converting them to hex by hand first.

Translucent colors (#rrggbbaa, rgba(), hsla(), OKLCH with an alpha) are composited before measuring — the background is flattened over white, then the foreground over that — so the ratio matches what actually renders instead of pretending the color is solid. On Chromium desktop browsers an eyedropper button lets you sample either color from anywhere on screen; everywhere else, use your browser’s own picker and paste the value.

Where to find your HEX and RGB codes

If you don’t already have the values, grab them from wherever the color lives:

• Browser DevTools — right-click an element, Inspect, and click the color swatch next to any color/background in the Styles panel. It shows HEX, RGB, and HSL and has its own eyedropper.
• Figma, Adobe, or Sketch — the fill/color picker displays HEX plus RGB/HSL; copy it straight out of your design file.
• This tool’s eyedropper — on Chromium desktop, click the eyedropper and sample any pixel on screen — a live site, a screenshot, a mockup.

The one-click AA fix, and the passing-lightness map

When your text color drops below AA for normal text, the tool suggests the nearest shade of that same color that clears 4.5:1 and lets you Apply it in one click. Below that, the passing-lightness map shows the whole picture: for your chosen hue against your background, it shades every lightness value that passes AA and AAA. Drag the handle along the gradient (or use the arrow keys) to set your text lightness live and watch it land inside a passing band. Against a mid-tone background you’ll often see two passing zones — very dark and very light text both work, while the middle fails — which a single suggested value can’t convey.

How to fix failing contrast

When a pair falls short, you have more levers than just the one-click fix:

• Darken or lighten one color. Usually the smallest visual change: push the text darker on a light background, or lighten it on a dark one. The passing-lightness map shows exactly how far you need to go.
• Make the text qualify as large. Bumping to 24px, or 18.66px bold, drops the bar from 4.5:1 to 3:1 — sometimes enough to save a borderline color.
• Add a scrim over images. Text on a photo is unpredictable; a semi-opaque dark (or light) overlay behind the text gives it a stable, high-contrast backdrop.
• Avoid gray-on-gray. Two mid-tones with similar luminance is the classic trap (see the #777 on #999 row above). Move one toward an extreme.
• Check both themes. A pair that passes in light mode can fail once inverted — re-run the check with your dark-mode colors too.

APCA: a preview of WCAG 3

Alongside the WCAG 2 ratio, the tool shows an APCA score (Lc). APCA — the Accessible Perceptual Contrast Algorithm — is the contrast model proposed for the next generation of the guidelines, WCAG 3. Unlike the 2.x ratio, it weights contrast perceptually and accounts for polarity (dark-on-light reads differently from light-on-dark) and, in full, font size and weight. Treat the Lc value as guidance, not a verdict: WCAG 3 is still a draft, so AA/AAA against the 2.x ratio remains the standard you’re held to today. A rough read: Lc 90+ is ideal for body text, Lc 75+ is solid, Lc 60+ suits larger text, and below Lc 30 is unusable for text.

Checking for color blindness

Meeting a contrast ratio doesn’t guarantee a pair is distinguishable — colors that differ mainly in hue can collapse for someone with color-vision deficiency. The color-blindness preview re-renders your pairing under the three dichromacies (protanopia, deuteranopia, tritanopia) so you can spot a combination that technically passes but turns to mud for red-, green-, or blue-weak vision. It’s an approximate simulation — a gut-check, not a clinical tool — but it catches the obvious traps.

A free, in-browser checker — no extension or download

Everything here runs client-side in your browser: your colors never get uploaded, there’s nothing to install, and no account to create — unlike a Chrome extension, a Figma plugin, or a desktop download. Like the well-known WebAIM contrast checker, it grades against the same WCAG 2.x ratios you’re legally held to; on top of that it adds the APCA (WCAG 3) preview, the color-blindness simulation, the one-click AA fix, and shareable links, so a single tab covers the whole check.

Using the checker

1. Enter your text and background colors with the picker, the eyedropper, or by typing any CSS color format.
2. Read the WCAG 2 ratio (and the APCA preview), then scan the pass/fail grid — each row names the exact threshold it tests.
3. Use the live preview and color-blindness preview to sanity-check the real pairing, not just the number.
4. If normal-text AA fails, Apply the suggested fix, or use the passing-lightness map to pick a shade by hand.
5. Hit Copy link to share the exact pair — the colors live in the URL, so a teammate opens the same check you’re looking at.

Pairs well with the px → rem converter — once your type scale and color choices both pass, your CSS is accessible by construction rather than by accident. Designing a logo or app icon at the same time? Check the foreground-on-background contrast of your artwork, then export every size with the app icon generator and audit the result with the favicon checker.