Unit 11: Intro to Photoshop
Unit 12: Design Accessibility
Unit 13: Product Design Thinking
Unit 14: User Experience Design
Unit 16: Introduction to Design Portfolios
Unit 17: Portfolio Development
Unit 18: Personal Branding
Unit 19: Case Studies
Unit 20: Portfolio Website Design
Unit 21: Career Coaching
2 of 2

Designing for Color Blindness

As part of designing for accessibility and inclusivity, designers have to consider users who are color blind and how they are able to access the same information as others who are not.

What Is Color Blindness?

Color blindness is not a form of blindness at all, but a deficiency in seeing color. Color blind people have difficulty distinguishing certain colors, such as blue and yellow or red and green. Red-green color deficiency is the most common form of color blindness.

Much more rarely, a person may inherit a trait that reduces the ability to see blue and yellow hues. This blue-yellow color deficiency usually affects men and women equally.

Different Types of Colorblindness

Our eyes contain photoreceptors called rods and cones. Rods are the cells that sense light and dark. Cone cells are sensitive to the different wavelengths of light and are responsible for color perception. They are divided into three types: Red light with long wavelength, green light with medium wavelength and blue light with short wavelength.

A person with normal color vision has trichromacy, which means you have a normal amount of all three cone types. Someone with a color vision deficiency may lack all or some cones: Dichromacy means you only have two types of functioning cones.

Anomalous trichromacy means all three types of cones are present, but one of the cone types does not detect color normally.

Monochromacy or achromatopsia occurs when only one or none of the cones function normally.

Generally, those with anomalous trichromacy have milder color vision defects versus those with dichromacy. However, their symptoms can range from mild to severe.

People with monochromacy or achromatopsia have the most severe color vision deficiencies. They see different colors in shades of grey, similar to an old black-and-white movie.

Every type of color blindness causes inconvenience; this carries over to the user experience. At worst, colorblind people cannot use a product at all. It’ll upset a lot of users and a business will lose potential clients too.

Although there are many ways to treat colorblindness, as UI Designers, we have to make sure the interface is user-friendly for everyone.

Here are a few ways we as designers can do to help colorblind users access information without hindrance.

User Patterns and Textures

The first thing we can do is to use patterns and textures as an option to indicate different areas separated by color. Unlike users with normal vision, colorblind users cannot tell the difference between some colors. This becomes a problem especially when users need to access chart information.

Designers can create or designate different pattern overlays that can be toggled on or off with the help of professional charting tools so that colorblind users can still tell the difference between color bars that look different enough to normal-vision users but not so much to colorblind users.

Utilize Colors and Symbols

The second way we can help colorblind users is to utilize colors and symbols. One very important principle for designers to remember is that color alone cannot carry critical information. If we rely on color to communicate an important functional message, colorblind users will be excluded entirely.

Let’s take a look at Facebook’s sign up form for example. If the form relied on color alone to let users know they had made a mistake on a particular field, it might look something like this for a red-blind (protanopia) user.

Here’s a look at Facebook’s sign up form with symbols and error messages attached.

Using icons and symbols in forms to let the user know that they’ve made an error improves accessibility and helps them correct their mistake faster.

Use Text Labels

Another important way to make sure our design is accessible to colorblind users is using text labels.

Adding text labels to color filters and swatches improves accessibility for color blind users. Depending on the type of color blindness, users might find it difficult to differentiate between different colors (or shades) without some sort of descriptive text.

For example, without the descriptive text label on Amazon, color blind users wouldn’t be able to tell a red shirt apart from an orange or green one.

Adding text labels to color filters improves accessibility for people with normal vision, as well. For example, white, off-white, and light grey are often difficult to differentiate between on monitors.

Underline Links

Unlike users with normal vision, colorblind users may not also be able to spot hyperlinks if they are only indicated via color.

While it may be possible for someone with deuteranomaly, protanopia, or tritanopia to distinguish anchor text from regular text, it’s certainly not ideal due to the low contrast ratio.

Someone with monochromacy wouldn’t be able to differentiate between text and anchor text at all and would have to hover over the text to see if it their cursor changes to a pointer.

For this reason, it’s a good idea to add an underline to text links. This makes it easy to immediately tell regular text and anchor text apart. Here’s an example from the Engadget website.

Avoid Easily-Confused Color Combinations

Certain color combinations aren’t ideal for color blind users either because they have low contrast ratios or because they’re difficult to differentiate between. Designers should avoid putting them closely together.

Here’s a list of color combinations that are easily confused for colorblind users.

  • green-red
  • green-blue
  • green-brown
  • green-black
  • green-grey
  • blue-grey
  • light green-yellow
  • blue-purple

It doesn’t mean that you can never use these color combinations in your color palette. To help increase accessibility for colorblind users, designers simply need to avoid putting them closely together when possible. If not possible, designers will have to add in additional elements or text to make sure colorblind users can still tell the difference.

Make Buttons Stand Out Using Contrast

Designers often rely on color to make primary buttons stand out. The problem with this is that the color you use may be difficult for color blind users to perceive.

Here’s what designers can do instead:

  • Increase the size of your primary button.
  • Try out different placement combinations.
  • Increase contrast between primary and secondary buttons.
  • Use borders, icons, or font weight to differentiate primary and secondary buttons.

For example, Reformation uses size and color to emphasize the primary button.

And Firebox presents their primary button in the bottom-right corner and the secondary button in the top-left corner.

Mark Required Form Fields

Color blind users may have difficulty differentiating between required and optional fields if you use color alone to denote required fields on forms.

Instead, designers can:

  • Mark required fields with an asterisk (*).
  • Label fields with the word Required or Optional.
  • Remove optional fields from forms.

Designing UI for color blind users will help you improve your site’s accessibility for users with normal vision, as well. Although there isn’t a one-size-fits-all solution when it comes to web accessibility, designers can use the power of our creativity to help users of different abilities navigate the web a little easier.

Scroll to Top