A Guide to Colour Blind Friendly Colours in Design.

Key Takeaways

• Prioritise Contrast: High contrast between text and background (aim for a 4.5:1 ratio) is more critical than the specific colours you choose.
• Don't Rely on Colour Alone: Always use secondary indicators like icons, text labels, or patterns to convey important information. This ensures everyone understands the message.
• Avoid Problematic Combinations: Steer clear of using red and green together for critical information. Opt for safer, high-contrast pairings like blue and orange.
• Test Your Designs: Use colour blindness simulators and contrast checkers to see your work through the eyes of users with colour vision deficiency.

When we talk about designing with colour-blind-friendly colours, it's not just about picking a palette that looks good. It’s about creating an experience that works for everyone, including the approximately 3 million people in the UK with some form of colour vision deficiency.

The goal is to focus on high contrast and use secondary indicators like icons or patterns. This simple shift in thinking—moving away from problematic red/green combinations towards safer pairings like blue and orange—is the first step to making your design genuinely accessible.

Your Guide to Accessible Colour Choices

Designing for accessibility isn't about limiting your creativity; it's about making smarter choices that open your work up to a wider audience. By understanding how to select and test colour-blind-friendly palettes, you can build digital experiences that are not only compliant but also more intuitive and effective for all users.

This guide will walk you through the essentials, from understanding the different types of colour blindness to implementing practical, accessible palettes in your projects. Whether you're deep in mobile app development or kicking off a new website, these practices are fundamental.

Why Accessible Colour Matters More Than You Think

First, let’s clear up a common myth: colour blindness rarely means seeing the world in black and white. For most people, it’s about the brain struggling to tell certain shades apart, turning what should be simple digital interactions into a frustrating guessing game. This condition is more accurately called colour vision deficiency (CVD).

Imagine trying to make sense of a performance dashboard where "growth" is green and "loss" is red. For someone with the most common form of CVD, those two critical signals might look almost identical, blending into a confusing, muddy brown. This isn’t a niche issue; it has a huge real-world impact.

In the UK alone, colour vision deficiency affects roughly 3 million people—that's about 4.5% of the entire population. It’s far more common in men than women, with about 1 in 12 men (8%) and 1 in 200 women (0.5%) experiencing it in some form.

Understanding the Main Types of Colour Blindness

To design things that actually work, we need to understand the challenge. While there are lots of variations, most cases of CVD fall into two main red-green deficiencies.

• Deuteranopia (and Deuteranomaly): This is the most common form, often called "green-blindness." People with Deuteranopia find it hard to distinguish green hues. Reds, greens, and browns can all blur together, creating major problems with everything from online charts to simple status indicators.
• Protanopia (and Protanomaly): Known as "red-blindness," this type makes it difficult to perceive red light. For someone with Protanopia, reds might look dark and muted, while certain shades of orange, green, and brown can appear very similar.

A much rarer form is Tritanopia, which messes with the perception of blue and yellow. For these individuals, blues can seem greenish, and yellows might appear grey or even violet.

The core takeaway here is that accessible design isn't about accommodating a handful of users. It's about recognising that a significant chunk of your audience sees colour differently and making sure your product works for them, too.

The Real-World Impact on User Experience

When colour is the only thing conveying information, the user experience can completely fall apart for someone with CVD. Take a standard online form. Error messages are often shown in red text, but if that red has poor contrast against the background, a user with red-green colour blindness might not even see it.

The consequences range from a minor headache to total failure.

• Data Incomprehension: Bar charts, pie charts, and heat maps that rely on a red-to-green spectrum become unreadable. Key data points and trends are completely lost.
• Failed Transactions: A user might be unable to spot which required fields they’ve missed on a checkout page, leading to abandoned carts and lost revenue.
• Critical Misinformation: On a dashboard, a red alert signalling a system failure could be easily missed if it looks identical to a green "all-clear" status.

This isn't an edge case; it's a fundamental usability flaw. By not considering colour blind friendly colours, we are actively shutting out millions of people from using our websites and apps effectively.

Adopting accessibility is a core part of user-centred design, a principle we explore in our detailed guide on designing for accessibility. It’s a commitment to building digital experiences that are clear, functional, and genuinely inclusive for everyone.

Building a Truly Inclusive Colour Palette

Creating a design that’s both beautiful and works for everyone starts with a solid, inclusive colour palette. The fundamental rule is simple, yet so often missed: never rely on colour alone to convey meaning. Think of colour as a helpful guide, not the only signpost on the road.

When you use colour to indicate an error, a success, or a status update, you absolutely must provide a secondary cue. This makes sure that users who can't distinguish between certain hues still get the same vital information. It's a principle that sits at the very heart of building accessible digital products.

The Golden Rules of Inclusive Colour Selection

To create truly colour blind friendly colours, you need more than just a good eye for aesthetics; you need a framework built on clarity and contrast. Getting these principles right from the start will save you from costly, frustrating redesigns down the line.

Here are the non-negotiable rules for your palette:

• Pair Colour with Icons: A red border around an error field is a good start, but adding a small cross or exclamation mark icon makes the message universally understood. Likewise, a green tick icon instantly says "success," regardless of the colour surrounding it.
• Use Clear Text Labels: Don't assume a coloured button is self-explanatory. A button clearly labelled "Confirm" is always more effective than a simple green circle. Direct labels remove all ambiguity.
• Incorporate Patterns and Textures: For complex data visualisations like charts and graphs, colour often isn’t enough. Using different patterns—like stripes, dots, or cross-hatching—to distinguish between data sets makes them readable for everyone.

By embedding these multi-layered cues into your design, you create a robust user experience where colour enhances communication rather than being the only thing doing the talking.

Understanding Contrast and WCAG Standards

Beyond using secondary indicators, contrast is your most powerful tool for accessibility. The Web Content Accessibility Guidelines (WCAG) provide a clear, measurable benchmark for this, looking at the difference in brightness between your text and its background.

WCAG sets the minimum contrast ratio for normal text at 4.5:1 (Level AA). This isn't just a friendly recommendation; it's the industry standard for creating readable and inclusive content. For larger text, the ratio is a little more forgiving at 3:1.

This ratio ensures text is legible not only for users with colour vision deficiency but also for those with low vision or even just someone trying to read a screen in bright sunlight. High contrast is simply good design.

Problematic Pairings and Safer Alternatives

Certain colour combinations are notoriously difficult for people with red-green colour blindness to tell apart. Avoiding these pairings is a simple yet incredibly impactful step towards better accessibility.

Combinations to Use with Caution or Avoid:

• Red & Green: The classic problematic pair. They often just look like a muddy brown or grey.
• Green & Brown: These can appear almost identical.
• Blue & Purple: Hues that are too close together on the spectrum can be hard to distinguish.
• Green & Blue: Especially when the shades are similar in brightness.
• Green & Grey: These can easily blend into one another.

Instead of leaning on these, you can pivot to pairings that offer much higher natural contrast and clarity.

Safer, High-Contrast Alternatives:

• Blue & Orange: This is one of the most reliable and visually striking colour-blind-friendly combinations. The two colours sit on opposite sides of the colour spectrum for most types of CVD.
• Blue & Yellow: Another strong choice that maintains clarity across different forms of colour vision.
• Blue & Red: This pairing generally works well, as blue perception is largely unaffected by the most common types of colour blindness.

By choosing these safer alternatives, you can maintain a vibrant and engaging visual identity without shutting users out. The principles of creating an accessible palette are a core part of effective UI/UX design services, ensuring your final product isn’t just visually appealing but usable by the widest possible audience. This approach doesn't limit creativity; it focuses it on solving real user problems.

Discovering Palettes That Actually Work

Theory is great, but it’s practical examples that really bring accessible design to life. Let’s move past the abstract rules and look at some pre-vetted, colour-blind friendly colours and palettes you can use right away in your branding, UIs, and data visualisations.

Putting these into practice means more than just picking colours from a list. It’s about taking a holistic approach where contrast, labels, and patterns all work together.

This really drives home the point: a truly accessible strategy doesn’t rely on colour alone. It uses colour in partnership with other visual cues to make sure everything is clear for every user.

The Power of Blue and Orange

One of the most reliable and visually striking combinations you can use is blue and orange. They sit on opposite sides of the colour spectrum for most types of colour vision deficiency, which means they maintain strong contrast and are easy to tell apart.

This pairing is also incredibly versatile. You can use it for:

• Call-to-Action Buttons: An orange button on a dark blue background really pops.
• Data Visualisation: Using shades of blue for one data set and orange for another makes charts instantly readable.
• Status Indicators: A blue icon for "information" and an orange one for "warning" completely sidesteps the common red/green confusion.

The secret here is that blue is one of the most consistently perceived colours across all forms of CVD. That makes it a safe, stable anchor for any accessible palette and a foundational choice in many successful mobile app development projects where clarity on small screens is everything.

Other High-Performing Combinations

While blue and orange are a fantastic starting point, they’re far from your only option. Building a vibrant, exciting, and accessible palette is completely achievable when you focus on hues that are less likely to be confused.

Consider these powerful and colour-blind-friendly pairings:

• Blue and Yellow: Another classic high-contrast duo that just works. A dark blue paired with a bright, rich yellow can create a clean and energetic feel.
• Blue and Red: This combination generally maintains good visibility, especially if you choose shades with enough difference in brightness.
• Dark Blue and Brown: A sophisticated and earthy palette that offers strong contrast while avoiding the problematic green-brown territory.

The common thread here is the strategic use of blue. Since the genes responsible for red-green colour blindness are on the X chromosome and don't affect blue-yellow perception, blue provides a reliable foundation for building an inclusive colour scheme.

A Practical Example Palette

Let’s put this into practice and build a simple, accessible palette for a web application. This scheme gives you enough variety for UI states, text, and accents while remaining robustly colour-blind friendly.

• Primary Action Colour: A strong, vibrant blue (#005B9A). Perfect for primary buttons, links, and key interactive elements.
• Secondary/Warning Colour: A rich, warm orange (#F57C00). Ideal for secondary actions, warnings, or highlighting important information.
• Neutral Text Colour: A very dark grey, almost black (#212121). This gives you excellent contrast against a light background.
• Background Colour: A clean off-white (#F8F9FA). It’s a bit easier on the eyes than pure white but still maintains high contrast.
• Accent/Success Colour: A deep teal (#00796B). This works as a great alternative to a traditional green for success messages, as it has enough blue in it to stay distinct.

This palette shows that accessible design doesn't have to be boring design. With thoughtful choices based on contrast and hue distinction, you can create a user experience that is both beautiful and functional for everyone. For a real-world look at how we apply these principles, check out our work on the Boiler Juice project.

How to Test Your Designs for Accessibility

Choosing a thoughtful palette is a great first step, but you can’t stop there. To make sure your designs are genuinely usable, you have to test them. Luckily, there’s a whole suite of tools designed to help you see your work through the eyes of users with colour vision deficiency.

Integrating these tools into your workflow isn’t just a nice-to-have; it’s a core part of professional design and development. It’s what moves your work from hoping it’s accessible to knowing it is, ensuring your chosen colour-blind friendly colours work in practice, not just in theory.

This whole process is about removing guesswork. Instead of wondering if your contrast is strong enough or if your palette is clear, you can get instant, actionable feedback. Catching issues early saves a huge amount of time and resources down the line and helps you build a more inclusive product from the ground up.

Integrated Design Tool Plugins

For designers, the most efficient way to test is right inside the software you already live in. Plugins for Figma, Sketch, and Adobe XD bring accessibility checking directly into your creative space, making it a seamless part of your process.

One of the most popular tools out there is Stark. It’s packed with features like a contrast checker and a colour blindness simulator, but it also helps you check things like typography and touch targets.

Real-time feedback like this is invaluable. It lets you make immediate adjustments to your colour choices on the fly, fine-tuning them for better clarity.

A few other excellent plugins worth checking out are:

• Color Blind (Figma): A simple but powerful plugin that lets you view your designs through eight different types of colour vision deficiency.
• Able (Figma): A brilliant contrast checker that also compares colours and gives you live feedback as you tweak your palette.
• Color Contrast Analyser (Sketch): A straightforward tool that calculates the contrast ratio between two selected layers, making it easy to hit WCAG standards.

The key is to make accessibility testing a habit, not an afterthought. By running these checks as you design, you embed inclusivity into your work from the very beginning, ensuring every element is built to be accessible.

Browser-Based Simulators and Extensions

Once your design moves from a static file to a live website, browser-based tools become your best friend. These extensions simulate different forms of colour blindness right in your browser, showing you exactly what your users will experience.

These are particularly crucial for checking interactive elements—things like hover states, error messages on forms, or notification banners—that might get missed in a static design file.

• WAVE (Web Accessibility Evaluation Tool): A powerful browser extension that overlays icons and indicators directly onto your page, highlighting accessibility issues related to contrast, ARIA labels, and more.
• ColorZilla: Primarily known as a colour picker, this extension also includes handy tools for analysing page colours and checking contrast.
• Coblis (Color Blindness Simulator): A web-based tool where you can upload an image of your design and instantly see how it appears with different types of CVD.

These tools empower the entire team, from designers to developers, to take ownership of accessibility. We put these principles into action on our accessibility-focused Recite Me website project, where rigorous testing ensured the final product was genuinely usable for the widest possible audience. Using these tools confirms that your carefully selected colour-blind friendly colours translate effectively from a design file to a live, functional experience for everyone.

Bringing Accessible Designs to Life with Code

A beautiful, accessible design is a great start, but it's only half the story. The real magic happens when that design is translated into clean, functional code. This is where your carefully chosen colour-blind friendly colours and non-colour cues need to survive the journey from mockup to live environment.

Bridging that gap between design and development is everything. By writing code that reinforces accessibility from the ground up, you build products where clarity is an integral feature, not an afterthought. It means thinking critically about how interactive elements behave, how data is shown, and how assistive tech will interpret your work.

Using CSS Variables for Maintainable Palettes

Let’s be honest, managing a colour palette across a big project can get messy. Hard-coding hex values all over the place is a recipe for disaster—it's inefficient and massively prone to error. The smart way to handle this is with CSS custom properties, or variables, to define your entire colour scheme in one central spot.

This approach makes your stylesheet a dream to maintain. If you ever need to tweak a colour for better contrast or as part of a rebrand, you only have to change it once. It’s that simple.

For instance, you could set up your core palette like this:

:root { --primary-action-color: #005B9A; /* Vibrant Blue / --secondary-warning-color: #F57C00; / Rich Orange / --text-color-dark: #212121; --background-color-light: #F8F9FA; --success-color: #00796B; / Deep Teal */ } This simple step ensures total consistency across your entire app, from buttons to backgrounds. It also makes life much easier when designers and developers need to collaborate. Think of it as a foundational step in effective web development.

Styling Interactive Elements Beyond Colour

Relying on colour alone to signal the state of an interactive element is one of the most common accessibility traps. A link that only changes colour when you hover over it might be completely invisible to someone with a colour vision deficiency. The solution is to combine colour with other, more robust visual cues.

• Links: Add an underline or a change in font weight on hover and focus states.
• Buttons: Use a border, shadow, or even a subtle animation to show it's being interacted with.
• Form Inputs: When an input field is in focus, apply a distinct border (like a thick blue outline) instead of just a faint colour shift.

This multi-layered feedback ensures that all users get clear, unambiguous signals when they interact with your interface. It’s a small coding effort that has a massive impact on usability.

Patterns and ARIA for Accessible Data

When it comes to data visualisations like charts and graphs, the "don't rely on colour alone" rule is absolutely critical. In your code, you can use SVG patterns to fill different sections of a chart, adding textures like stripes or dots to help distinguish between data sets.

But for screen reader users, those visual patterns are no help. This is where ARIA (Accessible Rich Internet Applications) attributes become essential. By adding ARIA labels to your chart elements, you can provide a text-based description of the data. For example, a bar in a chart could have an attribute like aria-label="Sales in Q4: £50,000", making the information fully accessible to non-visual users.

This dual strategy—visual patterns plus ARIA labels—ensures your data is understandable to the widest possible audience. If you're building a complex data-driven tool and need expert guidance, feel free to contact us to discuss your project.

Frequently Asked Questions

What is the single best colour for accessibility?

There isn't one. A colour is only as accessible as its relationship with the colours around it. The real hero of accessibility is contrast, not a specific shade. Instead of searching for a magical, universally accessible colour, your goal should be to create pairings with strong contrast. A dark element on a light background is a classic for a reason. Always aim for at least a 4.5:1 contrast ratio between text and its background, as recommended by WCAG guidelines.

Can I still use my brand's red and green colours?

Yes, absolutely—you just can’t rely on them to do all the work. The problem isn’t using red and green; it's using only red and green to convey important information, like success or failure. If you’re using them for status, add a secondary cue. Pair your green success message with a checkmark icon or your red error with an exclamation mark. This way, colour is a helpful hint, not the only piece of information, as we achieved in our work with Boiler Juice.

Do accessible colour palettes have to be boring?

Not at all. This is the biggest myth in accessible design. Creating an inclusive experience doesn’t mean you’re stuck with muted greys. Many vibrant, beautiful palettes are perfectly accessible. Think about bold combinations like deep blues and bright oranges—they often have fantastic contrast and are easily distinguished. The goal is to be intentional with your choices. Thoughtful, inclusive design can be stunning, proving you never have to sacrifice aesthetics for accessibility. Our design for Findr is a great example.

How do I make data charts and graphs accessible?

The golden rule for data visualisation is to never rely on colour alone. Your palette is a great starting point, but you must add other visual cues to ensure clarity for everyone. Use different patterns or textures for data sets, like stripes or dots. Add direct labels to pie chart slices or lines on a graph so users don't have to refer to a separate key. Including interactive tooltips that reveal information on hover also removes ambiguity and makes your data more accessible.

What is the most common form of colour blindness?

The most common type is red-green colour vision deficiency, which includes Deuteranopia (difficulty seeing green) and Protanopia (difficulty seeing red). This is why the classic red/green combination for things like status indicators ("stop" vs. "go") is so problematic. It’s crucial to design with this specific challenge in mind, as it affects the largest segment of users with colour vision issues. Prioritising alternative pairings like blue and orange is a simple way to address this common accessibility barrier.

About the Author

Hamish Kerry is the Marketing Manager at Arch, where he’s spent the past six years shaping how digital products are positioned, launched, and understood. With over eight years in the tech industry, Hamish brings a deep understanding of accessible design and user-centred development, always with a focus on delivering real impact to end users. His interests span AI, app and web development, and the transformative potential of emerging technologies. When he’s not strategising the next big campaign, he’s keeping a close eye on how tech can drive meaningful change.

You can catch up with Hamish on LinkedIn