Delta Palette
Next.js
React
Typescript
Tailwind CSS
Oklab
color-blind simulation
Culori
My mom has deuteranopia (form of color vision deficiency), and on our trips she'd always squint at transit maps, unable to tell the lines apart. That is because she has difficulty distinguishing between red and green colors.
Hence, the goal of this project was to create a color blind-focused accessibility tool that generates clearer, more inclusive color palettes.
How I see it
How she sees it
Then I realized: if I could generate palettes optimized for both normal vision and deuteranopia, I could try to make maps more usable.
When I set out to built this generator, I knew I had to figure out 3 things:
- A color space where numbers match perception → Oklab
- A simulation of color vision deficiency (CVD) → Culori for color conversions, color-blind to simulate CVD
- An optimization that keeps colors “far apart” → Maximin Optimization
Experiment with my friend with partial red-green color blindness: