Foreground (Text)

Background

Large text (24px) — Heading Normal text (16px) — The quick brown fox jumps over the lazy dog. Small text (12px) — Secondary information and captions

UI Components Button Input field

WCAG 2.2 Contrast Ratio

—

Poor AA Large AA AAA

APCA Lightness Contrast (Lc)

—

WCAG 2.2 Compliance

AA Normal Text (≥ 4.5:1) —

AA Large Text (≥ 3:1) —

AAA Normal Text (≥ 7:1) —

AAA Large Text (≥ 4.5:1) —

1.4.11 Non-Text (≥ 3:1) —

Color Vision Deficiency Simulation

Protanopia ~1% males

No red cone cells

Sample Text

—

Deuteranopia ~1% males

No green cone cells

Sample Text

—

Tritanopia ~0.003%

No blue cone cells

Sample Text

—

Achromatopsia ~0.003%

No color vision (monochrome)

Sample Text

—

About This Tool

Verify that your color combinations meet accessibility requirements using both WCAG 2.2 contrast ratio and the newer APCA (Accessible Perceptual Contrast Algorithm) metric. The tool also simulates how colors appear to people with different types of color vision deficiency and suggests fixes when contrast is insufficient.

Features

WCAG 2.2 contrast ratio — pass/fail for AA and AAA levels (text and non-text)
APCA Lc score — perceptual contrast from the WCAG 3.0 draft, with usage recommendations
Color blindness simulation — protanopia, deuteranopia, tritanopia, and achromatopsia previews with simulated contrast ratios
Auto-fix suggestions — when contrast fails, click a suggestion to apply the closest passing color
Non-text contrast — WCAG 2.2 SC 1.4.11 check for UI components and graphical objects (≥ 3:1)
Multi-format display — view and copy colors in HEX, RGB, and HSL
Live preview — see text at different sizes and UI components with your color pair
Shareable links — colors are encoded in the URL for easy sharing
CSS export — copy colors as CSS custom properties

WCAG 2.2 Contrast Requirements

The Web Content Accessibility Guidelines (WCAG) 2.2 define four contrast thresholds based on text size and compliance level:

AA Normal Text — minimum 4.5:1 ratio. Applies to text smaller than 18pt (24px) or 14pt (18.66px) bold.
AA Large Text — minimum 3:1 ratio. For text 18pt+ (24px) or 14pt+ bold (18.66px).
AAA Normal Text — minimum 7:1 ratio (enhanced). Same size rules as AA.
AAA Large Text — minimum 4.5:1 ratio. Enhanced level for large text.
Non-Text (SC 1.4.11) — minimum 3:1 ratio. Applies to UI components (buttons, inputs, borders) and graphical objects that convey information.

APCA — The Next Generation

APCA (Accessible Perceptual Contrast Algorithm) is being developed for WCAG 3.0. Unlike WCAG 2.x which uses a simple luminance ratio, APCA accounts for human visual perception, including:

Polarity sensitivity — dark text on light backgrounds is perceived differently than light text on dark backgrounds
Font size awareness — the Lc value maps to recommended font sizes and weights
Spatial frequency — thin fonts need more contrast than bold fonts

APCA Lc value usage guidelines:

Lc ≥ 90 — Preferred for body text
Lc ≥ 75 — Good for body text, perfect for large text
Lc ≥ 60 — Large text and headings only
Lc ≥ 45 — Large non-text elements only
Lc ≥ 30 — Non-text elements (icons, borders, dividers)
Lc < 15 — Not usable for any purpose

Color Vision Deficiency

Approximately 8% of males and 0.5% of females have some form of color vision deficiency. The simulation uses Brettel/Viénot transformation matrices to show how your color pair appears to people with:

Protanopia (~1% of males) — missing red cone cells. Red appears dark, red-green differences are lost.
Deuteranopia (~1% of males) — missing green cone cells. The most common form. Green-red confusion.
Tritanopia (~0.003%) — missing blue cone cells. Blue and yellow are affected.
Achromatopsia (~0.003%) — complete color blindness. Only luminance differences are perceived.

Each simulation card shows the simulated contrast ratio so you can verify your colors work for all users.

How to Use

Pick or type foreground (text) and background colors in HEX format
View WCAG 2.2 and APCA scores, plus the visual contrast gauge
Check color blindness simulations — each card shows the perceived contrast ratio
If contrast fails, click a suggested fix to automatically apply the closest passing color
Click RGB/HSL buttons to copy the color in that format
Use Copy CSS to export as custom properties or Share Link to share the URL with encoded colors
Use the swap button to reverse foreground and background colors

Linux Command Reference

You can calculate contrast ratios from the terminal using Python or shell tools:

Calculate WCAG Contrast Ratio

python3 -c " def lum(h): r,g,b = [int(h[i:i+2],16)/255 for i in (0,2,4)] r,g,b = [(c/12.92 if c<=0.04045 else ((c+0.055)/1.055)**2.4) for c in (r,g,b)] return 0.2126*r + 0.7152*g + 0.0722*b fg,bg = lum('1a1a2e'), lum('ffffff') ratio = (max(fg,bg)+0.05)/(min(fg,bg)+0.05) p = lambda ok: 'Pass' if ok else 'Fail' print(f'Ratio: {ratio:.2f}:1') print(f'AA Normal: {p(ratio>=4.5)}') print(f'AAA Normal: {p(ratio>=7)}') "

Ratio: 17.06:1AA Normal: PassAAA Normal: Pass

Extract Dominant Colors from Image

convert image.png -colors 5 -unique-colors txt:- | tail -n +2

0,0: (26,26,46) #1A1A2E srgb(26,26,46)0,1: (22,78,99) #164E63 srgb(22,78,99)0,2: (240,240,240) #F0F0F0 srgb(240,240,240)

Batch Check Multiple Color Pairs

echo "1a1a2e:ffffff 333333:f5f5f5 ff0000:ffffff 777777:ffffff" | while IFS=: read fg bg; do python3 -c " def lum(h): r,g,b=[int(h[i:i+2],16)/255 for i in(0,2,4)] r,g,b=[(c/12.92 if c<=.04045 else((c+.055)/1.055)**2.4)for c in(r,g,b)] return .2126*r+.7152*g+.0722*b l1,l2=lum('$fg'),lum('$bg') r=(max(l1,l2)+.05)/(min(l1,l2)+.05) ok='✓' if r>=4.5 else '✗' print(f'#$fg on #$bg → {r:.1f}:1 {ok}') " done

#1a1a2e on #ffffff → 17.1:1 ✓#333333 on #f5f5f5 → 11.6:1 ✓#ff0000 on #ffffff → 4.0:1 ✗#777777 on #ffffff → 4.5:1 ✗

Privacy

All contrast calculations happen entirely in your browser. No color data is transmitted to any server. The shareable link only encodes colors in the URL parameters.