Color Bridge: Eight Types of Colour Blindness
A quick look at accessibility in the digital world, what WCAG covers (and what sits just outside it), and a small Chrome extension I built to help bridge that gap.
Accessibility is genuinely one of the most talked-about topics in digital development right now. Teams are running audits, following WCAG guidelines, and investing in inclusive design — and that momentum is a good thing. I wanted to understand it better myself, so I started reading.
Accessibility is a growing priority
The Web Content Accessibility Guidelines (WCAG) have become a practical standard across the industry. Most teams target Level AA, which covers things like keyboard navigation, screen reader support, alt text, and colour contrast ratios. These are meaningful requirements — they genuinely improve the experience for a lot of people.
Where WCAG leaves a gap
Reading through the guidelines, I noticed that colour-related rules focus mainly on contrast ratios. WCAG AA requires a 4.5:1 contrast ratio for text — which is a useful measure. But contrast ratio doesn't describe how a colour actually looks to someone whose eyes process it differently.
WCAG does include Success Criterion 1.4.1, which says colour shouldn't be the only way to convey information. That's Level A — the baseline. It's an important principle, but it's written broadly. It doesn't require testing under different colour vision conditions, or simulating how an interface appears to someone with deuteranopia or protanopia. There's no checklist item that asks: does this still make sense in greyscale?
“Colour alone is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.”
— WCAG 2.2, Success Criterion 1.4.1 (Level A)
Dark mode and colour blindness are different things
I'd assumed dark mode offered some help here. If someone finds bright interfaces hard to read, a dark theme gives them an alternative. That's a reasonable comfort feature — but it doesn't change the colours used in an interface. A UI in dark mode still relies on red and green to distinguish states. The hues are the same; the background is just darker.
Colour vision deficiency isn't about brightness — it's about how certain wavelengths of light are perceived. The CSS prefers-color-scheme media query is a nice quality-of-life feature, but it was never designed to address colour blindness.
There are eight recognised types
This was the part that genuinely surprised me. I'd always thought of colour blindness as mostly red-green. It turns out there are eight distinct types, affecting roughly 300 million people worldwide.
Red-green (most common):
- Deuteranomaly — reduced green sensitivity; affects ~6% of men
- Deuteranopia — no green cones; reds and greens appear as yellows and browns
- Protanomaly — reduced red sensitivity; reds appear darker
- Protanopia — no red cones; reds appear dark or absent
Blue-yellow:
- Tritanomaly — reduced blue sensitivity
- Tritanopia — no blue cones; blues appear green, yellows appear grey
Complete colour blindness:
- Achromatopsia — no colour perception; everything appears in greyscale
- Achromatomaly — very limited colour perception; mostly greyscale with faint hints of hue
What I built — Color Bridge
After learning all this, I wanted a quick way to see any web page through these different lenses — not buried inside DevTools, not requiring a design tool, just a one-click toggle. So I built Color Bridge.
Color Bridge is a Chrome extension that simulates all 8 types of colour blindness on any live web page in real time. Pick a vision type from the popup, and CSS filters are applied across the entire viewport instantly. No screenshots, no plugins, no context-switching — just click, see, learn. It's meant to be a quick empathy check, not a replacement for a full audit.
The hope is that spending even five minutes looking at your own work through these filters changes the way you think about colour choices going forward. It's a small tool, but small tools that shift perspective can be genuinely useful.
If you work on web products, give it a try. Open something you've built, run through the eight modes, and see what you notice. I'd love to hear what comes up.