Make Designs More Legible

Design Vitamin has always been conscious of our designs and how they are perceived by the color-blind population.  We like to share our tips for making designs legible for all viewers.  The color-blind have the inability to clearly distinguish between different colors, they tend to see colors in a limited range of hues.  Far more accurate terms include “color impaired” or “color deficient”.  Because of this, the color-blind have trouble with a lot of websites, signs, games or anything else involving color.

blindness is a mild disability that affects about five to eight percent of males (approximately 10.5 million) and less than one percent of females.  That’s 1 in 20 visitors to a website that may see text as barely legible (or not see it at all) and the images may be unrecognizable.  And don’t forget the growing senior population, who often have the same difficulties with visual impairments (e.g., differentiating text and site elements).

As designers we can make wide generalizations about what color-blind users do and don’t have trouble perceiving.  The best ways to design for this group is to use highly contrasting colors, implement patterns, apply symbols, and use tricks with strokes, shadows and make sure there is significant visual difference.

The Use of Color for Emphasis

Colors are not the only method of conveying important information.  Not everyone is able to perceive the difference between the text by emphasizing important phrases in coloring them differently colors.  Instead of relying on color to convey emphasis, consider the use of techniques that make text visibly different in some other way, such as bolding or italicizing, so the importance of the phrase is not lost.  Similarly, <strong> tags will suggest to search crawlers that a phrase is important.

Contrast is Key

The color-blind have the inability to clearly distinguish between different colors, they tend to see colors in a limited range of hues.  For example, someone with average vision will see three similar shades of green, a color-blind user might only see one shade of green.  Design in monochrome and create a universal, aesthetically-pleasing design by using contrast over multiple colors.  Also, inadequate contrast can make reading difficult for readers with other vision problems, such as shortsightedness.

“One trick I have been using for years is to desaturate the image.  When all the colors are removed, there is only the contrast of the grays to distinguish separations, this is a quick and easy way to tell if the image is still useful.  This is not only helpful in designing for color-blind, but is always an excellent and effective design technique.” -Nicole Allen founder at Design Vitamin

Color Combinations

Certain color combinations in color-blind users either won’t be notice or will be mildly annoying.  Contrasting colors or colors on the opposite ends of the color spectrum work best for color blind users (e.g., white and black is the best example).  When in doubt, exaggerate the difference between the foreground and the background and avoid using colors with similar lightness no matter how they differ in saturation or tone.  Color-blind users can perceive brightness shifts, for the most part, just like those with average vision.  On a hover effect, a really dark blue and a really light blue will be an obvious switch, very different in relative brightness.

Patterns and Shapes

Add a little pattern, texture, and/or shapes to different parts of a design can make for easier visual differentiation.  Even if the colors are similar enough where no difference is seen, adding stripes will make for an easy visual reference.  Combine the use of different shapes with varying hue and saturation, even if the color is not perceived the different geometric shapes will still be legible.

“A great example is a deck of playing cards, games often rely on the difference between red and black suits.  The red symbols (hearts and diamonds) come to a point at the bottom while the black symbols (spades and clubs) have that little flat handle.  Also, the contrast between red and black is more than enough to allow players to notice the difference, even if red looks a little more brown or yellow.”

Tools to Make Designing Easier for Color-Blind Viewers

Photoshop and Illustrator, use the feature under the View menu, go to Proof Setup sub-menu.  This section lets you preview how your image will look in different color modes.  For instance, designers can use CMYK to see how something might look in print.  There are two options relevant to color blindness, Color Blindness — Protanopia-type and Color Blindness — Deuteranopia-type.

Color Blindness Simulator, these can be really helpful to see the overall experience.  Color Oracle has a free color blindness simulator for Window, Mac, and Linux.

Colorblind Web Page Filter, this website allows a user to plug in the URL address and choose the visual impairment, the website will convert the view to the specified color deficiency.

Please take a look at this article for a more in depth description Designing Maps for the Colour-Vision Impaired.  The article concentrates on red-green color confusion, (most common form) and suggest how maps can be designed to consider this user group.