1.
Common types of color vision deficiency
The most relevant types for UI are:
Deuteranopia / Deuteranomaly
- Reduced or missing green cones.
- Red and green tones become harder to distinguish.
- Many "red vs green" encodings collapse into similar browns/yellows.
Protanopia / Protanomaly
- Reduced or missing red cones.
- Red appears darker; red–green distinction is impaired.
- Bright reds can look muddy or almost black.
Tritanopia / Tritanomaly (rarer)
- Reduced or missing blue cones.
- Blue–yellow distinctions are affected.
Monochromacy (very rare)
- Little or no color perception; world appears mostly in tones of gray.
A practical note
- You don't need to specialise for every subtype individually. Focusing on robust, redundant cues helps across all of them.
2.
Core principle: never rely on color alone
If a piece of information is important, color should never be the only signal.
Risky patterns
- Form errors indicated only by turning the border red.
- Charts that distinguish series solely by color (especially red vs green).
- Status pills where "Active" is green and "Inactive" is red with identical shapes and icons.
Safer alternatives
- Combine color with text labels ("Error", "Success", "Warning").
- Add icons (✓, !, ✕) to reinforce meaning.
- Use underlines for links, patterns for chart series (solid vs dashed, filled vs outlined).
- Make sure the interface still makes sense in grayscale.
3.
Choosing safer palettes
When you do use color to encode information:
1. Avoid pure red/green oppositions for critical distinctions
- Many users can't reliably tell them apart.
- Prefer pairs like blue vs orange, purple vs yellow, teal vs magenta.
2. Use differences in lightness as well as hue
- Two distinct hues with similar lightness can be indistinguishable in some deficiencies.
- Ensure that categories differ in both hue and lightness.
3. Limit the number of color‑coded categories
- For categorical palettes, 6–8 clearly distinct colors is often the practical maximum.
- For more categories, add patterns, labels or grouping.
4. Keep semantic colors consistent
- If red means "error" and green means "success" in the UI, charts should follow the same semantics — with textual reinforcement.
4.
Stress‑testing your palette
Practical ways to test without specialised hardware:
1. Grayscale test
- View screenshots in grayscale (most OSs and design tools can simulate this).
- Check: can you still tell different states and categories apart?
2. Color‑blind simulators
- Many tools (Figma plugins, browser extensions, standalone apps) simulate deuteranopia, protanopia and tritanopia.
- Run key screens through them: forms with error states, dashboards with charts, status boards and tables.
3. Edge cases
- Check small elements: tiny badges, thin chart lines, icon‑only buttons.
- These suffer most when color perception is limited.
4. Contrast checks
- Color blindness often co‑exists with general low vision.
- Apply WCAG contrast rules between foreground/background in every simulated mode.
5.
Designing with color‑blind users in mind
Component patterns that help:
Form validation
- Error: red color + icon + helper text + possibly a different border style.
- Don't rely solely on red border vs gray border.
Alerts and banners
- Include explicit labels ("Error", "Warning", "Info") and icons.
- Use distinct icons and wording, not just different background colors.
Charts
- Use different line styles (solid, dashed, dotted) for series.
- Add direct labels near lines/bars instead of a legend far away.
- For fills, consider patterns or different opacities in addition to color.
Tables and status indicators
- Combine color with symbols or text: green dot + "Online", red dot + "Offline".
- Use checkmarks vs crosses, not only green vs red.
6.
Using ColorR to pick safer combinations
ColorR can support color‑blind‑safe design by:
- Showing lightness (L) and chroma for each color in Lab/OKLCH, so you can ensure enough lightness difference between categories and avoid pairs that are too close numerically and visually.
- Letting you compare multiple hues side by side from different systems (Tailwind, Material, Radix, Open Color, etc.) and choose sets that differ in both hue and lightness while still matching your brand.
The goal
- Combined with external simulators and contrast tools, ColorR's role is to make it easier to assemble and reason about palettes that stay legible and meaningful even when users don't see color the way you do.