Skip to content
Free · No install required

WCAG Contrast Checker

Check WCAG 2.2 contrast ratios for any pair of colors. Get AA / AAA pass/fail at a glance.

Contrast ratio

17.85:1

  • ✓ AA · Normalneed 4.5
  • ✓ AAA · Normalneed 7
  • ✓ AA · Largeneed 3
  • ✓ AAA · Largeneed 4.5

Why contrast matters

Up to 8% of users have some form of color vision deficiency, and many more have temporary impairments — bright sunlight on a screen, a cracked phone display, an aging monitor. Designing with sufficient contrast isn’t a niche accessibility checkbox; it’s the default for software that wants to be readable.

WCAG 2.2 — the current accessibility standard cited by ADA lawsuits, EAA enforcement in the EU, and platform store requirements — codifies this with explicit luminance ratio thresholds.

What ratio do I need?

Text sizeAA (baseline)AAA (enhanced)
Normal (under 18.66px bold or 24px regular)4.5:17:1
Large (18.66px+ bold or 24px+ regular)3:14.5:1

Hit AA at minimum. AAA is for accessibility-critical contexts.

Use cases

  • Design QA: paste your brand colors against your background colors and verify every combination before building components.
  • Component review: when a teammate proposes a new color, paste it through the checker before merging.
  • Tailwind palette generation: pick the lightest text color that still passes AA against your accent.
  • Accessibility audits: validate every color pair on a page during a manual a11y review.

How to use

  1. 1

    Pick foreground and background

    Use the native color pickers or paste hex codes for both colors. The preview panel updates live to show how the pair looks.

  2. 2

    Read the ratio

    The big number is the WCAG luminance contrast ratio. Higher = better contrast.

  3. 3

    Check AA / AAA chips

    Each chip tells you whether the pair passes for normal text and large text at AA (baseline) and AAA (enhanced) levels.

DevZap Premium

Use this directly on any page with DevZap

DevZap brings every tool into your browser as a one-click extension. No tab switching, no copy-pasting URLs. Inspect, generate, and export from any page you visit.

Install on Chrome

FAQ

Frequently asked questions

What's the difference between AA and AAA?
AA is the baseline accessibility level required by most regulations and platform stores. Normal body text needs a 4.5:1 ratio, large text (24px+ or 18.5px+ bold) needs 3:1. AAA is the enhanced level — 7:1 for normal text, 4.5:1 for large. Aim for AAA when accessibility is critical (medical apps, government services).
Does the WCAG ratio account for color blindness?
Contrast ratios cover luminance only — they verify a color-blind user can still distinguish text from background, but don't check whether two adjacent colors are distinguishable. For full coverage, run the design through a color-blindness simulator separately.
What counts as 'large text' for WCAG?
WCAG 2.2 defines large text as 18.66px (14pt) bold or 24px (18pt) regular and up. Anything smaller falls under the normal-text threshold.
Why don't I see APCA scores here?
WCAG 2.2 still uses the legacy contrast algorithm. APCA is being explored for WCAG 3.0 and isn't a regulatory standard yet, so we report the WCAG 2.2 ratio that currently determines compliance.

You might also like

Related tools

Color Converter — HEX, RGB, HSL, OKLCH

Convert any color between HEX, RGB, HSL, and OKLCH instantly. WCAG contrast against white shown live.

color Open the Color Converter — HEX, RGB, HSL, OKLCH tool

CSS Gradient Generator

Build linear, radial, and conic gradients with a live preview. Copy production-ready CSS.

css Open the CSS Gradient Generator tool

CSS Named Colors Reference

All 148 CSS named colors. Searchable, filterable by hue, copy as name, hex, or rgb.

color Open the CSS Named Colors Reference tool

Ready to make your browser smarter?

Install DevZap free. Upgrade when you're ready.

Install on Chrome Get Premium →