Color Theory for the Color-Blind

In: Articles

By Mario Parisé

Published on August 1, 2005

Being color-blind can be a real obstacle for anyone involved in design. For Web designers, this does not need to be true. In any other field of design, it is expected that the designer has a keen eye for colors. It is generally assumed that you need to “just feel” when colors look good together and when they don’t. You should just be able to see them and say “Yeah, that looks good,” or “That looks really bad.” This is a fair expectation if you’re working with paint or ink. However, colors take on a new dimension when our work is based on computers: hexadecimal code.

By understanding the science and logic behind color theory, I—and other color-blind designers—can intellectually know why colors go well together or don’t. We don’t have to actually see them. If we extend our knowledge to why certain colors make us feel the way they do, we can also create very emotional color schemes, without actually seeing the colors.

I’m going to give a brief overview of color theory and provide practical advice for the color-blind designer. But first, if you would indulge me, I’d like to brief you on what color blindness is.

What Color Blindness Is

Complete color blindness (monochromacy) is very rare. Most color-blind people are color deficient—there are certain colors they don’t see well, such as red and green. Any colors composed of red or green, such as brown, purple or orange, don’t look the same as they would to someone who sees all colors. What might seem to be completely different colors to most will look very similar to us.

What’s in a Color?

All colors are composed of three primaries, plus varying quantities of black and white (saturation). When working with paints or ink, we deal with red, yellow, and blue as our primary colors. I will refer to these, inaccurately, as CMYK—cyan, magenta, yellow and black. When we are working with light, however, our primary colors are red, green and blue, which is very accurately and logically known as RGB. If we are to utilize good color theory, we need to understand both systems of color.

Tips for Color-Blind Designers

The Color Wheel

The color wheel is a representation of all of the basic colors in the CMYK system. It can represent as few as the three primary colors, or spawn off to all of the colors known to our world and all of their available shades. The color wheel helps us understand why some colors look really good together, and why others look just plain bad.

The color wheel starts with the three primary CMYK colors: red, yellow and blue. The colors then mix, to give us our secondary colors: orange, green and purple. These then mix a tad bit more to give us yellow-orange, red-orange, red-purple, blue-purple, blue-green and yellow-green. They keep combining to create our visual world. What’s important here is that they all fit in the color wheel.

Before I explain how the color wheel helps us understand nice colors, I’m going to explain how all of this relates to hexadecimal codes.

RGB and Hexadecimal to the Rescue

Colors on the Web are represented by hexadecimal code. You probably recognize the format: #00AAFF. These six digits represent red, green and blue, respectively. So, in this example, 00 represents red, AA represents green, and FF represents blue.

Every digit can have a value of 0-9 or A-F. A value of F means full saturation (in the example of #00AAFF we have as much blue as possible). A value of 0 means zero saturation (in the example of #00AAFF we have no red whatsoever). Everything in between represents varying degrees of color saturation and lightness. If you give red, green and blue the same value, you will get either black, white or any of the shades in between. So, #FFFFFF is white, #000000 is black and #CCCCCC is my favorite shade of grey.

It takes some time and experimentation to learn all the nuances, but it’s beyond the scope of this article to go into all of the details. You can easily find hex values on the Web. An excellent resource is the W3Schools’ CSS color page.

Hexadecimal Meets the Color Wheel

The reason color-blind people can design for the Web is that we can know colors through their hexadecimal representation. Here are some basic colors and their hexadecimal representations:

Primary colors:

Red: #FF0000

Yellow: #FFFF00

Blue: #0000FF

Secondary colors:

Orange: #FFAA00

Green: #00FF00

Purple: #AA00AA

Tertiary colors:

Red-Orange: #FF4000

Red-Purple: #FF0080

Yellow-Orange: #FFC000

Yellow-Green: #80FF00

Blue-Green: #00FFFF

Blue-Purple: #8000FF

So What Looks Good?

In color theory there are several methods of developing a good color palette. Unfortunately, results can’t be guaranteed. A designer’s eye is required to determine if the colors are pleasing or not. Even for someone who sees colors well, these methods can be dangerous. Color-blind designers want to be sure that their colors work great. Let’s to stick with the tried, tested and true methods.

Monochromatic Colors

Monochromatic color schemes utilize multiple shades of a single color to create simple but effective color palettes. The two most important things to remember when using a monochromatic palette are that:

1. This one color sure as hell better convey the right emotion, as you have no other colors to rely on!
2. You still need to create contrast, particularly in content areas. If you use green, for example, and your background is a light green, don’t use another light green color for text. You have all the shades of green, plus black, white and all of the grays, at your disposal. There’s no reason to make the site hard on the eyes.

For example:

Complementary Colors

Complementary colors are the easiest to understand. Pick any color on the color wheel—its complementary color will be exactly opposite. For example:

• Yellow (#FFFF00) complements Purple (#AA00AA);
• Blue (#0000FF) complements Orange (#FFAA00); and
• Red (#FF0000) complements Green (#00FF00).

These colors have high contrast (but note that complementary colors don’t work well for text against a background). It’s important to make sure you actually choose colors exactly opposite. Colors close by will clash to people who see colors normally.

Triadic Colors

When three colors are located on the color wheel with equal spacing between each other, they form a color triad. These colors are quite harmonious, and look nice together. However, you start to look like the color wheel, which Queer Eye has taught me is not a good thing. It’s hard to find a color triad that really conveys any particular emotion. Personally, I wouldn’t use a triad unless I was designing for a children’s Web site.

The most common color triads are red-yellow-blue and orange-green-purple, which are the primary and secondary colors I mentioned above.

That’s Nice, But I Like Cheating

Another great thing about digital design is we can so easily steal color palettes from the everyday world. I bring my camera with me everywhere I go and when I see something that looks nice, I take a picture of it. From magazines to street fashion, billboards, and nature, there are amazing color palettes available for the taking all around.

By opening any picture in my graphics program of choice (which happens to be the GIMP for Linux), I can easily use the color picker to find the hexadecimal codes of the colors in the image. I can then paint these into a palette and voila!, I’m good to go.

I don’t generally use sites as inspiration for my color palettes. It’s too easy to end up using the colors the exact same way. It’s difficult to be objective when someone has already done the work for you.

The Briefest Possible Note on Web-Safe Colors

As you probably know, there is a list of colors generally considered safe for the Web. These colors simply represent those that old 256-color monitors can display. The discussion about how much we need to worry about Web-safe colors dates back a few years: see “Web-Safe Color Palette Discussion” from May 17, 2001.

For color blind designers, there’s no easy way to take the Web-safe path. I simply stare at my list of Web safe colors next to my choice colors, and hope to God that I’m right. Then I ask my partner, who sees colors very well.

Tips for Non-Color-Blind Designers

Now let’s examine a few things color-sighted designers can do to make the Web a little friendlier for those of us who don’t see the rainbow to its full potential. It’s important to understand that no one sees the world exactly as it really is. The human brain can only comprehend a fraction of the visual world. We’re largely ignorant of our surroundings. Color-blind people are just a tiny bit more ignorant of our surroundings.

Even color-sighted people interpret colors differently. So if you’re waiting for a quick-and-easy solution to make everyone see the same thing, keep dreaming. Luckily, as Web professionals and used to the idea that everyone is going to see our work differently depending on their computer system. Color-blindness just adds an extra layer to that frustration.

Prioritizing

The first thing to do before creating your color palette is to determine which items on your page contain the most important and the least important content. The more important the content, the more critical it is that it is color-blind safe. Prepare this list wisely, though. You may think a subheader isn’t that important, but since most people scan Web pages, an inappropriately colored subheader means I won’t be able to read your carefully colored content.

Any text that requires users to look at it for more than two seconds should be very high contrast. I strongly recommend all content areas be given a monochromatic palette with the text and background on opposite ends of the color-saturation pole. Black text on a white background scores huge points. I know black and white isn’t the prettiest combination. It’s boring, overdone and conveys no emotions. Unfortunately, a lot of beautiful layouts force anyone with color deficiencies to struggle just a little more than necessary to read the content. In other words, black and white is overdone for a reason—they work well together.

Menus, headers and subheaders can be given a bit more flare. No one stares at a navigation menu for half an hour. So all those pretty colors you wanted to include in the content area can be used in everything surrounding it. You can still convey all those emotions by framing your content in color. However, it is always important to contrast information from its background. Menus can be pretty and all that jazz, but I still need to navigate.

Therefore, in all situations that do not involve the main content area, use whatever colors you feel are best but ask yourself two questions:

1. Does the text contrast well with the background?
2. Is my scheme based on one color, with contrasting variations?

That second point is the key. For most people, red and green contrast very well. But red and green are common color deficiencies. For example, if you use purple, brown or orange, all of which have red in them, I’ll get lost. What seems clear to most people may seem blurry or indistinguishable to others. After two years, I just found out my workplace is painted in three different colors: green, beige and yellow. I had no clue.

Wrap Up

This is just a primer to color theory for color-blind designers and Web users. For more interesting information on how colors make us feel, try Googling “color psychology”—it’s a huge topic that deserves continued research.

The logic and science of colors can be applied regardless of color-seeing ability. There’s no need to experiment and go with what just “feels right” if we take the time to understand colors. If you know your organization or client, you can describe it with adjectives. Selecting a color palette is an extension of that knowledge and of good design skills.

Even the novice designer can take the time to use a scientific approach to color selection. The more we know, the less we have to guess.

Related Topics: Color, Accessibility, Web Design