17 Apr 2026
|15 min
Color blind-friendly palette
Learn how to create a color-blind friendly palette with practical tips, color combinations, accessibility standards (WCAG), and tools to ensure inclusive design.
A color-blind friendly palette isn't just a nice-to-have. It's a fundamental part of creating designs that actually work for everyone. When we build interfaces, data visualizations, or marketing materials without considering color blindness, we risk excluding a significant portion of our audience from understanding and using what we've created.
Color blindness affects 4.5% of people, according to Colour Blind Awareness. If men make up the majority of your audience, this rises to 8%. That's potentially millions of users who might struggle to distinguish between your error states and success messages, or who can't interpret your carefully crafted charts and graphs.
The good news? Building accessible color palettes doesn't mean sacrificing aesthetics. It means designing smarter.
In this guide, we'll walk through everything you need to know about creating color-blind friendly palettes: the types of color blindness you're designing for, the principles that make palettes accessible, step-by-step guidance for building your own, and tools to test your work.
Whether you're a solo designer running your first accessibility audit or a design lead establishing system-wide standards, you'll find practical, actionable advice you can apply immediately.
Key takeaways
Color blindness affects up to 8% of male users, making accessible color choices essential for inclusive design.
The most common issue is red-green color blindness, so avoid relying on these colors alone to convey meaning.
WCAG guidelines require minimum contrast ratios of 4.5:1 for normal text and 3:1 for large text.
Always use multiple cues (icons, patterns, labels) alongside color to communicate information.
Test your palettes with simulators and real users to validate accessibility before launch. Tools like Lyssna make it easy to recruit diverse participants for this testing.
What does color blindness mean in design?
Color blindness, or color vision deficiency, refers to a reduced ability to distinguish between certain colors. Most people with color blindness can see colors, just differently than those with typical color vision.
For designers, understanding the major types of color blindness helps us anticipate which color combinations will cause problems:
Deuteranopia and deuteranomaly (green-blind and green-weak) are the most common forms, affecting how people perceive green light. Red and green can appear similar, and greens may look more beige or brown.
Protanopia and protanomaly (red-blind and red-weak) affect red light perception. Reds appear darker and can be confused with greens, browns, and blacks.
Tritanopia and tritanomaly (blue-blind and blue-weak) are rarer, affecting blue-yellow perception. Blues may appear greenish, and yellows can look pink or light gray.
Why does this matter for usability? When we use color as the only way to communicate information, like red for errors and green for success, we're creating barriers.
A user with deuteranopia might not notice that a form field has turned red to indicate an error. They might miss that a status indicator has changed from green to red. These aren't minor inconveniences; they're fundamental usability failures that can prevent people from completing tasks.
Research with diverse participants
Recruit from 690,000+ vetted users and test how real people experience your designs.
Why a color-blind friendly palette matters
Accessible color choices affect everything from task completion to legal compliance. Here's why they should be a priority in every design project.
Accessibility and inclusivity
Designing for color blindness is designing for real people. When we create accessible color palettes, we're ensuring that everyone can use our products effectively, regardless of how they perceive color. This goes beyond compliance. It's about respecting our users and recognizing that good UX design serves everyone.
Reducing errors in task completion
Color-dependent user interfaces create friction. When users can't distinguish between states, options, or feedback, they make mistakes. They might submit forms with errors they couldn't see, miss important warnings, or misinterpret data. Accessible color choices directly improve task success rates and reduce user frustration.
Improving comprehension and trust
When information is clearly communicated, users feel confident. They trust that they're seeing what they need to see. Conversely, when users suspect they might be missing something due to color choices, it erodes trust in the entire experience, a dynamic closely tied to cognitive biases in UX.
Legal and UX standards
WCAG (Web Content Accessibility Guidelines) provides specific requirements for color contrast and color-dependent information. Many jurisdictions now require digital accessibility compliance, including the European Accessibility Act, making accessible color palettes not just good practice but a legal necessity, with US accessibility lawsuits increasing 20% in 2025.
Beyond compliance, following UI design principles that prioritize accessibility simply results in better products.
Key principles for accessible color palettes
These foundational principles will help you create palettes that communicate clearly for all users, regardless of how they perceive color.
Contrast ratio and WCAG guidelines
Contrast ratio measures the difference in luminance between two colors. WCAG establishes minimum requirements:
Text type | Minimum contrast ratio (AA) | Enhanced contrast ratio (AAA) |
|---|---|---|
Normal text (under 18pt) | 4.5:1 | 7:1 |
Large text (18pt+ or 14pt bold) | 3:1 | 4.5:1 |
UI components and graphics | 3:1 | Not specified |
These ratios ensure text remains readable regardless of color vision. A contrast ratio of 4.5:1 means the lighter color is 4.5 times more luminant than the darker color.
Pro tip: Create a contrast scale that emphasizes a color's contrast level rather than its intended usage (e.g. high contrast, mid contrast) and test each level against your backgrounds. This systematic approach helps ensure sufficient contrast across your entire palette.
Avoiding problematic color combinations
Certain color pairings are particularly difficult for people with color blindness to distinguish. Based on the seven formal classifications of color blindness, here are the combinations to avoid:
Red and green – The most common issue. These colors can appear nearly identical to people with deuteranopia or protanopia.
Green and brown – Often confused, especially in darker shades.
Blue and purple – Purple is frequently seen as dark blue by those with protanopia.
Light green and yellow – Light green may appear yellow to some users.
Blue and green – Blue-green or turquoise tones are often perceived as gray by people with red-green color blindness.
Blue and gray – Depending on the shade, certain grays and blues can blend together, especially for users with tritanopia.
Green and black – Different shades of red can be confused with black, and dark greens may appear black.
When you must use these colors together, ensure there's sufficient brightness or saturation difference, and always provide additional cues.
Using multiple cues (not just color)
The most robust approach to accessible design is never relying on color alone to convey information. Supplement color with:
Icons – Add checkmarks for success, X marks for errors, warning triangles for alerts, and consider testing your icons to make sure they're universally understood.
Patterns – Use dotted, dashed, and solid lines for line charts; add patterns to graph fills.
Labels – Include text labels directly on or near color-coded elements.
Shapes – Add shapes to data points in charts to connect them to legends.
Infographics – Make sure any infographics use patterns, labels, or shapes alongside color to convey meaning.
Position – Use spatial arrangement to reinforce meaning.
Simpler, clearer visual hierarchies with fewer colors to distinguish benefit everyone, including users with color vision deficiency.
How to build a color-blind friendly palette (step-by-step)
Building an accessible palette doesn't mean starting from scratch. Here's a practical process for creating or adapting your colors:
Step 1: Start with your brand colors
Begin with your existing brand palette. Identify your primary, secondary, and accent colors. You don't need to abandon your brand identity – you need to make sure it works for everyone.
Step 2: Check contrast with WCAG tools
Test every color combination you plan to use against WCAG standards. Check text colors against backgrounds, button colors against their backgrounds, and any colors that will appear adjacent to each other.
Step 3: Adjust hue, saturation, and brightness for inclusivity
When combinations need better contrast or clearer differentiation for color blindness, adjust them. Often, you can maintain the same hue family while adjusting saturation or brightness to create sufficient distinction. Color blindness doesn't affect the ability to distinguish between different shades, so leveraging brightness differences is particularly effective.
Step 4: Apply the 60-30-10 rule
Structure your palette using the 60-30-10 rule: 60% of your design uses one color (typically neutral), 30% uses a complementary color, and 10% uses an accent. This creates visual hierarchy while limiting the number of colors users need to distinguish.
Step 5: Test with simulators
Run your designs through color blindness simulators to see how they appear to users with different types of color vision deficiency. This reveals problems you might not catch otherwise.
Step 6: Validate with real user testing
Simulators are helpful, but nothing replaces feedback from actual users. Include participants with color blindness in your usability testing to validate that your palette works in practice.
Pro tip: Test your primary color against different backgrounds to ensure it works for people with color blindness. This guarantees they can at least navigate your core interface elements.
Tools for testing accessible palettes
You don't need to guess whether your palette works. These tools help you check contrast, simulate color blindness, and catch issues before your users do.
Contrast checkers
WebAIM Contrast Checker – Free, straightforward tool for checking contrast ratios between any two colors.
Colour Contrast Analyser – Desktop application for Windows and Mac with eyedropper functionality.
Color blindness simulators
Color Oracle – Free desktop application that applies color blindness filters to your entire screen.
Coblis – Web-based simulator where you can upload images to see how they appear with different types of color blindness.
Sim Daltonism – Mac app that shows a filtered view of your screen in real-time.
Browser extensions
Colorblindly – Chrome extension for simulating different types of color blindness on any webpage.
Design tool plugins
Able – Checks contrast and simulates color blindness within Figma.
Stark – Comprehensive accessibility plugin for Figma, Sketch, and Adobe XD.
Adobe Color – Built-in accessibility tools including color blindness simulation.
Examples of color-blind friendly palettes
Here are three tested palettes that work well for users with color blindness:
Palette 1: High-contrast professional
Color | Hex value | Best use |
|---|---|---|
Deep navy | #1B365D | Primary text, headers |
Bright teal | #008B8E | Accent, links, UI components |
Warm orange | #E87722 | Calls to action, alerts |
Light gray | #F5F5F5 | Backgrounds |
Charcoal | #333333 | Body text |
Contrast ratios: Navy on light gray: 11.1:1 | Teal on light gray: 3.8:1 | Orange on navy: 4.1:1
This palette avoids red-green combinations entirely and relies on blue-orange contrast, which remains distinguishable across most types of color blindness. Use teal for larger UI elements and pair orange with text labels when used at smaller sizes.
Palette 2: Warm and accessible
Color | Hex value | Best use |
|---|---|---|
Dark brown | #4A3728 | Primary text |
Golden yellow | #F2A900 | Highlights, warnings |
Deep purple | #5C2D91 | Accent, links |
Cream | #FFF8E7 | Backgrounds |
Slate | #4A4A4A | Secondary text |
Contrast ratios: Brown on cream: 10.6:1 | Purple on cream: 8.9:1 | Yellow on brown: 5.6:1
This palette uses warm tones with strong brightness differences, making it accessible while feeling approachable.
Palette 3: Monochromatic with accent
Color | Hex value | Best use |
|---|---|---|
Black | #000000 | Primary text |
Dark gray | #4D4D4D | Secondary text |
Medium gray | #808080 | Borders, dividers |
Light gray | #E6E6E6 | Backgrounds |
Bright blue | #0066CC | Links, interactive elements |
Contrast ratios: Black on light gray: 16.8:1 | Blue on light gray: 4.5:1
Consider making images and charts monochromatic because color blindness doesn't affect the ability to distinguish between different shades. This approach results in fewer opportunities to apply unfavorable color combinations.
Common mistakes in accessible color design
Even well-intentioned color choices can fall short. Here are the most common pitfalls to watch for when designing accessible palettes.
Relying only on hue differences
The most common mistake is assuming that different hues are automatically distinguishable. Red and green might look completely different to you, but they can appear nearly identical to someone with deuteranopia. Always ensure brightness or saturation differences accompany hue changes.
Ignoring saturation and brightness
Two colors with the same saturation and brightness but different hues can be impossible to distinguish for some users. Vary these properties, not just hue, to create clear distinctions.
Not testing with actual users
Simulators are valuable, but they're approximations. Real users with color blindness experience color differently from each other and from what simulators show. Include diverse participants in your user feedback sessions.
Prioritizing aesthetics over accessibility
Beautiful designs that exclude users aren't truly beautiful. Accessibility and aesthetics aren't mutually exclusive, and the best designers find solutions that achieve both.
Combining vibrant colors
Bright color combinations can produce an "afterimage" effect that disrupts other colors and creates visual vibrations. This affects all users, not just those who are color blind, so opt for more muted pairings when combining multiple colors.
How accessible color design improves UX
Accessible color design isn't just about compliance. It directly improves the user experience for everyone. When users with visual differences can interact effectively with your product, you've expanded your audience and demonstrated that you value all users.
Clear color choices improve task success rates. When users can easily distinguish between states, options, and feedback, they complete tasks faster and with fewer errors. This reduces support requests and increases user satisfaction.
Accessible design also boosts engagement and perception of quality. Barclays' app ratings more than doubled after launching a more accessible mobile app. Users notice when interfaces feel clear and easy to use, even if they can't articulate why. Good accessibility practices contribute to that feeling of polish and professionalism.
The principles that make designs accessible, including sufficient contrast, multiple cues, and clear visual hierarchy, benefit users in challenging conditions too: bright sunlight, low-quality displays, or simply tired eyes at the end of a long day.
How Lyssna supports accessible UX design
Creating accessible color palettes is only part of the equation. You need to validate that your choices work for real users. At Lyssna, we provide tools to help UX and UI designers create better user experiences through research and testing.
Practitioner insight: "Adopting Lyssna got us into the habit of asking our users questions before locking in decisions."
– Ron Diorio, VP Innovation & New Products at The Economist Group
Run usability tests with diverse users
Our research panel helps you recruit participants with different demographic and psychographic characteristics, including those who use assistive technologies like screen readers, screen magnifiers, and eye-tracking devices. Testing with representative users reveals accessibility issues that simulators might miss.
Test color clarity and task completion
Use preference testing to compare color palette options and see which performs better for comprehension and appeal. Track task completion rates to identify where color choices might be creating barriers.
Gather real feedback on accessibility concerns
Collect qualitative feedback about how users experience your color choices. Do they find certain elements hard to distinguish? Are they missing important information? Direct user feedback guides meaningful improvements.
Iterate accessible color choices with data
Store your research findings in a UX research repository to track how color accessibility improvements affect user experience over time. Data-driven iteration helps you continuously improve.
Put your palette in front of real users
Run preference tests and gather feedback on your color choices with Lyssna.
FAQs about color-blind friendly palettes
Diane Leyman
Senior Content Marketing Manager
Diane Leyman is the Senior Content Marketing Manager at Lyssna. She brings extensive experience in content strategy and management within the SaaS industry, along with editorial and content roles in publishing and the not-for-profit sector
You may also like these articles
Try for free today
Join over 320,000+ marketers, designers, researchers, and product leaders who use Lyssna to make data-driven decisions.
No credit card required