Tool · Accessibility Preview

Accessibility Preview.

See how your color pair lands for everyone. Pick a text and background colour, get a side-by-side preview under 12+ vision conditions - color blindness, low vision, cataracts, glaucoma, macular degeneration - with WCAG contrast scoring and the percentage of people affected by each.

The quick brown fox jumps over the lazy dog.
Contrast ratio
3.56:1
APCA Lc
-68
✕ AA (4.5:1)✓ AA Large (3:1)✕ AAA (7:1)✕ AAA Large (4.5:1)
Normal vision
~92% of people
Baseline - no filter applied
The quick brown fox jumps over the lazy dog.
Original contrast3.56:1✕ AA
Your reference point - every other card should stay legible relative to this one.
Protanopia
~1.3% of men
Red cones absent
The quick brown fox jumps over the lazy dog.
Contrast under filter3.29:1✕ AA
Avoid red-vs-green meaning; reds darken noticeably, so don't rely on red for alerts alone.
Protanomaly
~1.3% of men
Reduced sensitivity to red
The quick brown fox jumps over the lazy dog.
Contrast under filter3.40:1✕ AA
Reds look weaker and browner - pair red highlights with an icon or label.
Deuteranopia
~1.2% of men
Green cones absent
The quick brown fox jumps over the lazy dog.
Contrast under filter3.79:1✕ AA
Green/red and green/brown pairs merge - use lightness differences, not hue alone.
Deuteranomaly
~5% of men
Reduced sensitivity to green
The quick brown fox jumps over the lazy dog.
Contrast under filter3.65:1✕ AA
The most common CVD - muted greens and oranges blur together, so test status colors here first.
Tritanopia
~0.03%
Blue cones absent
The quick brown fox jumps over the lazy dog.
Contrast under filter3.49:1✕ AA
Blue/green and yellow/violet distinctions collapse - keep blue links underlined.
Tritanomaly
~0.01%
Reduced sensitivity to blue
The quick brown fox jumps over the lazy dog.
Contrast under filter3.55:1✕ AA
Blues desaturate - make sure focus rings and links don't depend on subtle blue tints.
Achromatopsia
~0.003%
No color perception (grayscale)
The quick brown fox jumps over the lazy dog.
Contrast under filter3.54:1✕ AA
Only lightness survives - if this card fails, the pair relies entirely on hue.
Achromatomaly
~0.001%
Partial loss of color (60%)
The quick brown fox jumps over the lazy dog.
Contrast under filter3.57:1✕ AA
Colors read washed-out; generous lightness contrast keeps text comfortable.
Cataracts
~25% over 65
Yellow tint, blur, dimming
The quick brown fox jumps over the lazy dog.
Original contrast3.56:1✕ AA
Increase size and weight rather than chasing hue - blur hurts thin type most.
Glaucoma
~3% over 40
Peripheral vision loss
The quick brown fox jumps over the lazy dog.
Original contrast3.56:1✕ AA
Keep critical actions near the reading focus - edge-of-screen cues can be missed entirely.
Low vision (mild)
~4% of adults
Reduced acuity + contrast
The quick brown fox jumps over the lazy dog.
Original contrast3.56:1✕ AA
Aim above the bare minimum ratio; AA-borderline pairs are the first to become unreadable.
Macular degeneration
~2% over 50
Central vision loss
The quick brown fox jumps over the lazy dog.
Original contrast3.56:1✕ AA
Users read with peripheral vision - larger text and strong contrast matter more than layout.
Astigmatism
~33% mild
Directional blur
The quick brown fox jumps over the lazy dog.
Original contrast3.56:1✕ AA
Light text on dark backgrounds halos for many astigmatic readers - test the inverted pair too.
Direct sunlight
Situational
Washed-out, low contrast
The quick brown fox jumps over the lazy dog.
Original contrast3.56:1✕ AA
Mobile screens outdoors lose most contrast - pairs below ~7:1 often disappear in sun.

What is the accessibility preview?

Accessibility Preview applies a palette to real interface components (text, buttons, links, form fields, alerts, charts) and reports every WCAG and APCA result in one view, so a palette is checked in context rather than pair by pair.

Checking a whole palette in context

Paste or generate a palette and assign roles. The preview renders a sample page in light and dark, marks each element with its contrast result, and lists the failures with one-click fixes. It also simulates the page under color vision deficiency and at 200 percent zoom, which are the two conditions most audits miss.

Accessibility Preview FAQ

How do I make my color palette accessible?

Assign roles here and fix the flagged pairs. Body text on backgrounds needs 4.5:1; large text, icons and borders need 3:1; keep meaning carried by more than color.

Does it check both light and dark mode?

Yes. Both themes are rendered and reported side by side.

Related color tools