Simulate how colors and interfaces look with different types of color vision deficiency (e.g. red-green, blue-yellow), so you can design for accessibility and readability.
This tool lets you enter colors or upload a screenshot, choose a simulation type (e.g. Deutan, Protan, Tritan), and view the result so you can adjust contrast or palette for better accessibility.
Enter one or more colors or upload a UI screenshot. For multiple colors, check how well they are distinguished in the simulation; for a screenshot, preview the whole page as it would appear.
Select the type to simulate: e.g. Deutan (green-weak), Protan (red-weak), Tritan (blue-weak). The tool converts colors accordingly and shows original vs. simulated side by side or toggled.
Based on the simulation, adjust the palette (e.g. increase contrast, avoid relying only on color to convey meaning) so that important content remains clear in the simulated view.
Tools typically use well-known color-blindness matrices (e.g. Brettel, Vienot); they approximate common deficiencies but individual variation exists—use as a design aid only.
Don’t rely on color alone; use shape, icons, or text too. Keep foreground/background contrast sufficient; for links and states, add underline or pattern in addition to color.
Often Deutan (green), Protan (red), Tritan (blue), and full achromatopsia (grayscale); check the tool’s options for the exact set.