Tools

Color Contrast Checker

Check color contrast ratios against WCAG 2.2 AA and AAA requirements with APCA scoring, color blindness simulation, and automatic fix suggestions.

Color Contrast Checker
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
—
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

What Are the 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 Do You Use It?

  1. Pick or type foreground (text) and background colors in HEX format
  2. View WCAG 2.2 and APCA scores, plus the visual contrast gauge

  3. Check color blindness simulations — each card shows the perceived contrast ratio

  4. If contrast fails, click a suggested fix to automatically apply the closest passing color

  5. Click RGB/HSL buttons to copy the color in that format

  6. Use Copy CSS to export as custom properties or Share Link to share the URL with encoded colors

  7. Use the swap button to reverse foreground and background colors

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.

Linux Command Reference

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

How Do You Calculate the 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

How Do You Extract Dominant Colors from an 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)

How Do You 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 ✗

Frequently asked questions

What is the minimum WCAG 2.2 contrast ratio for normal text?

Normal text needs at least 4.5:1 for AA and 7:1 for AAA. Large text (18pt+, or 14pt+ bold) only needs 3:1 for AA and 4.5:1 for AAA.

What's the difference between WCAG 2.2 contrast and APCA?

WCAG 2.x uses a simple luminance ratio, while APCA (planned for WCAG 3.0) models human perception, accounting for text polarity, font size, and weight. This tool reports both so you can compare them.

Does the contrast checker run in my browser?

Yes. All contrast calculations happen entirely client-side and no color data is sent to any server. Shareable links only encode the colors in the URL parameters.

Why check colors against color blindness simulations?

Roughly 8% of men and 0.5% of women have some color vision deficiency, so a pair that passes for typical vision may still fail for them. Each simulation card shows the perceived contrast ratio for protanopia, deuteranopia, tritanopia, and achromatopsia.

What does the non-text contrast (SC 1.4.11) check cover?

It applies the WCAG 2.2 minimum of 3:1 to UI components such as buttons, inputs, and borders, plus graphical objects that convey information "meaning".