Color blind safe palette fixer: simulate and auto-fix colors
The color blind safe palette fixer checks every pair of colors in your palette under eight color vision deficiency types, flags the pairs that become hard to tell apart, and adjusts the unlocked colors until they separate again. You get a corrected palette and code you can paste. 66Colorful offers it free, in your browser, with no signup.
The National Eye Institute reports that about 1 in 12 men and 1 in 200 women of Northern European descent have a color vision deficiency. A chart, badge set or UI theme that relies on hue alone can fail for those users. This tool finds those failures before you ship.
How to make a color blind safe palette in six steps
- Enter 2 to 10 colors in Palette colors. Type a HEX value, use the color picker, or choose Add color for another swatch.
- Click the lock icon on any brand-critical color. Locked colors are never changed by the fixer.
- Under Check these vision types, keep Protan, Deutan, Tritan and Achromatopsia ticked, or untick the families you do not need.
- Read the summary and the vision rows. Each row shows your palette as that vision type sees it, with a conflict count, and a Normal vision row is there for reference.
- Choose Auto-fix palette. The result table lists the original color, the fixed color and the change for each swatch.
- Choose Use fixed palette to load the result into your list (Undo reverses it), then copy the code.
Color blind friendly palette settings you can control
- Vision families: Protan, Deutan, Tritan and Achromatopsia. Each family covers its full form (-opia) and its partial form (-omaly), eight types in total.
- Anomalous severity: a slider from 10% to 90%, set to 60% by default. It applies to protanomaly, deuteranomaly, tritanomaly and achromatomaly.
- Conflict threshold: Conflict when closer than offers ΔE 6 (lenient), ΔE 10 (standard) and ΔE 15 (strict).
- Locks: keep exact brand colors fixed while the rest of the palette moves around them.
- Detail view: click a vision row to see each conflicting pair, its ΔE value and the two colors as they appear to that viewer.
- Sharing: Share link copies a URL that restores your palette and settings, and Reset restores the example palette.
How are color blindness conflicts detected with ΔE?
The tool simulates each color for a vision type, then measures the distance between every pair of simulated colors using CIEDE2000. If a pair is closer than your threshold, it counts as a conflict. A higher ΔE means the colors are easier to tell apart.
CIEDE2000 is a standard formula for perceptual color difference in the CIELAB space. Protan, deutan and tritan views use the Machado, Oliveira and Fernandes (2009) model, applied in linear RGB. Achromatopsia keeps only lightness, and achromatomaly is approximated as a partial blend toward gray.
Worked example: blue and violet under deuteranopia
The example palette includes #3B82F6 (blue) and #8B5CF6 (violet). To typical vision they are clearly different. Simulated for deuteranopia, they become roughly #007DF4 and #0078F3, a difference of only about ΔE 2, far below the standard ΔE 10 threshold.
Red #EF4444 and green #10B981 are the classic problem pair, yet in this palette they stay about ΔE 14 apart under deuteranopia because their lightness differs. Pairs that match in lightness are the ones that merge. Always check, rather than assume.
Which color vision types does the palette fixer check?
The fixer checks four families, each with a full and a partial form. The table shows what each family affects and which pairs tend to merge.
| Family | Cones affected | Pairs that often merge | Forms checked |
|---|---|---|---|
| Protan | Red (L) | Red and green, red and dark brown | Protanopia, protanomaly |
| Deutan | Green (M) | Red and green, blue and violet | Deuteranopia, deuteranomaly |
| Tritan | Blue (S) | Blue and green, yellow and pink | Tritanopia, tritanomaly |
| Achromatopsia | All cones | Any colors with similar lightness | Achromatopsia, achromatomaly |
Deuteranomaly is the most common type, at about 5% of men. Tritan types and achromatopsia are rare. Keep every family ticked unless you have a specific audience in mind, because the fixer only protects the families you check.
How does auto-fix keep a color blind friendly palette on brand?
Auto-fix makes the smallest changes it can find. It tries small shifts in lightness, chroma and hue on the unlocked colors, and prefers changes that remove conflicts while moving a color as little as possible. The colors you locked never move.
The Change column shows how far each color travelled as a ΔE from the original, or tags it as Locked or Unchanged. A small value means the color still looks like your brand. If the note says conflicts remain, try fewer colors, unlock a color, choose the lenient threshold, or untick achromatopsia. Lightness alone cannot separate every pair, so a strict threshold with many colors is sometimes impossible.
Export color blindness palette fixes as CSS or JSON
The export panel shows the fixed palette, or your current palette before you fix, in six formats. Switch tabs, then copy.
- HEX, RGB, HSL: one color per line, for design files or documentation.
- CSS: custom properties such as
--color-1inside:root. - SCSS: variables such as
$color-1. - JSON tokens: a color group with a
$typeand$valuefor each swatch, also available through Export JSON.
Copy palette and Copy CSS sit under the tool, and Open in builder sends the palette to the Color Safe Palette Builder for contrast checks.
Does fixing for color blindness also meet WCAG contrast?
No. Distinguishable colors and sufficient contrast are separate requirements. WCAG 2.2 asks for a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text and UI components, and a palette can pass the fixer while still failing those ratios.
WCAG 1.4.1 adds that color must not be the only way to convey information. The W3C explains this in Understanding Use of Color, and MDN's guide to use of color gives practical examples. Run text pairs through the contrast checker after fixing.
Color blind safe palette tips and common mistakes
- Vary lightness, not only hue. Two colors with different lightness stay apart under every vision type, including achromatopsia.
- Add a second cue. Use labels, icons, patterns or line styles in charts so meaning never depends on color alone.
- Lock sparingly. If two locked colors collide, the fixer cannot separate them. Lock the logo color and let the supporting colors move.
- Fewer colors work better. Eight categorical colors are hard to keep apart for any viewer. Merge or group categories where you can.
- Treat simulation as a guide. Real vision varies between people, so confirm the final design with real users where possible.
- Re-run after edits. Changing a color, a setting or the checked families clears an old result, so fix again.
To see a whole screen or image rather than swatches, use the Color Blindness Simulator. If you want to learn how your own vision compares, try the Color Blindness Test. For a full report on an existing palette, run the Palette Accessibility Audit.
What does it mean to daltonize a palette?
To daltonize a palette means to adjust its colors so people with a color vision deficiency can still separate them. The usual approach shifts lightness, saturation and hue, not just one of them.
This tool applies that idea to a short list of swatches and checks the result against your threshold. It does not recolor images or web pages. The fixer searches for the smallest adjustment that works, then reports exactly what remains if it cannot reach zero conflicts.
That honesty matters. A palette of ten saturated colors may have no perfect solution at a strict threshold, so the result note tells you how many conflicts were removed and how many are left. You then decide whether to drop a color, relax the threshold or accept a small trade-off.
Who uses a color blindness palette fixer?
Designers, front-end developers, data visualization authors and brand teams use a color blindness palette fixer whenever color carries meaning. Common cases include chart series, status badges (success, warning, error), map legends, game UI and category tags.
Developers can paste the CSS or JSON tokens straight into a theme. Designers can keep the brand anchor locked and let the rest adapt. When a palette is ready, build a full theme with the CSS Variable Theme Generator.