Color Blindness Simulator

ProNew

Enter a palette, see it as people with protanopia, deuteranopia, tritanopia or no color vision would, and get a list of color pairs that become too similar to tell apart. Use this when charts, status colors or tags rely on color to carry meaning.

Customize

This item has no props to tune. Use the lens above to change theme, density, direction and more.

Guide and examples

When to use it

A set of colors encodes categories or states (charts, tags, traffic lights) and must still be distinguishable.

Do not use it when: Simulation is a check, not a fix: also add labels, patterns or icons so color is never the only cue.

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Description
`initial`	`string[]`	Starting colors.

simulate(rgba, vision), deltaE(a, b) and confusablePairs(colors, threshold?) are exported.

Accessibility

The simulations are labelled sections with the hex value of each simulated color as text, so the result is available without seeing it. Pairs that merge are listed as sentences ("#990000 and #669900 look alike with deuteranopia (no green)").
Invalid color text is named in the hint and sets aria-invalid. The simulator checks colors; the page should still never use color as the only signal.
The matrices are the Machado et al. (2009) models at full severity, applied in linear RGB; they approximate real vision and vary between people.

Testing

The pattern ships with a Testing Library test (color-blindness-simulator.test.tsx) that covers: its main behaviour, the keyboard path and the error or empty states.

Guide and examples

When to use it

A set of colors encodes categories or states (charts, tags, traffic lights) and must still be distinguishable.

Do not use it when: Simulation is a check, not a fix: also add labels, patterns or icons so color is never the only cue.

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Description
`initial`	`string[]`	Starting colors.

simulate(rgba, vision), deltaE(a, b) and confusablePairs(colors, threshold?) are exported.

Accessibility

The simulations are labelled sections with the hex value of each simulated color as text, so the result is available without seeing it. Pairs that merge are listed as sentences ("#990000 and #669900 look alike with deuteranopia (no green)").
Invalid color text is named in the hint and sets aria-invalid. The simulator checks colors; the page should still never use color as the only signal.
The matrices are the Machado et al. (2009) models at full severity, applied in linear RGB; they approximate real vision and vary between people.

Testing

The pattern ships with a Testing Library test (color-blindness-simulator.test.tsx) that covers: its main behaviour, the keyboard path and the error or empty states.