Browser 106

no file limit

Inspector color/wcag-color-checker

WCAG Color Checker

Overview

WCAG Color Checker tells you whether a foreground/background pair meets WCAG 2.1's color-contrast success criteria — 1.4.3 (text), 1.4.6 (enhanced/AAA), and 1.4.11 (UI components) — with the exact ratio and a clear pass/fail for each level. It's the same engine as Contrast Checker, framed around compliance sign-off rather than general design exploration.

Accessibility sign-offConfirm a specific color pair meets WCAG AA before a design ships or a compliance review.
Documenting complianceGet the exact ratio to cite in an accessibility audit or VPAT.

Key features

Instant WCAG 2.1 AA and AAA pass/fail verdicts
Separate checks for normal text, large text, and UI components
Exact contrast ratio, not just a pass/fail badge
Screen-reader-friendly result announcements
Deeplinkable via ?fg= and ?bg= URL parameters

Set

Color Tools 11

Neighbours

01 Accessible Palette Generator 02 Accessible Text Color Finder 03 Brand Palette Accessibility Checker 04 Color Blindness Simulator 05 Color Converter 06 Color Editor

Specification

Command: color.wcag_color_checker
Set: Color
Input: text
Output: —
Max file: no limit
Batch: single file

Runtime

Engine: native oklch
Threads: single
Isolated: —
WebGPU: —
Memory: —

Transport 0 B

The file is opened, worked on and written back inside this tab. No upload step exists in this tool — there is nowhere for the bytes to go.

Keys

Search: ⌘K
Panels: ⌘1 · ⌘2
Full width: F
All keys: ⌘/

How it works

Enter your two colors

Pick or type the text color and the background it sits on.

See the WCAG verdict

Get a clear pass/fail for AA and AAA at once, with the exact ratio underneath.

Fix what fails

Apply a suggested readable color, or open the pair in the Color Editor to adjust it.

Frequently asked

What does WCAG require for color contrast?

WCAG 2.1 Success Criterion 1.4.3 requires 4.5:1 for normal text at AA (3:1 for large text), and 1.4.11 requires 3:1 for UI components and graphical objects. AAA (1.4.6) raises normal text to 7:1.

Does this check every WCAG accessibility requirement?

No — this checks color contrast only (SC 1.4.3, 1.4.6, and 1.4.11). WCAG compliance also covers things like keyboard navigation, alt text, and semantic structure, which this tool doesn't evaluate.

Is this the same as a contrast checker?

Yes — this page frames the same calculation around WCAG compliance specifically. See Contrast Checker for the same tool with a general-purpose framing.

Keys

Search: ⌘K
Panels: ⌘1 · ⌘2
Full width: F
All keys: ⌘/

Related · Color Tools