How do I check if my text and background colors pass WCAG?

Enter hex codes in Text color and Background color, or use the pickers. The Contrast ratio appears with Pass or Fail for AA and AAA normal and large text, plus UI components.

What contrast ratio does WCAG AA require?

AA needs 4.5:1 for normal text and 3:1 for large text. AAA needs 7:1 for normal text and 4.5:1 for large text. UI components and graphical objects need 3:1.

What counts as large text?

The tool treats 18pt (24px) regular text, or 14pt (18.66px) bold text, as large. Smaller text must meet the higher normal-text thresholds.

My colors fail AA. How do I fix them?

Use the one-click Fix text color or Fix background suggestions. They adjust lightness while keeping the same hue until the pair reaches 4.5:1.

Which color formats does it accept, and can I pick from the screen?

It accepts 3-digit and 6-digit hex values, such as #abc or #1e293b. A Pick color from screen button appears in browsers that support the EyeDropper API, such as Chromium.

Yes. Every tool is free to use, with no account and no credit card. The work runs on your device rather than on our servers, which is what keeps it free to run.

Does it work on mobile?

Yes. It runs in current mobile browsers on iOS and Android, with nothing to install.

🌓

Free WCAG Color Contrast Checker

Check whether two colors meet WCAG AA and AAA contrast standards for accessibility. Live preview at multiple text sizes with automatic suggestions when contrast is too low.

Runs in your browserNo sign-up, no pop-upsNo login requiredFree forever

Works offline once loaded

Text color

Background color

Large heading text

Medium body text (18px) for reading and content.

Normal body text (16px) for paragraphs.

Small body text (14px) for captions and metadata.

14.63:1

Contrast ratio

✓WCAG AA — Normal text

Requires 4.5:1 · You have 14.63:1

✓WCAG AA — Large text

Requires 3.0:1 · You have 14.63:1

✓WCAG AAA — Normal text

Requires 7.0:1 · You have 14.63:1

✓WCAG AAA — Large text

Requires 4.5:1 · You have 14.63:1

✓UI components / graphical objects

Requires 3.0:1 · You have 14.63:1

Quick presets

Based on WCAG 2.1 contrast guidelines. Large text = 18pt (24px) normal or 14pt (18.66px) bold. Hex codes update in both directions: type a hex or pick a color, both inputs stay in sync.

Common uses

Audit Web Pages for WCAG ComplianceVerify your site's text colors meet WCAG AA or AAA contrast standards for accessibility.
Verify Brand Color CombinationsTest your brand color palette pairings to ensure they work for accessible UI design.
Test Dark Mode Color PalettesLight text on dark backgrounds can still fail contrast — check your dark mode palette pairings here.
Color Pairings for Print MaterialsPosters, signs, and printed materials also need readable contrast — especially for older viewers.
Design Accessible Button ColorsMake sure CTAs, action buttons, and links pass WCAG against their backgrounds.

How It Works

Contrast checking runs entirely in your browser using the WCAG 2.1 relative luminance algorithm — no library, no server, just hand-written math that follows the spec exactly. Every result updates in real time as you type or pick a color.

1
Hex input and normalization
Both 3-digit (#abc) and 6-digit (#aabbcc) hex values are accepted and normalized to full RGB triples. Invalid input is rejected immediately rather than silently defaulting to black, so a red border appears instead of a misleading pass result.
2
WCAG luminance calculation
Each color is converted to relative luminance using the WCAG 2.1 formula: sRGB channel values are linearized with a piecewise gamma correction (dividing by 12.92 below 0.03928, raising to the power of 2.4 above it), then weighted as 0.2126R + 0.7152G + 0.0722B.
3
Contrast ratio and compliance checks
The contrast ratio is computed as (lighter + 0.05) / (darker + 0.05) and checked against all five WCAG thresholds: AA normal text (4.5:1), AA large text (3:1), AAA normal text (7:1), AAA large text (4.5:1), and UI components (3:1). Results update on every keystroke.
4
Hue-preserving fix suggestions
When the pair fails WCAG AA, the tool searches HSL lightness space — stepping outward from the original lightness in both directions — to find the nearest variant of each color that passes 4.5:1 while keeping the same hue and saturation. The EyeDropper API (Chromium) is also available to sample any color directly from your screen.

Related Tools

👁️

Color Blindness Simulator

See how your design looks to people with color vision deficiencies. Simulates protanopia, deuteranopia, tritanopia, achromatopsia, and milder anomalies.

Try itFiles stay local

📐