Designing For, and As, a Color-Blind Person

Color blindness is a mild disability through which the affected experience a decreased ability to distinguish colors from others. This can be a real drawback for anyone in the design field since color theory is an integral feature in successful design, and a lot of decisions are based on the feeling and emotion derived from design decisions, rather than a generic set of guidelines and taxonomies.

You’ve probably heard a lot about accessibility in web design already; it’s important to cater for the widest audience, who could potentially have problems with your website if not designed in the right way. As a bonus, we’ll touch on that a bit later, but the main focus of this article is actually looking at how a color-blind designer can still successfully tailor a website’s design.

In today’s article, we’re going to look at how color-blind designers can still create a successful case study for good use of color and how non-sufferers can still take into account the needs of their color-blind audience.

Understanding Color Blindness

As I said before, color blindness is a mild disability in which distinguishing color can be an issue. In a nutshell, people with color blindness can’t identify certain colors amongst similar others, or just none at all.

There are multiple types of color blindness. Total color blindness (“monochromacy”) is a very rare condition, in which people only see different tones and brightness levels, with no color at all. However, more common cases are an inability to recognize blue/yellow or red/green, with the latter being the more common of the two.

Tests have been developed in order to recognize color blindness, normally by asking the potential suffer to recognize a message comprised of dots. Sufferers and non-sufferers will see different messages, allowing one to determine if they are a sufferer.

What do you see in this circle of dots? Unaffected persons should see the number “74″, but those with the condition might see 21, or nothing at all.

Hopefully the image above better represents what I’m trying to get across. Your colors can be perceived differently by the two different groups (sufferers and non-sufferers), therefore invalidating your unmodified color scheme. One person might see 74, but a sufferer could completely miss it and allow it to go completely off the radar.

A Little Bit About Color

We already have an article here at Webdesigntuts+ on color theory, which you should probably have a read of before we continue. Thomas Cannon does a darn good job at explaining what color theory is.

Color theory actually covers a number of things, but at the most basic level it is the interaction of colors in a design through complementation, contrast, and vibrancy.

As you’re probably aware, colors on the web are generally referred to as a hexadecimal code; something like #ff0000. Our browser then intelligently translates these into RGB values, in order to render the color that we have asked it to show up. If you want to dive in a little deeper, hexadecimal codes are actually very interesting, as you can break it down in order to find out the specifications for red, green and blue, thanks to the values ranging from 0-9 or A-F.

Thankfully, creative types have had a pretty great tool for a long time to help them work out what colors look good together: the color wheel. The color wheel is a donut-like shape of colors, stemming from the three primary colors: red, yellow and blue. It’s beyond the horizon of this article to go into too much detail here (and, plus, I’d be walking in the same footsteps at Thomas), so I won’t go much further than saying that this wheel can help us determine which colors have a natural chemistry.

A color scheme is simply a logical set of colors that go together, and these stem from the color wheel. There’s a handful of different methods for picking out colors in the color wheel, which you can learn about in the latter half of Thomas’s article.

Now we know a little more about how color, and color schemes, work, let’s actually look at how we can “assume” schemes that will naturally fit together.

Designing As: Monochromatic Colors

Monochromatic color schemes are not to be confused with monochromacy. Monochromacy is the color blindness we talked about earlier, which is very rare and makes the sufferer only see a single color, in multiple shades. Monochrome is, in fact, intended to be in such a way, with designs consisting entirely of a single color in multiple shades, versus using multiple colors.

Using a monochromatic color scheme is not necessarily a hindrance. In fact, it can be a great advantage to give unity within your design. What about black? Sure, you could class black as a second color, but you can still achieve similar contrast with just using a very dark variant of your chosen color.

Achieving contrast is super simple when using a monochromatic color scheme. Since those with color blindness can still recognize different shades of color, introducing contrast is no problem since it is recognized in the same way.

Of course, a monochromatic color scheme can be used with any single color and can be quite effective in that way. However, for those that instantly thought “black and white” when I mentioned monochrome, that’s effective too. A lot of minimalist sites use a grayscale color scheme, which should be no problem for anyone to view in the intended way. If you want to stay safe, grayscale can look awesome, as long as it fits into the overall tone and feel of your design.

Designing For: High Contrast

High amounts of contrast is really important here because it’s a great way of creating a consistent color scheme, without actually having to bother about the color park. We can create very light to very dark shades of a single color, giving us a wealth of different values to use. For example, if you were using a light blue for your background, you’d want to use a much darker blue for the text in order to keep your text legible.

Using monochrome offers color blind visitors a way of easily appreciating your design, even if they can’t necessarily identify the intended colors. However, high contrast offers a great deal of readability improvements to any user and is a designing principle we should be aware of away from accessibility.

Designing For: Hue, Saturation & Brightness

Like tweaking contrast, modifying the hue, saturation and brightness of colors can help us show definition and allow users to distinguish, without using multiple colors. By sticking with a small set of colors, or even just one, changing the saturation can really show a distinguishing contrast within two samples of a color, as can brightness and hue.

These methods allow color-blind designers to easily define different bits of their design through color, without having to worry too much about the aesthetics as if they were adding a new color to the mix. For the color-blind visitors, this allows for distinguishing different looking parts easily.

Both these examples started out as exact duplicates. However, the hue has been turned up slightly on the right.

Designing As: “Borrowing” Colors

This is mainly a tip aimed at color-blind designers, rather than those simply considering their color-blind audience.

It’s incredibly easy to “borrow” colors from fellow web designs, or other non-web-based designs nowadays. By simply pulling out the eyedropper tool from our arsenal of graphic editing tools, we can easily identify colors within a design and start using them in ours. “Stealing” color schemes can be a really effective way of identifying what works well and replicating it in a different form while maintaining the successful intentions of a successful scheme.

Of course, this is kind of cheating, but not so much that it’s stealing. We’re simply picking out colors in web designs that work well, and not going in and lifting entire elements. Fortunately, color isn’t copyrighted.

Once we’ve identified colors and got them represented by hex values, we can use it in conjunction with other methods (such as using a single color with multiple shades, as detailed above). It might be harder, but do make sure you vary your palette and invent it yourself, without lifting the entire scheme from another’s design.

Designing For: Selecting Colors with Specialist Tools

If you’re designing while taking into account color-blind persons, there are a couple of online tools that will allow you to simulate individual colors under color-blind circumstances.

These tools offer some insight into what color-blind visitors will see, and allow you to carefully select colors by making sure they look good for regular and suffering visitors. The first tool, the Color Laboratory, actually allows you to check out how colors look in conjunction with each other so you can easily create color schemes that work well for anyone – sufferer or not – on any operating system.

The second tool is a simple form that allows you to paste in your HTML and swap out hexadecimal color values with the color-blind equivalent, allowing you to easily tweak them in order to create a palette that is appealing to sufferers and non-sufferers alike.

Designing For: Don’t Associate Color with Feedback

Next up is a tip mainly aimed at designers considering their possible color-blind audience. We naturally assume certain feelings with color, such as red with danger or green with safety. Using this principle within our web designs is a great way of immediately associating the result of a certain action, but only to those with regular vision. Your color-blind visitors might not make the instant association, suggesting you need to integrate some additional method of warning, or praise.

This is more of a usability point, but it’s one you should probably take notice of in order to minimize user frustration. Of course, colorblind people are not completely blind to color. Instead, they see different colors than what we see and have, therefore, naturally associated different colors with different messages. However, it’s a lot easier to ensure recognition through other means too.

Bonus: Use the Colorblind Web Page Filter

Designing for the colorblind can be troublesome for designers who aren’t actually colorblind. How do we take into account accessibility when we do not suffer from the condition in hand?

Luckily, there’s a handful of accessibility “simulators” available on the web where a web page is rendered in a certain way. The example below, named pretty generically as the “Colorblind Web Page Filter“, takes your site and filters it as if you were color blind.

The tool is still in development and it can take some time for a render to become available for viewing. However, the range of color filters available is fairly extensive, covering all major types of colorblindness.

Another simulator for previewing what a color-blind audience would see is Vischeck, allowing you to preview a live webpage, or some images, in one of three types of color vision deficits. It even has a tool that will correct images so color-blind viewers can see them naturally.

Conclusion

Color blindness of any sort is not a rare problem that only affects a handful of people. In fact, it’s a widespread condition that many people encounter in their every day lives. We should, as web designers, try to take into account these visitors as best we could. If we use color, in conjunction with a well organized layout, being color blind shouldn’t be a problem, in terms of readability or aesthetics.

The effects of color-blindness will be most felt when it’s the designer who suffers. Luckily, we can design in monochrome and create a universal, aesthetically-pleasing design by using contrast over multiple colors. It turns out, contrast is key. As a designer, this should not be something we don’t know already, as contrast is a key in the legibility of a design.

Of course, we understand that any design – monochrome or not – should have high levels of contrast to increase the legibility of elements on a page. However, we can “cheat” and borrow colors, or use one of the aforementioned tools to create color schemes that will automatically work for everyone.

Luckily, color blindness isn’t a massive complaint on the web, as it is in some other fields. By learning some color theory, we can assume schemes without even seeing them through the right eyes, allowing you to get perfect results each time.