Color Blind Safe Palette Generator
Generate accessible color palettes safe for colorblind users. Test colors against protanopia, deuteranopia, and tritanopia with WCAG contrast checking and inter-color collision detection.
Configuration
0 = normal vision ยท 100 = full dichromacy. Most colour-vision deficiencies are partial.
Accessibility
Contrast ratios are computed against the chosen background.
Focus Vision Type
Each swatch always shows all four below as a referencePalette
Safety Summary(ฮE76 < 10)
Greyscale collisions(relevant for B&W printing or achromatopsia, ~1 in 30,000)
- #2vs#3ฮE = 1.5
Many CVD-safe palettes (including Wong) collapse in greyscale by design โ they prioritise hue separation, not lightness separation.
Preview in context
Show โพ
Categorical bar chart
Buttons
Text on background
WCAG Guidelines
โข AAA: Contrast โฅ 7:1 (best accessibility)
โข AA: Contrast โฅ 4.5:1 (standard compliance)
โข Large Text: Contrast โฅ 3:1 (18pt+ or 14pt+ bold)
โข ฮE76: A perceptual difference metric โ values below ~10 mean two colours are hard to tell apart for most viewers.
About Color Blind Safe Palette Generator
The Color Blind Safe Palette Generator builds and verifies categorical colour palettes that remain distinguishable for users with the four common colour-vision deficiencies โ protanopia, deuteranopia, tritanopia, and achromatopsia. It pairs every palette with a WCAG-compliant contrast check against any background and a perceptual ฮE76 collision check that flags pairs of colours that look the same under a given simulation. Paste an existing palette, pick a curated preset (Wong, Tol Bright, Viridis, IBM, Colorbrewer), or build one from scratch โ every change runs entirely in the browser.
Why use a Color Blind Safe Palette Generator?
Approximately 8% of men and 0.5% of women have some form of colour-vision deficiency. Picking palette colours by eye routinely produces categorical schemes where two adjacent series collapse to indistinguishable shades for those users โ a silent accessibility failure that breaks dashboards, charts, and status indicators. This tool makes the failure visible: you see every colour rendered under each simulation, you see WCAG contrast against your background, and you get an explicit warning when two palette entries fall below the perceptual-difference threshold. The result is palettes you can defend in a design review, an accessibility audit, or a public-sector procurement spec.
Who is it for?
Built for UX/UI designers picking colours for design systems, data-visualisation engineers selecting categorical schemes for charts and dashboards, accessibility specialists running WCAG audits, government and public-sector teams meeting Section 508 / EN 301 549 obligations, data journalists working with categorical encodings, and educators teaching inclusive design. The Custom palette mode and Tailwind/CSS exports also make it useful for engineers porting an existing palette into a token-based design system.
How to use the tool
Pick a curated preset from the dropdown (Wong, Tol Bright, Viridis, IBM, Colorbrewer Safe) โ each is a research-backed palette known to remain distinguishable across vision types
Or paste your own hex codes (comma-, space-, or newline-separated) into the Paste Palette field at the top and click Load Palette
Set the Background colour you'll be designing against โ contrast ratios are computed against this colour
Use Focus Vision Type to make the large swatches show one specific simulation; the small four-up row under each colour always shows all four for reference
Adjust Severity to 0โ100% to model partial colour-vision deficiency (most real users are anomalous trichromats โ somewhere in between)
Read the Colour Collisions panel โ any pair flagged below ฮE76 = 10 may be hard to tell apart for that vision type
Edit individual colours by typing/pasting into each card's hex field, or by clicking the small swatch to open the OS picker
Export the validated palette as CSS variables, a Tailwind config snippet, an SCSS map, full JSON (with simulations + collisions + accessibility info), or a shareable PNG
Click Share to copy a URL that encodes the palette, background, and simulation โ anyone opening it sees the same setup
Key Features
Curated, research-backed presets
Bundled palettes include Wong (Nature Methods 2011), Tol Bright, Viridis, IBM Design Library, Colorbrewer Safe, and a High Contrast monochrome โ all chosen because they're known to remain distinguishable for the major colour-vision deficiencies.
Side-by-side simulation for every colour
Each palette card shows a four-up row of the colour as seen under Protanopia, Deuteranopia, Tritanopia, and Monochrome โ no need to flip modes to spot a collapse.
Inter-colour collision detection (ฮE76)
The tool computes pairwise CIE76 perceptual distance between all palette colours under each simulated vision type and surfaces any pair that falls below the 'distinguishable' threshold.
WCAG AA / AAA contrast checking
Each colour gets a contrast ratio and a WCAG grade against the chosen background, with a live count of AAA / AA / Fail across the palette.
Severity slider
Most colour-vision deficiencies are partial (anomalous trichromacy), not full dichromacy. The 0โ100% slider linearly interpolates between normal vision and the full simulation matrix, modelling that spectrum.
Multi-format export
Download as CSS variables (--color-1, --color-2, โฆ), a Tailwind config snippet, an SCSS map, full JSON with simulations and collisions, or a PNG of the swatches for sharing in docs or chat.
Shareable URL
The palette, background, simulation, and severity are all encoded in the URL hash โ copy the link and a teammate sees the exact same setup, no account or backend needed.
100% client-side
Every calculation runs in your browser. No palette ever leaves the device โ verifiable in DevTools (zero network requests).
Common Use Cases
Categorical chart palette for a dashboard
Scenario: You're picking the colour scheme for a 5โ7 series line or bar chart in an analytics dashboard, and you need to be sure no two series collapse for a colour-blind user.
โ Load Wong or Tol Bright, switch the background to your dashboard surface colour, scan the Collisions panel โ green-tick palette in under a minute, with a JSON export ready to paste into your charting library.
Design-system token selection
Scenario: You're standing up a design-system colour ramp and need each token to be both WCAG-AA compliant against your surfaces and visually distinct under all CVD types.
โ Paste your candidate token list, see the WCAG grade and ฮE collisions inline, then export directly as Tailwind config or CSS variables to drop into your codebase.
Government / public-sector accessibility audit
Scenario: An accessibility audit (Section 508, EN 301 549, WCAG 2.1) is reviewing a public-facing chart, and you need defensible evidence that the chosen colours meet the requirements.
โ Run the palette through the tool, capture the JSON export (which records contrast ratios, WCAG levels, simulated colours, and collisions), and attach it to the audit report.
Data journalism / scientific visualisation
Scenario: You're publishing a Reuters- or NYT-style chart for a general audience, including users with colour-vision deficiencies, and need a categorical palette that holds up under print, mobile, and assistive simulations.
โ Viridis and Tol Bright are both available as one-click presets; the PNG export gives you a swatch sheet for the design brief.
Educational material for inclusive design
Scenario: You're teaching a design or web-development class and want students to see in real time how colour choices change under different vision deficiencies.
โ The severity slider and side-by-side simulation row make the demonstration immediate and tangible โ drag the slider while showing a paste-in palette and the collisions appear/disappear live.
Frequently Asked Questions
What's the difference between protanopia, deuteranopia, and tritanopia?
Protanopia is the absence of long-wavelength (red) cones, deuteranopia the absence of medium-wavelength (green) cones, and tritanopia the absence of short-wavelength (blue) cones. Protan and deutan together (red-green colour blindness) are by far the most common โ affecting about 1 in 12 men. Tritan is much rarer (~1 in 10,000). The tool simulates all three plus monochrome (achromatopsia), so you can verify your palette across the practical range.
Are the preset palettes always WCAG-AA compliant?
No โ the presets are colour-blind-safe (the colours are distinguishable from each other under CVD simulations), but WCAG contrast is always relative to a background. The same palette will be AA against white and Fail against a mid-grey. Use the Background field plus the AAA/AA/Fail counts to verify against your specific design context.
What does the 'Colour Collisions' panel mean?
For every pair of palette colours, the tool computes the CIE76 ฮE (perceptual distance) between the two colours as seen under each simulated vision type. Pairs with ฮE below 10 are flagged because that's the commonly cited threshold below which most viewers can't reliably tell two colours apart. A flagged pair under, say, Deuteranopia means: a viewer with deuteranopia would likely confuse those two series.
What is ฮE?
ฮE (Delta-E) is a measure of perceptual colour difference, computed in the CIE Lab colour space rather than RGB. ฮE76 (the formula this tool uses) treats the difference as a Euclidean distance in Lab. Lower means more similar; ฮE < 1 is generally imperceptible to humans, < 2 is barely visible, and < 10 is hard to tell apart at a glance โ which is why it's the right metric for 'will my chart series collide?'.
Why is the severity slider useful?
Most colour-vision deficiencies are 'anomalous trichromacy' โ the relevant cone is shifted in sensitivity rather than absent entirely. People with full dichromacy (fully missing a cone) are a smaller subset. The severity slider linearly interpolates between normal vision and full dichromacy, letting you see your palette at intermediate severities. A palette that holds up at 60โ70% severity is generally safer than one that only barely passes at 100%.
Does this tool send my palette anywhere?
No. Every operation โ simulation matrices, contrast calculations, ฮE collisions, exports โ runs in your browser. There's no API call, no analytics event with palette data, no upload. The Share button copies a URL that encodes the state in the hash fragment, which by web standards never leaves the browser. You can verify in your browser's DevTools network tab โ using the tool produces zero requests.
Can I use this for monochrome (greyscale) printing?
Yes โ the Monochrome simulation is exactly that: each colour mapped to its luminance-equivalent grey. If two of your palette colours collapse under Monochrome, they'll be indistinguishable in a black-and-white print or a greyscale screenshot. Many palettes that are CVD-safe nevertheless fail monochrome โ Tol Bright is a notable exception, designed to remain distinguishable in greyscale too.
Why are the simulated colours different from another tool's results?
Different simulators use different matrix sets โ Brettel/Vienot 1999, Machado 2009, Vischeck, etc. โ and the values can vary noticeably for edge-of-gamut colours. This tool uses the widely cited Brettel/Vienot 1999 matrices for protan/deutan/tritan and a luminance-weighted greyscale (BT.601 coefficients) for monochrome. The qualitative outcome โ which palettes collide and which don't โ is consistent across simulators; the exact rendered hex codes will differ slightly.
Technical Specifications
Supported Formats
- โSimulation matrices: Brettel/Vienot 1999 for protanopia, deuteranopia, tritanopia; BT.601 luminance for monochrome
- โContrast formula: WCAG 2.1 relative-luminance contrast ratio
- โPerceptual distance: CIE76 ฮE in CIELAB colour space (D65 illuminant)
- โSeverity model: linear interpolation between identity and dichromatic matrix
- โCurated presets: Wong, Tol Bright, Viridis, IBM Design, Colorbrewer Safe, Blue & Orange, High Contrast
- โInput formats: 6-digit hex (#rrggbb), 3-digit hex (#rgb), with or without leading #, comma/space/newline separated
- โExport formats: CSS variables, Tailwind config (CommonJS), SCSS map, JSON, PNG
- โURL hash sharing: c (colours), bg (background), sim (focus simulation), sev (severity)
Limits & Performance
- โขFile Size: Up to 8 colours per palette (any more becomes hard to distinguish even for full-vision viewers)
- โขValidations: Hex validated and normalised on entry; malformed input is silently rejected to avoid breaking computations
- โขResponse Time: Synchronous, in-browser โ palette + simulations + collisions recompute in <5 ms
- โขBrowsers: All modern browsers (Chrome, Firefox, Safari, Edge); works offline once loaded
Pro Tips
- Always set the Background to your actual surface colour before reading WCAG grades โ same palette can be AA on white and Fail on a card-grey.
- If you pick from a preset and edit any colour, the dropdown will show 'Custom' โ that's expected; click any preset to reload it from scratch.
- When designing for monochrome printing or low-light dashboards, prefer Tol Bright or Wong โ they're explicitly engineered to remain distinguishable in greyscale.
- For sequential data (heatmaps, choropleths), Viridis is the standard choice โ perceptually uniform and CVD-safe by construction.
- If you're hitting the 8-colour limit, that's usually a sign the chart should be reworked rather than the palette stretched โ even non-CVD viewers struggle to differentiate 9+ categorical series.
- Avoid red+green together for status indicators (success/error). Use blue+orange (Wong) or blue+red (IBM) instead โ both maintain semantic clarity for protan/deutan viewers.
- Lean on shape, pattern, and typography in addition to colour. Colour-blind safety is a strong second line of defence, but redundant encoding is the first.
- When a draw or visualisation matters publicly, copy the Share URL and include it in your design-system docs or PR description so reviewers see exactly what you saw.
Share This Tool
Found this tool helpful? Share it with others who might benefit from it!
๐ก Help others discover useful tools! Sharing helps us keep these tools free and accessible to everyone.