Enter a color to see how it appears to people with different types of color blindness.
#d44508
rgb(212, 69, 8)
hsl(17, 93%, 43%)
cmyk(0%, 67%, 96%, 17%)
hsb(17, 96%, 83%)
Harmonious colors that work well with your selected color:
These colors are distinguishable by most people with color vision deficiencies.
This color may be difficult to distinguish for people with color blindness when used with certain other colors.
See how this color appears to people with different types of color vision deficiencies:
Harmonious colors that work well with your selected color:
WCAG AA requires at least 4.5:1 for normal text.
Use these colors for better color blind accessibility.
Upload an image to see how it appears to people with different types of color blindness.
Upload an image to see analysis results.
Adjust the severity level to see how colors appear at different levels of color vision deficiency.
Generate color palettes that are distinguishable by people with all types of color blindness.
Color blindness affects approximately 1 in 12 men and 1 in 200 women worldwide. This tool helps designers and developers create more accessible content by simulating how colors appear to people with different types of color vision deficiencies:
Use this tool to ensure your designs are accessible to everyone, regardless of their color perception abilities.
The Color Test allows you to check how specific colors appear to people with different types of color blindness. Simply select a color using the color picker or enter a HEX code, then click "Simulate Color" to see how that color would appear to someone with protanopia, deuteranopia, or tritanopia. This is particularly useful when choosing brand colors, button colors, or any critical UI elements that need to be distinguishable by all users.
Our color blindness simulation uses advanced algorithms based on scientific research to provide a close approximation of how colors appear to people with different types of color vision deficiency. While no simulation can be 100% accurate (as individual experiences vary), our tool provides a reliable representation that helps designers and developers make informed decisions about color accessibility.
Yes! You can use the color pair testing feature to compare how different color combinations appear to color-blind users. This is especially useful for testing text and background color combinations, button colors against their surroundings, or any design elements that need to be clearly distinguishable from each other. Simply select your colors and see how they appear side by side in different color blindness simulations.
For maximum accessibility, avoid these problematic combinations: red and green (difficult for people with protanopia and deuteranopia); blue and purple (challenging for people with tritanopia); green and brown (often indistinguishable for people with deuteranopia); and any low-contrast combinations. Our Color Test helps you identify these issues by showing you exactly how your color choices appear to people with different types of color blindness.
When viewing the simulation results, look for colors that appear too similar or indistinguishable in any of the color blindness types. If your colors look nearly identical in any simulation, consider choosing alternatives with greater contrast or brightness differences. Pay special attention to how your colors appear in protanopia and deuteranopia simulations, as these are the most common forms of color blindness.
The Image Test lets you upload any image from your computer and instantly see how it would appear to people with various types of color vision deficiency. After uploading, the tool processes your image and displays simulated versions for each type of color blindness. This helps you identify potential issues with image content, infographics, charts, or photos that might be difficult for color-blind users to interpret correctly.
Our Image Test supports all common image formats including JPG, PNG, GIF, and SVG. For best results, use high-quality images with clear colors. There's a file size limit of 5MB to ensure optimal performance. If your image is larger, consider compressing it before uploading for faster processing and more accurate results.
Yes! You can enter your website URL to analyze its color scheme for accessibility issues. The tool will extract the dominant colors from your site, simulate how they appear to color-blind users, and provide specific recommendations for improving accessibility. This analysis helps identify potential contrast problems, indistinguishable UI elements, and other color-related issues that might affect user experience for people with color vision deficiencies.
When the Image Test reveals accessibility issues, consider these solutions: (1) Add patterns or textures to differentiate areas that appear similar in color; (2) Include text labels directly on charts or diagrams; (3) Increase contrast between important elements; (4) Use shapes or icons alongside color coding; and (5) Consider redesigning with a more accessible color palette. For complex visualizations like charts and graphs, always include alternative text descriptions.
No, we respect your privacy. All image processing happens directly in your browser, and we don't store or transmit your images to any server. This means your sensitive designs and content remain completely private. The tool performs all color blindness simulations using client-side JavaScript, ensuring your data never leaves your computer.
Unlike basic color blindness simulators, our Severity Simulator allows you to adjust the intensity of the color vision deficiency being simulated. Using the severity slider, you can see how colors appear across a spectrum from mild to complete color blindness. This is valuable because color blindness exists on a continuum—many people have partial color vision deficiency rather than complete absence of color perception. The simulator helps you understand the range of experiences users might have.
The severity slider lets you adjust the intensity of the color blindness simulation from 0% (normal vision) to 100% (complete color blindness of the selected type). Simply drag the slider to see how your selected color or image would appear at different severity levels. This helps you understand that color blindness isn't always an all-or-nothing condition—many people experience partial color vision deficiency that affects their perception to varying degrees.
For maximum accessibility, design with the 70-80% severity level in mind. This ensures your designs will be accessible to people with moderate to severe color vision deficiencies while still working well for those with milder forms. If your design remains clear and usable at higher severity levels, it will be accessible to virtually everyone, regardless of their color perception abilities.
Currently, the simulator focuses on one type of color blindness at a time for clarity and accuracy. To thoroughly test your designs, we recommend checking them against each type separately (protanopia, deuteranopia, and tritanopia) at various severity levels. This methodical approach ensures you catch all potential accessibility issues across the spectrum of color vision deficiencies.
Mild to moderate color vision deficiencies (20-60% on our scale) are more common than severe forms. Approximately 8% of men and 0.5% of women have some form of color blindness, with most experiencing partial rather than complete color vision deficiency. Deuteranomaly (a milder form of green-blindness) is the most common type, affecting about 5% of men. By testing your designs across multiple severity levels, you ensure accessibility for the broadest possible audience.
The Safe Palette Generator creates color combinations that remain distinguishable even for people with color blindness. Start by selecting a palette type (Analogous, Complementary, Triadic, Tetradic, or Monochromatic) and choose a base color. Click "Generate Palette" to create a color scheme, then view how it appears to people with different types of color blindness in the Simulation Preview section. If you're not satisfied with the results, click "Regenerate" for variations. When you find a palette you like, use the "Export" button to copy the colors in your preferred format (HEX, RGB, HSL, CSS, or SCSS).
The palette types offer different color relationships: Analogous uses colors adjacent on the color wheel for harmonious designs; Complementary pairs colors opposite each other for high contrast; Triadic uses three colors equally spaced around the color wheel for vibrant, balanced schemes; Tetradic uses four colors in a rectangular arrangement for rich, varied palettes; and Monochromatic uses variations of a single color with different brightness and saturation levels for subtle, cohesive designs.
The Simulation Preview shows how your generated palette appears to people with protanopia (red-blindness), deuteranopia (green-blindness), and tritanopia (blue-blindness). This instant feedback helps you verify that your color combinations remain distinguishable across all types of color vision deficiency. If colors appear too similar in any simulation, you can regenerate the palette or try a different palette type to find more accessible alternatives.
Choose your export format based on your project needs: HEX is universal and works in all design and development contexts; RGB is useful for screen-based designs and when you need to adjust opacity; HSL makes it easier to create systematic variations of colors; CSS Variables are perfect for web projects where you want to define colors once and reference them throughout your stylesheet; and SCSS Variables are ideal for projects using Sass preprocessors.
For optimal accessibility: (1) Use your darkest colors for text and important details; (2) Reserve your brightest colors for highlights and calls-to-action; (3) Apply mid-tone colors for backgrounds and larger areas; (4) Maintain sufficient contrast between adjacent elements (WCAG recommends at least 4.5:1 for normal text); (5) Don't rely solely on color to convey information—add icons, patterns, or labels; and (6) Test your implementation with actual users when possible, as real-world testing complements simulation.