Color blindness, or color deficiency, is a condition where individuals struggle to distinguish between certain colors. It occurs when there is a problem with the pigments in the eye's cones.
Approximately 10% of men but only 1% of women have some form of color vision deficiency, including color blindness and other conditions that affect color perception.
Color blindness can vary in degrees of severity. Individuals with mild color deficiencies may see colors as usual in good light but struggle in dim lighting. In contrast, those with more severe color blindness cannot distinguish certain colors in any lighting conditions. Although it’s uncommon, some people experience complete color blindness, which means they see everything in shades of gray. Color blindness is a condition that usually affects both eyes equally, and the severity of the condition does not typically change over time.
Color blindness is a spectrum of conditions, each with its own unique characteristics. The most common forms of color blindness are:
Deuteranopia: Also known as red-green color blindness. People with deuteranopia have difficulty distinguishing between shades of green and red and may see these colors as brown or gray. People with red-green color blindness couldn't see the number 5 in the image below.
Ishihara color blindness test showing the numeral 5.
Protanopia: This type of color blindness also affects the ability to distinguish between red and green colors, but in this case, people have difficulty seeing the color red.
Tritanopia: Unlike deuteranopia and protanopia, tritanopia affects the ability to distinguish between blue and yellow colors. People with tritanopia may see blue colors as greenish-yellow or pink.
Here is an example of what color blindness might look like:
© Wikimedia Commons (CC BY-SA 3.0), Fair Use
It's important to note that not all color-blind individuals experience the same symptoms or degree of severity. Some may only have mild difficulties, while others experience more severe symptoms that can impact their daily lives.
Color blindness can have a significant impact on daily life activities. For instance, color-blind individuals may have difficulty performing tasks that require color differentiation, such as cooking or driving. They may also need help with specific jobs that require the ability to distinguish between colors, such as electricians or graphic designers.
Individuals with color vision deficiency can use assistive technology like color filters and screen readers to help them navigate digital interfaces more easily. Additionally, some organizations provide training programs and resources for individuals with visual deficiencies to help them develop strategies to manage their condition in the workplace and other settings.
To help make their designs accessible to people with color blindness, designers can take various steps:
Use high-contrast colors: High-contrast colors help people with color blindness to distinguish between different elements on a web page or app. Using colors with a high-contrast ratio can also improve readability.
© Interaction Design Foundation, CC BY-SA 4.0
Don't rely solely on color to convey important information: Avoid using color as the only way to communicate important information, such as error messages or notifications.
© Interaction Design Foundation, CC BY-SA 4.0
Choose color combinations carefully: Some color combinations are more difficult for people with color blindness to distinguish than others. For example, red and green are often indistinguishable for individuals with red-green color blindness.
© Interaction Design Foundation, CC BY-SA 4.0
Use texture, pattern, or shape to differentiate between elements: Besides high-contrast colors, you can use textures, patterns, or shapes to differentiate between elements on a web page or app.
Test designs with color blindness simulation tools: Use tools that simulate different types of color blindness to ensure they are accessible to as many people as possible.
© Interaction Design Foundation, CC BY-SA 4.0
Take our courses on HCI: Perception and Memory and The Ultimate Guide to Visual Perception and Design
Discover more about color blindness, its causes and symptoms.
In UX (user experience) design, you should consider three main types of color blindness: protanopia, deuteranopia, and tritanopia. Protanopia and deuteranopia affect red and green perception (the most common forms) and impact about 8% of men and 0.5% of women globally. Tritanopia affects blue and yellow perception and is much rarer.
Designers should avoid relying on color alone to convey meaning. For example, don’t use red and green to show errors and success without also including icons or labels. Use patterns, text, or shape differences to support users who can’t distinguish certain colors.
Test your designs with tools like Color Oracle or the color blindness simulator in Stark (a Figma and Sketch plugin). These tools help ensure your palette works for everyone.
By considering color blindness from the start, you make your design more inclusive and usable for millions of people worldwide.
See why color blindness presents a design challenge and how to overcome it for your product’s users, in this video:
About 300 million people worldwide live with some form of color blindness. That’s roughly 1 in 12 men and 1 in 200 women. The most common types are red-green color blindness—protanopia and deuteranopia—which together affect over 95% of those with color vision deficiency.
This means that every product designer or UX professional will likely design for users with color blindness at some point; it’s only a matter of time. If your design relies only on color to show meaning—like red for errors or green for success—millions of users might miss that message entirely.
Designing with this in mind isn’t just about accessibility; it improves usability and comprehension for everyone. Simple fixes, like using text labels and high-contrast visuals, can make your work more inclusive and user-friendly from the start.
Discover why accessibility, which includes catering to color blind users, is a vital design consideration:
To design accessible color schemes for color blind users, choose color combinations that stay clear even for people who can’t distinguish red, green, or blue hues. Don’t pair red with green, or blue with purple, as these combos often appear similar to users with color blindness.
Use tools like Coblis or Stark’s simulator to test your palette through different types of color vision disability. Rather than relying on color alone, pair it with icons, textures, or text labels. For example, don’t just show error states in red—add a clear icon or message.
Stick to high-contrast combinations and test readability on both light and dark backgrounds. Blue and orange or black and yellow are often safe bets. By building color schemes with these principles in mind, you ensure that your designs stay readable, clear, and inclusive for everyone.
Explore the realm of readability to make sure your brand messages can get through to users.
To help color blind users, use strong contrast between text and background, and between elements that need to stand out. Color blindness often reduces the ability to distinguish between hues, but contrast in brightness (light versus dark) remains easier to detect.
Stick to a contrast ratio of at least 4.5:1 for regular text and 3:1 for large text, as the Web Content Accessibility Guidelines recommend. Use contrast checkers like WebAIM or Stark to test your design before launch.
Don’t rely on color alone, combine it with clear shapes, icons, labels, or patterns. For example, instead of just coloring error messages red, include a warning icon or bold label.
Design with both hue and contrast in mind. This dual strategy ensures your interfaces remain usable and understandable, even for users with limited color perception.
Enjoy our Master Class How to Use Color Theory to Enhance Your Designs with Joann Eckstut—Color Consultant, Founder of The Roomworks, and 1 of the 12 designers chosen by the Color Association of the USA to create the yearly forecast used by industries to keep up with color trends—and Arielle Eckstut: Author, Agent-at-large at the Levine Greenberg Rostan Literary Agency, and Co-Founder of The Book Doctors and LittleMissMatched.
To design forms that work for color blind users, don’t rely on color alone to show required fields or errors. Use clear labels like “*Required” and include error messages with icons or bold text. Put instructions and messages close to the relevant form field so users don’t miss them.
Make sure there’s strong contrast between text, borders, and background—especially for input fields, labels, and buttons. Use at least a 4.5:1 contrast ratio for text and a 3:1 ratio for larger UI elements.
Add visual feedback beyond color, like shaking an input box or showing a warning icon when something’s wrong. Also, make sure focus states are clearly visible for keyboard navigation.
By combining color with text, icons, and layout cues, you create forms that are clear, accessible, and usable for everyone—including users with color blindness.
Explore how to give your users effective and thoughtful forms in this article, How to Design UI Forms in 2025: Your Best Guide.
In UX design, visual indicators like icons, text labels, shapes, and patterns work better than color alone. These cues help users with color blindness, low vision, or any visual processing challenges understand what’s happening on the screen.
For example, add a warning icon or a bold “Error” label instead of just red to show an error. Underlines, bold fonts, or border styles can signal links or active elements more clearly than color alone. You can also use shapes—like circles vs. squares—or textures, such as stripes or dots, to show differences in charts or alerts.
Hover states, focus outlines, and animations also help users notice changes or actions. By combining multiple visual signals, you create interfaces that are clearer, more inclusive, and easier to use for everyone, whatever their color perception is like.
Find out more about visual design and how stand-out design elements help users achieve their goals.
To test your design for color blindness accessibility, use both simulation tools and design best practices. Start by using color blindness simulators like Coblis, Color Oracle, or the Stark plugin for Figma and Sketch. These tools show how your design looks to users with different types of color vision deficiency.
Next, check contrast levels using a tool like WebAIM’s Contrast Checker to ensure text and UI elements meet WCAG contrast ratios—4.5:1 for normal text and 3:1 for large text.
Also, ask real users or accessibility experts for feedback if possible. Don’t rely only on automated tools—they might not be able to catch everything.
Last, but not least, review how you’ve used icons, labels, and patterns alongside color. By testing with both tools and people, you can ensure your design remains clear, readable, and functional for color blind users.
Keep your users’ interests in focus: discover plenty of insights in our article Vision and Visual Perception Challenges.
WCAG doesn't have a separate success criterion exclusively for color blindness, but it specifically mentions and addresses color blindness within its existing color and contrast requirements. The most relevant rule is don’t rely on color alone to convey information (WCAG 2.x Success Criterion 1.4.1: “Use of Color”). This means you should always add a secondary cue alongside color, like text, icons, or shapes.
Another key rule is to meet minimum contrast ratios. For normal text, WCAG 2.x (level AA) requires a contrast of at least 4.5:1 between text and background (1.4.3). For large text, it’s 3:1. This helps users who can’t distinguish certain colors still read the content clearly.
Also, ensure all interface elements like buttons and links are clearly distinguishable without relying just on hue.
By following WCAG—including all the latest guidelines for users with vision disabilities and other disabilities—you’ll create designs that are more accessible, not just for color blind users but for everyone who interacts with your product.
Do right by your users and follow WCAG to ensure your designs can reach everyone, whatever their ability level.
Common UX mistakes that exclude color blind users include using color alone to show meaning, like red for errors or green for success, without any supporting icon or label. Without a secondary cue, users with color blindness may miss critical information.
Another mistake is poor contrast between text and background, especially when designers choose similar hues like red on green or blue on purple. These combinations are hard for many users to distinguish.
Designers also often forget to test color palettes with color blindness simulators, or they assume high contrast always equals accessibility—when it doesn’t if hues are too close.
Neglecting focus states or hover indicators on buttons and links also creates confusion. To include users with color vision disabilities, always combine color with clear text, shapes, or icons, and test how your UI appears to users with all types of color vision.
Find additional insights and tips in our article Use Color to Prevent Confusion and Help Your Users.
Basak, A., & Roy, S. T. (2022). Visual ergonomics for colourblindness: Applying universal design principles in graphical user interface to provide affordance to the colourblind users. Proceedings of the Design Society: DESIGN Conference, 2, 2055–2066.
This study investigates the challenges faced by colorblind users when interacting with graphical user interfaces (GUIs), focusing on the iconography of the Microsoft Windows operating system. The authors aim to develop an inclusive icon design solution that is visually ergonomic for colorblind users, thereby integrating them as mainstream users in computer interfaces. By applying universal design principles, the research emphasizes the importance of designing GUIs that are accessible to users with color vision deficiencies. The paper contributes to the field of inclusive design by highlighting the necessity of considering colorblind users in the development of user interfaces.
Jamil, A., & Denes, G. (2024). Investigating color-blind user-interface accessibility via simulated interfaces. Computers, 13(2), 53.
This study presents a novel approach to evaluating user interface (UI) accessibility for individuals with color vision deficiency (CVD). Recognizing the challenges in recruiting participants with CVD, the authors employed physiologically-based CVD simulations, allowing non-CVD participants to assess the aesthetics and functionality of 20 popular websites under simulated CVD conditions. The findings indicate a positive correlation between perceived aesthetics and functionality, with high-contrast modes potentially diminishing both. The research offers a practical methodology for designers to assess and improve UI accessibility for users with CVD.
Iqbal, M. W., Ahmad, N., Shahzad, S. K., Naqvi, M. R., & Feroz, I. (2018). Usability aspects of adaptive mobile interfaces for colour-blind and vision deficient users. International Journal of Computer Science and Network Security, 18(10), 179–187.
This study explores the effectiveness of adaptive mobile interfaces tailored for users with colour vision deficiencies (CVD). The researchers developed an application that employs the Ishihara test to detect types of colour-blindness, subsequently adjusting the user interface to accommodate specific visual needs. Through experiments involving 30 participants, the study assessed usability metrics—effectiveness, efficiency, and satisfaction—comparing adaptive and non-adaptive environments. Results indicated significant improvements in user performance and satisfaction within adaptive settings, particularly for individuals with Protanopia and Tritanopia. This research underscores the importance of adaptive design in enhancing accessibility, offering valuable insights for developers aiming to create inclusive mobile applications for users with visual impairments.
Coady, G. (2018). Color Accessibility Workflows. A Book Apart
Geri Coady's book offers a practical guide for designers to create color-accessible digital products. It emphasizes the importance of considering various types of color vision deficiencies and provides actionable workflows to ensure inclusivity. The book is known for its clear explanations and real-world examples, making it a valuable resource for UX professionals aiming to enhance accessibility.
Gilbert, R. M. (2019). Inclusive Design for a Digital World: Designing with Accessibility in Mind. Apress.
Regine M. Gilbert's Inclusive Design for a Digital World offers a comprehensive guide to creating digital products that are accessible to all users, including those with disabilities. The book delves into the principles of inclusive design, emphasizing the importance of considering diverse user needs from the outset. Gilbert covers topics such as the Web Content Accessibility Guidelines (WCAG) 2.1, assistive technologies, and best practices for web development. Through practical strategies and real-world examples, the book illustrates how inclusive design not only benefits users with disabilities but also enhances the overall user experience. This work is a valuable resource for designers, developers, and anyone involved in creating digital content, highlighting the ethical and practical imperatives of accessibility in today’s digital landscape.
Remember, the more you learn about design, the more you make yourself valuable.
Improve your UX / UI Design skills and grow your career! Join IxDF now!
You earned your gift with a perfect score! Let us send it to you.
We've emailed your gift to name@email.com.
Improve your UX / UI Design skills and grow your career! Join IxDF now!
Here's the entire UX literature on Color Blindness by the Interaction Design Foundation, collated in one place:
We believe in Open Access and the democratization of knowledge. Unfortunately, world-class educational materials such as this page are normally hidden behind paywalls or in expensive textbooks.
If you want this to change, , link to us, or join us to help us democratize design knowledge!
