Something wrong with this tool?
About Color Blindness CSS Reference Online
This tool generates a CSS reference for designing accessible color palettes that work for users with color vision deficiencies. It shows how colors appear under different types of color blindness (protanopia, deuteranopia, tritanopia, monochromacy) and suggests safer alternatives.
About 8% of men and 0.5% of women have some form of color vision deficiency. Designing only for full-color vision excludes them — using safe color pairs and not relying solely on color (using shape, text, or pattern too) makes your designs work for everyone.
Use it to test brand palettes, audit existing designs for accessibility issues, or learn which color pairs are problematic so you avoid them in future designs.
How to use this tool
How to get a CSS filter snippet for color-blindness simulation
Run with no input
This tool takes no input fields — just press Run. It returns a paste-ready CSS snippet that you can drop into a stylesheet (no other configuration).
What you get
Result is a single `css` field with three filter classes: `.cb-protanopia`, `.cb-deuteranopia`, `.cb-tritanopia`. Each uses a SVG `feColorMatrix` matrix that approximates one type of color-vision deficiency.
Using it
Add the relevant class to `body` (or a wrapper) to preview your design as roughly 8% of men with red-green color blindness, or a much smaller share with blue-yellow, would see it. Toggle the class from devtools — no rebuild needed.
Caveats
These are linear approximations; real color vision is more nuanced. Tools like Sim Daltonism (macOS) or Coblis use better models. Always pair this preview with WCAG contrast checks (use wcag-contrast-checker-online) — color shouldn't carry information alone.