Web Design for Color Blind Users

Color can be dazzling! It can be vibrant! It can add richness, tone, and depth to images and website pages that WOW your visitors and even take people’s breath away.

But what if you can’t see colors the way the rest of the world does? It can make your user experience less interesting and even cause you to misconstrue messages and meaning.

Worldwide, one in 200 women and one in 12 males are affected by color blindness, also known as color vision deficit (CVD). This implies that, out of every 100 visitors that use your website or app, up to eight or nine people may see and interact with the material in a totally different way than you might have planned or anticipate. 

People who are color blind have numerous challenges in daily life that ordinarily sighted people are simply unaware of. Even the simplest activities, like selecting and cooking food, gardening, playing sports, operating a motor vehicle, and deciding what to wear, might provide challenges. People who are color-blind may also run into difficulty with access to education, exam performance, profession choice, and career advancement which can all be impacted by color blindness.

By creating web designs that are accessible by people with color blindness, you and your organization help make the internet more inclusive. It’s as straightforward as understanding and adhering to some best practices for color blind web design so designers can create a website experience that is enjoyable and usable for everyone, regardless of their ability to discern color.

Is Web Page Design for Color Blind Users Important?

Yes. The Americans with Disabilities Act (ADA) controls all matters pertaining to the accessibility of websites for those with disabilities in the United States. According to the ADA, any person or organization that wants their website to be used by the general public must make it easily accessible to and usable by people with disabilities. Violations can be expensive with up to $75,000 for the first violation and $150,000 for all subsequent issues.

Additionally, the World Wide Web Consortium (W3C) at w3.org, an international group of member organizations that oversees the development of agreed upon protocols and open standards principles, has issued Web Content Accessibility Guidelines 2.1 (WCAG 2.1) which outlines and defines criteria to be used in all aspects of website accessibility design and development. 

Color Blindness Affects Day-to-Day Tasks

The majority of color blind users have vision that is comparable to that of the general population. Nonetheless, they are unable to discern between blue, red, and green light. Women are more likely to be carriers than patients of the deficit because it is caused by a mutation in the X chromosome. 

There are three primary types of color blindness:

1. Red/green color blindness is the most prevalent type. This is when people confuse all colors that contain either red or green colors as a component of the entire hue. 

People with Protanomaly color blindness are less sensitive to red light, whereas Deuteranopia patients are less sensitive to green light. For instance, a protanope will mistake blue for purple because they are unable to distinguish the red component of the color purple. 

2. Blue/yellow color blindness is less common and makes the person less able to tell the difference between blue and green and between yellow and red.

3. Complete color blindness, also called monochromacy, is quite rare, but does exist. This is where someone will only see black and white.

Try a color blindness simulator if you want to understand how different types of color blindness affects your sight/site. Or use the Chrome Extension, Colorblindly, to see the effects on any web pages.

Designing Web Pages for Color Blindness

When considering web page design for color blindness, be sure to engage a professional team which ample experience in designing websites with maximized accessibility. There are web design usability guidelines for color blindness that touch all aspects of User Interface (UI) and User Experience (UX), and it will be imperative to access that expertise rather than reinvent the wheel.

Here are some of the ideas to evaluate when considering web design and color blindness:

Increase Your Site’s Color Contrast

Increasing the contrast between color combinations on your website can help enhance the visibility and readability for color-blind users. 

To this end, try to avoid using colors with similar intensities or hues in close proximity to each other. If possible, use at least a 4:1 contrast ratio when selecting colors for text and background elements so that any user can clearly see them. This will ensure that color won’t be the main factor in comprehension or legibility on your website.

Avoid Light Text on Dark Backgrounds

Generally, when designing for color-blind people, use dark or strong, vibrant text on a light background. By doing this, you’ll reduce the risk that a color-blind person won’t be able to differentiate between words and important information. 

Additionally, if possible, try to utilize other design elements as much as possible — such as texture, size, shape and flow — so that it will be easy for color-blind viewers to spot your website’s key sections or elements.

Use Patterns and Textures

When displaying data using graphs and pie charts, color contrasts are crucial. Color blind viewers may find it challenging to understand your chart if you utilize colors with low contrast ratios.

Here’s what you ought to do in its place:

• Make it simple for users to distinguish between distinct portions by using patterns and textures.

• To make portions even simpler to comprehend, add text labels to them.

Use Color Text Labels

Imagine wanting to buy a red t-shirt, but not being able to see which sample is the correct color?

When shopping on many sites (Amazon for instance), you may have seen the color selection is done through small icons of color or pattern. But they are always accompanied by a text line above that textually denotes the exact color. 

Use Icons and Other Non-Color Cues

People with normal vision often rely on color to differentiate between navigation items and other elements of the design. That’s why it’s especially important to think beyond color when you’re creating a website for those with visual impairments since color will be ineffective at helping them distinguish between objects or understand what something means. 

Try to use icons, symbols, and other non-color cues to create clear relationships between elements so that all users can recognize how your webpage is organized.

Don’t Rely Solely on Color to Communicate Meaning

To make sure that your site is useable and enjoyable for people with color-blindness, you should avoid relying solely on color to communicate meaning. Avoid using differently colored text to show importance or button colors that require viewers to perceive subtle hues. 

Instead, design with clear symbols and other visual elements in addition to using non-color cues such as size and texture so that all users can understand the message you are trying to convey.

Choose Accessible Colors When Choosing Palettes

When selecting a color palette for your website, be sure to consider the needs of color-blind people. Use colors that have high contrast and good visibility so that even if a person is color-blind, they can still understand the message and what’s expected of them. 

For example, it is best to avoid colors like sky blue or lime green as they are harder to detect by those with color deficiencies. Pick from a wide range of accessible color palettes such as shades of gray, earth tones, and jewel tones when designing web pages for people with color blindness.

Avoid these color combinations:

• Green – red
• Green – blue
• Green – black
• Green – brown
• Green – grey
• Light or lime green – yellow
• Blue – purple
• Blue – grey

Use Characters to Define Required Fields

If you only use color to indicate mandatory fields on forms, color blind users could find it difficult to distinguish between required and optional entries.

Instead, other solutions could be:

• Use an asterisk (*) to indicate fields that are needed.

• Textually indicate whether a field is required or optional.

• Delete any optional fields.

Underline Links

In web design, we frequently use the font weight or color to indicate links. Even though it might be possible for someone with deuteranomaly, protanopia, or tritanopia to tell anchor text from ordinary text, the low contrast ratio makes it far from optimal.

Monochromacy would make it impossible for someone to distinguish between text and anchor text, thus they would have to linger over the text to check if their cursor turns into a pointer.

By underlining the links on your website page, color blind people will be able to more easily navigate your site, find information they are looking for, or make a purchase.

Ensure Primary Buttons Pop

Designers frequently use color to highlight primary buttons. The issue with this is that users who are color blind can have trouble seeing the color you use.

Try these ideas instead:

• The size of your main buttons could be increased to make them easily discernable.

• Try experimenting with various locations or combinations of locations.

• Make the major and secondary buttons more contrasted.

If you want to distinguish between primary and secondary buttons, try using borders, icons, or font weight.

Summarizing the Color Blind Web Site Design Process

With these suggestions, you have a roadmap for success when working with designers, developers, digital marketing professionals, and content creators as you build an accessible website. Using these examples, your website and its contents will be perceivable, operable, and intelligible for users of all types and abilities and will also be considered accessible under ADA Guidelines as well as WCAG 2.1.

If you are in the process of designing a new website or giving an existing website a needed facelift, be sure to discuss color blindness and web design with an experienced web design and development agency with a thorough understanding of accessibility design principles. 

Lounge Lizard brings over 20 years of experience in website design and development, as well as digital marketing using images and color that work for your entire audience. This includes for color blind people as well as people with other types of disabilities which are all included in the ADA, including:

• Other forms of visual impairment
• Auditory
• Cognitive
• Speech
• Physical
• Neurological

Please don’t hesitate to get in touch with us if you have any questions regarding how to make your website accessible to color blind users or other users with accessibility needs. Contact Lounge Lizard to learn more about positioning your website to capture more business and improve your bottom line.