Color theory & web design. What you need to know.

By Michael Sasorith | March 2017

What color is that?

Late at night driving on the main highway in Key Largo, Florida, my uncle and I were finally at the end of our 26-hour road trip from Minnesota. Looking out the window and keeping my eyes out for our hotel, my uncle in a nonchalant tone asked, “Hey... is that light blinking red or yellow?”


The traffic light wasn’t in the vertical red-yellow-green arrangement to which we were accustomed, but instead a horizontal traffic light with only red and yellow. Because of my uncle’s colorblindness, he couldn’t figure out that the blinking light was telling him to yield or stop. Lucky for us, not a lot of people were out driving that late at night.

In the conversation of web accessibility and design, I’m reminded of this moment with my uncle. It illustrates how important it is to make conscious design decisions that could help alleviate the challenges people may have accessing information. One big way to help is having an understanding of color and how to apply it on websites.

3 important facts about color and accessibility

1. There are 3 properties of a color: hue, value, and chroma.

In color theory, a color can be described by the following three attributes:

  • hue: the attribute that represents what color category it belongs to (red, red-orange, orange, yellow-orange, yellow, yellow-green, green, blue-green, blue, blue-violet, violet, and red-violet)
  • value: the level of darkness and lightness it has (tints and shades)
  • chroma / saturation: the level of brightness it has

Understanding these properties is important when developing a color palette and applying it on a website. In order to make a website accessible for all users – including those who are colorblind or those whose color vision has declined with age – it’s crucial to have a strong amount of contrast through multiple properties.

2. Colorblindness means that a person has a limited amount of either red, green, or blue photoreceptors.

In our eyes are rod and cone-shaped light-sensitive cells called photoreceptors. The cone-shaped photoreceptors are the cells that are specifically responsive to bright light. These cones are also sensitive to either the red, green, or blue electromagnetic wavelengths.

With the exception of complete color blindness, being colorblind doesn’t necessarily mean that certain colors are invisible. Instead it means that the limited amount of cones in the eyes of a person who's colorblind makes it hard to distinguish colors, like my uncle and the challenge of distinguishing the red or yellow blinking light.

Keeping this in mind when using color on websites is why it’s important to understand the three properties of a color, and being conscious of creating high contrast between foreground and background colors.

3. Feasibility, functionality and aesthetics

Great design is focused on users. A great designer works to find a balance between feasibility, functionality, and aesthetics. A website can be colorful (aesthetically-pleasing), but if the information doesn’t have enough contrast and isn’t accessible to ALL users, then the trade off between functionality and aesthetics is unbalanced. Therefore, the quality of design is decreased.

In the end, accessibility = great design!

Color is just one way in design that can help a website be more accessible. Join us at our event “The Human, Design, and Legal Implications of Web Accessibility” on March 22, 2017 from 3:00pm – 5:00pm, where a panel of experts will discuss the common questions about web accessibility.

Topics: Design and Technology

Register for our Web Accessibility Event