⌘ K
wcag 2 · aa · aaa · live · local

Check WCAG contrast in seconds

Verify any foreground / background pair against WCAG 2 AA and AAA thresholds. See the realistic sample, the exact ratio and every pass/fail tier.

Contrast Checker
Ratio
17.74:1
1 → 21
AA normal
pass
≥ 4.5
AAA normal
pass
≥ 7
Grade
AAA
best tier
Swap:
input · color
Foreground
Background
Large heading

Normal body text — usually 16px regular weight or smaller.

Bold or 18pt+ text counts as "large".

output · preview
17.74:1
Contrast ratio · 1 = none, 21 = max
✓ WCAG AA · normal text≥ 4.5
✓ WCAG AA · large text≥ 3.0
✓ WCAG AAA · normal text≥ 7.0
✓ WCAG AAA · large text≥ 4.5
Quick Start

How to verify accessible contrast

WCAG 2 sets a minimum contrast ratio so text remains legible. This tool computes it for any pair and grades against AA / AAA tiers.

  1. 01

    Pick foreground & background

    Choose the text and surface colors via swatch or HEX.

    Colors round-trip through a normalised OKLCH representation, so manipulations (lighten, mix, contrast) preserve perceptual uniformity per CSS Color 4.

    inputOKLCHCSS Color 4perceptuallive
    fg · color#111827 · sRGB
    bg: #ffffff
    loaded · normalisedOKLCH · ready
  2. 02

    Read the ratio

    Range is 1 (no contrast) to 21 (pure black on white).

    Format conversion handles hex, rgb(), hsl(), oklch(), color(display-p3 …) with proper gamut mapping when crossing colour spaces.

    ratiohex · rgb · hslP3gamut-mappedlive
    ratio · options16.6:1 · live
    AAA pass
    options applied · livelive
  3. 03

    Check the tiers

    AA normal needs 4.5, AA large 3, AAA normal 7, AAA large 4.5.

    Contrast and accessibility checks evaluate against WCAG 2.2 AA (4.5:1) and AAA (7:1) thresholds; APCA is offered when contrast is the goal.

    wcagWCAG 2.2APCAAA · AAAcontrast
    tier · convertedAA / AAA · ready
    4.5 / 3 / 7 / 4.5
    converted · liveWCAG-aware
  4. 04

    Ship accessible

    Aim for AA on every body-text pair, AAA where you can.

    Copy formats any swatch in the chosen syntax (#aabbcc, rgb(170 187 204), etc.); downloads emit CSS variable blocks or palette JSON.

    shipclipboardCSS varspalette JSONblob
    ok · copiedready · done
    ✓ accessible
    shipped · ready to shipsuccess
Pro tips

Colour work that survives accessibility audits

Use OKLCH for manipulation

OKLCH is perceptually uniform — lightness changes look uniform. hsl() isn’t, and produces muddy mid-tones.

Test against WCAG 2.2

4.5:1 for normal text (AA), 7:1 for AAA. Use Contrast Checker before shipping.

Mind gamut clipping

P3 colours that exceed sRGB get clipped on standard displays. Choose relative colorimetric in CSS Color 4.

Colour blindness affects 8%

Use the Color Blindness simulator to check critical UI before launch.

Don’t hardcode hex

Use CSS variables. Light/dark themes become trivial when colours are tokenised.

Dark mode isn’t inverted

Don’t simply invert lightness — desaturate slightly and re-pick accents. Pure-inverted UIs look harsh.

Related toolsAPCAPair TesterA11y SuggesterCVD SimColor PickerPair Suggester
Use Cases

When to verify contrast

Every accessibility audit starts here.

Design reviews

Score every text/surface pairing against AA/AAA. Conversions go through OKLCH so perceptual lightness stays uniform across hues — a 50% L blue looks as bright as a 50% L yellow. HSL fakes this and produces muddy mid-tones, OKLCH solves it per CSS Color 4.

WCAG 2.2 AA

Marketing landing pages

CTAs that fail AA hurt conversion as well as accessibility. WCAG 2.2 contrast is sampled live for AA (4.5:1) and AAA (7:1) — flip foreground/background to test both directions. APCA is offered when contrast itself is the goal (e.g., dataviz).

P3-aware

Dark mode

Verify the dark palette is just as legible as the light one. Output covers hex, rgb(), hsl(), oklch(), and color(display-p3 …) for CSS Color 4. Drop straight into Tailwind config, CSS custom properties, or Figma without re-typing values.

perceptually-uniform

Component libraries

Lock token contrast as part of the design system. Pair with the Contrast Checker before shipping any new theme. Catches accessibility regressions before they become bugs filed against you by users with low vision.

gamut-safe

Quick audits

Spot-check a screenshot before shipping a release. Tokens drop straight into Figma variables, Tailwind config, or CSS custom properties. Theme switching becomes a single variable swap rather than a search-replace across stylesheets.

a11y-ready

Compliance

WCAG AA is the legal bar in most jurisdictions. Gamut-aware: tools warn before you ship a P3 colour that clips on sRGB displays. Choose the appropriate fallback strategy (relative colorimetric vs perceptual) per CSS Color 4 spec.

design-token
FAQ

Frequently asked questions

WCAG AA requires 4.5:1 for normal text and 3:1 for large text (18pt+ or 14pt+ bold). AAA tightens these to 7:1 and 4.5:1.
18pt or 14pt bold (24px / 18.66px bold) per WCAG. Smaller text always uses the stricter threshold.
Mid-saturation brand hues often need a darker variant on light backgrounds. Try the Darken/Lighten or Accessible Suggester tools.
WCAG 2 luminance formula: relative luminance of both colors, then (L1 + 0.05) / (L2 + 0.05).
No — the contrast math runs locally in your browser.
Suggest a tool

Something missing?

Tell us what you need. We ship the top requests every two weeks.

Sent straight to the maintainers · no account needed
47 in queue·8 shipped this month
Request queued. Thanks!