Most color blind design advice focuses on red-green (protanopia/deuteranopia). Tritanopia — blue-yellow color blindness — affects only ~0.01% of the population but requires different design strategies. If you only design for red-green CVD, you may still exclude tritanopic users.
What Is Tritanopia?
Tritanopia is a rare form of color vision deficiency caused by absent or dysfunctional S-cones (short-wavelength cones) in the retina. These cones are responsible for perceiving blue light. People with tritanopia have difficulty distinguishing:
Confused Color Pairs
- • Blue ↔ Green
- • Yellow ↔ Violet
- • Yellow ↔ Light gray
- • Blue ↔ Black (in dark contexts)
- • Orange ↔ Pink
Colors That Work
- • Red vs. Blue (high distinguishability)
- • Red vs. Cyan
- • Dark blue vs. Orange
- • White vs. Dark gray/Black
- • Magenta vs. Green
Tritanopia vs. Tritanomaly
Tritanopia is complete blue-yellow blindness (S-cones absent). Tritanomaly is partial (S-cones present but weak). Tritanomaly is more common and less severe. Both fall on the same spectrum, so designing for tritanopia automatically covers tritanomaly.
Unlike red-green CVD (which is X-linked and affects mostly men), tritanopia is autosomal — it affects men and women equally. It can also be acquired through aging, diabetes, glaucoma, or certain medications, making it increasingly relevant for products targeting older populations.
Design Rules for Tritanopia
1 Avoid Blue-Yellow as Contrasting Pairs
Blue and yellow can appear almost identical to tritanopes. Never use them as the only differentiator between elements (e.g., blue for "active" and yellow for "pending").
Instead: Use red vs. blue, or add text labels and icons alongside any color coding.
2 Use Lightness Differences, Not Hue Alone
Even when hues merge for tritanopes, brightness differences remain visible. Ensure your color pairs differ in lightness, not just hue.
❌ Same lightness
Medium blue (#4A90D9) vs. medium yellow (#D4C44A) — similar brightness, both appear gray-green
✅ Different lightness
Dark navy (#1A1A6B) vs. bright orange (#FF8C00) — large brightness gap, always distinguishable
3 Test with a Tritanopia Simulator
Most designers test for protanopia and deuteranopia but skip tritanopia. Always include tritanopia in your simulation checks.
Use our color blindness simulator — it supports all three types including tritanopia. Upload a screenshot of your design and check all three modes.
4 Be Careful with Semantic Colors
Blue for "info" and yellow for "warning" — a common UI pattern — can be problematic. Add icons: ℹ️ for info, ⚠️ for warning, ❌ for error.
Tritanopia-Safe Color Palette
This palette is optimized for all three CVD types including tritanopia:
Vermillion
#D55E00All CVD types
Blue
#0072B2All CVD types
Reddish Purple
#CC79A7All CVD types
Bluish Green
#009E73All CVD types
Black
#000000Universal
White
#FFFFFFUniversal
Orange
#E69F00Protan/Deutan
Sky Blue
#56B4E9Protan/Deutan
Note: Orange and Sky Blue from the Wong palette can be confused by tritanopes. When designing specifically for tritanopia, stick to the first 6 colors (Vermillion, Blue, Reddish Purple, Bluish Green, Black, White).
Real-World Impact
While congenital tritanopia is rare (~0.01%), acquired tritanomaly from aging, cataracts, diabetes, and medication is far more common. The aging lens naturally yellows, reducing blue sensitivity. By age 70, most people have some degree of blue-yellow confusion. Designing for tritanopia isn't just about a small population — it's about future-proofing your product for all aging users.
Frequently Asked Questions
How rare is tritanopia?
Congenital tritanopia affects roughly 1 in 10,000 people. However, acquired blue-yellow deficiency from aging or disease is much more common — most people over 70 have some degree of tritanomaly.
Can you design for all three CVD types at once?
Yes. The key is to never rely on color alone, use high contrast, and add text/icon/pattern redundancy. The Vermillion-Blue-Purple-Green palette works across all three types.
Does dark mode help tritanopic users?
It can. Dark backgrounds with light text provide strong luminance contrast, which tritanopes can still perceive. However, avoid using blue-tinted dark backgrounds (#1a1a2e) with yellow or orange text.
Is tritanopia tested in the Ishihara test?
No. The standard Ishihara test only screens for red-green deficiency. Tritanopia requires specialized tests like the Farnsworth D-15 or the Cambridge Colour Test.
Test Your Design for Tritanopia
Upload a screenshot of your design and simulate how it looks to people with tritanopia, protanopia, and deuteranopia.
Related Articles
Types of Color Blindness
Protanopia, deuteranopia, and tritanopia explained with visual simulations.
Read more
Color Blindness Friendly Chart Colors
Complete guide to choosing chart colors that work for everyone.
Read more
Accessible UI Design for Color Blindness
Design patterns that work for all vision types.
Read more
Color Blind Friendly PowerPoint
Make your presentation slides accessible for all viewers.
Read more