Color Vision Checker for Palettes
Check how colors hold up when color perception changes
Test one color or a complete palette across common color-vision simulations, pair separation and WCAG contrast. Simulations are approximations for design testing, not a medical diagnosis.
Vision simulations
Every row shows the same palette under a different approximation.
Potential color collisions
Qolorio compares colors in OKLab, a model designed around perceived color differences, after each simulation. These thresholds are design hints: use labels, icons, shape or position when color carries meaning. About OKLab
Contrast matrix
WCAG contrast is calculated from the original sRGB colors. It is separate from color-vision simulation.
What does the Color Vision Checker do?
See where a palette may lose distinction.
Colors that look clearly different to one person may become harder to tell apart when color perception changes.
Enter between 1 and 20 colors as HEX, RGB, HSL or CSS color names and Qolorio shows the same palette across several color-vision simulations.
These include grayscale, protanopia, protanomaly, deuteranopia, deuteranomaly, tritanopia and tritanomaly.
The original colors stay visible too, so you can compare each simulation with the palette you started with.
Same palette. Different ways of seeing it.
Color-vision simulations are approximations for design testing. They are not a medical test, diagnosis or exact representation of what every individual sees.
Look for colors that become too similar
A palette can contain colors that feel comfortably separated under normal viewing conditions but become much harder to distinguish in another simulation.
Qolorio compares every pair of colors and looks for the combinations with the lowest separation.
The comparison uses OKLab color distance after each simulation to help identify potential color collisions.
A warning does not automatically mean a color combination is unusable, and a good score does not guarantee accessibility.
Treat the result as a design signal.
A collision warning tells you where to look closer.
If two colors carry different meanings – for example success and error, active and inactive, or two categories in a chart – make sure the difference does not depend on hue alone.
Check contrast separately
Color separation and color contrast are not the same thing.
The Contrast Matrix compares the original palette colors with each other using WCAG contrast ratios.
This helps you find pairs that may work for text, larger text, interface elements or other foreground-and-background relationships.
The color-vision simulations do not change these contrast calculations. Qolorio calculates contrast from the original sRGB colors.
For a more focused foreground and background test, use the Qolorio Color Contrast Checker.
Open the Color Contrast Checker
Do not rely on color alone
Color is useful for showing status, grouping information and creating hierarchy, but important meaning should remain understandable when the color difference becomes difficult to see.
Combine color with other signals such as text, icons, labels, shapes, patterns, borders or position.
A green success message and a red error message become much more robust when they also say Success and Error.
Color can support the message. It should not be the whole message.
When is a color vision check useful?
Use the Color Vision Checker when you are designing:
- interface states and status colors;
- charts, graphs and data visualizations;
- dashboards and maps;
- buttons, links and navigation;
- brand and campaign palettes;
- games and illustrations;
- any palette in which different colors carry different meanings.
You do not need to remove color or make every color dramatically different.
The goal is to understand where color is doing important work – and make sure the design still communicates when that color difference becomes less obvious.
Take the palette into context
A simulation can reveal a potential problem, but context decides whether it matters.
Check the actual text, controls, graphics and states where the colors will be used. Add semantic roles, preview the palette in realistic layouts and test the relationships that matter before treating it as finished.
When you are ready, continue in Color Studio.