Which color combinations or contrasts should I avoid to create an accessible logo?

Deep dive 

Color contrast is crucial for ensuring that your logo is accessible to everyone, including people with visual impairments.  

When designing an accessible logo, you need to make sure that there is sufficient contrast between the foreground and background elements. This will make it easier for people with low vision to see and understand it. 

Note: Text within a logo or brand name isn't required to meet contrast standards. 

Here are some combinations to avoid:

• Low contrast combinations: Avoid using colors that are too similar in value, such as light gray and white or dark gray on black. These combinations can be difficult to distinguish for people with low vision.

• Complementary colors: While they can be visually appealing, they can also create a vibrating effect that can be difficult for people with visual impairments to look at. For example, avoid using red and green together, especially for text.

• Red and blue: This combination can be difficult to distinguish for people with tritanopia.

• Green and brown: This combination can be difficult to distinguish for people with deuteranopia.

More combinations to avoid: 

• Red and green

• Purple and blue

• Blue and green

• Yellow and light green

• Grey and blue

• Grey and green

• Black and green

The rationale

Accessible design is not just about following guidelines; it's about creating a positive experience for all users. When your logo is accessible, it means that everyone can perceive and understand it, regardless of their visual abilities. This is important for building a strong brand identity and ensuring that your message reaches the widest possible audience.

Here are some additional benefits of creating an accessible design:

• Improved user experience: An accessible logo is easier for everyone to see and understand.

• Increased brand awareness: An accessible logo can help you reach a wider audience, including people with disabilities. 

• Enhanced brand reputation: Creating an accessible design shows that you care about your users and are committed to providing an inclusive experience. This can enhance your brand reputation and build trust with your users.

• Reduced legal risk: In some countries, there are laws and regulations that require businesses to make their websites and apps accessible to people with disabilities. Creating an accessible logo can help you comply with these requirements and reduce your legal risk.

Number of colors in a logo 

Using too many options can indeed create confusion, especially for color-blind users. A minimal color scheme improves accessibility and makes the design more visually appealing. 

How many colors should a logo have? There's no definitive guideline. You'll get answers ranging from "Use as many as needed" to "Keep it to as few as possible."

If two colors convey the message or meet the client’s preference, that's fine. If more are needed, expand your palette accordingly.

Combine colors with symbols to improve clarity

Avoid relying solely on color to convey your message. Take a stop sign, for example—red signals us to stop, but for someone who can’t distinguish red, the unique shape still conveys its meaning. Similarly, adding distinct symbols or shapes to your logo makes it more recognizable, even for those with color blindness. 

Use textures and patterns for better contrast

To emphasize certain elements, consider using contrasting textures. Strong contrast helps users with color blindness see elements more clearly.

What are the different types of color blindness?

More than 350 million people worldwide are color-blind, and anyone can lose the ability to distinguish colors. 

It can be categorized into several types:

1. Red-green color blindness: The most common type, which includes:

• Protanopia: Reduced sensitivity to red light. People can't distinguish red hues due to a lack of red cones.

• Deuteranopia: Reduced sensitivity to green light. People can’t fully identify green hues.

2. Blue-yellow color blindness: Less common than red-green, includes:

• Tritanopia: It's hard for people with tritanopia to distinguish blue and yellow hues. They have regular red and green eyesight.

3. Monochromacy: A rare condition where no colors are seen, and vision is limited to black, white, and shades of gray.

Is color blindness covered under the ADA?

Yes, in the United States, it’s recognized as a disability under the Americans with Disabilities Act (ADA). This means websites are required to make reasonable accommodations for color-blind users, and non-compliance can lead to penalties, including the ADA-compliant logo. 

❓Questions designers should ask themselves

By asking the right questions, designers can question their decisions, find areas to improve, make sure nothing is overlooked, and reduce mistakes, leading to better, more thoughtful designs.

• Do existing brand guidelines dictate specific colors?

• Is there flexibility to modify colors for accessibility?

• Are there multiple logo variants needed (light/dark modes)?

• Where will the logo appear? (digital, print, signage)

• What backgrounds will it be placed on?

• What are the minimum and maximum display sizes?

• Which WCAG compliance level are we targeting? (AA or AAA)

• Do we need to consider color blindness variations?

• Are there industry-specific accessibility requirements?

⚠️ Common mistakes to avoid

Learning from your mistakes is important, but many problems can indeed be predicted and avoided. Based on Cieden's collective expertise, we're sharing the most common ones.

• Starting with color before form;

• Testing only on your own screen;

• Ignoring dark mode requirements;

• Not creating documentation;

• Relying on color alone for meaning;

• Using gradients without contrast checking;

• Ignoring color spaces (RGB vs CMYK);

• Not testing with a color blindness tool or logo contrast checker.

🛠️ Useful tools 

These tools will make your job easier and more effective.

• WebAIM Contrast Checker: An online tool for analyzing contrast levels between text and background, helping designers meet Web Content Accessibility Guidelines.

• Contrast Ratio by Lea Verou: A tool for calculating contrast ratios between two colors.

• Accessible Colors: A color contrast tool that suggests accessible combinations for foreground and background. 

🤝 Credits

Our content combines the knowledge of Cieden’s designers with insights from industry influencers. Big thanks to all the influencers for sharing awesome content!

• Color Contrast for Accessibility in Logo Design by The Logome Team

• Should my Logo be Accessible under the Web Content Accessibility Guidelines? 

• Making Your Website Accessible for Color-Blind Users (Comprehensive Guide) by Kaspars Milbergs

📚 Keep exploring 

Never stop growing. Explore resources thoughtfully handpicked by Cieden’s designers.

• What is Color Contrast?

• Colors to Avoid for Color Blind Users: An Intro for Designers by Simon 

• Why all designers need to understand color blindness by Alex Bigman

• Should my Logo be Accessible under the Web Content Accessibility Guidelines?