Friday, May 1, 2015

Accessible Color By Numbers

When I took my first design class in college, we studied elements and principles of design extensively. The majority of our class projects were done in black and white (or grayscale) to focus on the artistic value each had to any art piece. Obviously, we were all itching to get into color, but we had to wait until almost the end of the semester.

Color provides extra meaning to a design. Just like the other elements, color can create a mood or define a message. However, for a colorblind or visually impaired audience that meaning can be lost. That's not to say that color should be ditched for every design.

An audience that can view your design can still interpret some meaning as long as the colors contrast well enough.

What does that actually mean? For an audience with no visual impairments, that still means the colors should contrast enough to read words if words are necessary to convey a message. For example, if you provide event information in a light yellow against a white background, that content is not readily readable for even the most able person.

Have you ever walked up to a poster in just the right (or wrong) lighting, and noticed you can't read the information due to the glare on the poster? Some visual impairments replicate that issue even in good lighting. Providing enough contrast can help your audience see your information despite the "glare."

For the most colorblind among us, though, that means you are back to that grayscale design that still needs to convey your message. If any color is too close in similarity to another color when converted to grayscale, your content will achieve that "glare" issue that makes it unreadable. Similar issues occur when someone cannot see any combination of red, green, and/or blue.

I've previously mentioned in a number of articles a color contrast checker I use all the time: Colour Contrast Check. It takes the hexadecimal value, or HEX, of the color for the foreground and background and calculates their contrast ratio. To meet WCAG 2.0 AA compliance (which we are working towards with the upcoming Section 508 Refresh), all text and images of text must have at minimum a contrast ratio of 4.5 to 1 unless the text is large scale (3 to 1), purely for decoration, or text is part of a logo. To meet AAA compliance (far stricter standard that meets a larger disabled audience's needs), the contrast ratio minimum is 7 to 1, with a higher minimum for large scale text at 4.5 to 1. I try to stick to AAA, but we are not required to meet more than AA compliance at this time.

How many people reading that just went blank at the term "hexadecimal value" and ignored all the other math in the paragraph? Most of our design software for emails, newsletters, brochures, and everything in between allow you to choose colors based on RGB (Red, Green, Blue) values. Those values are often converted to hexadecimal values for use on the web, so most color contrast checkers use hexadecimal values. Let me apologize there because I'd love to provide you with an optionally RGB color contrast checker. When I get one, I'll let you know.

I have, instead, a compromise for you called Color Safe which is the designer's accessible color swatch picker.

It begins by asking you what your background color is going to be in (hiss) that hexadecimal value, what web-friendly font you'd like to use at what font size and weight (how bold the text is), and then it asks you which WCAG standard you want to use: AA or AAA. Again, AA will give you more color choices than AAA.

Beneath those options, you have a field of text that automatically changes based on your options above. You can also change it from the standard "The quick brown fox jumps over the lazy dog." phrase to anything you may be using in your message.

When you are happy with those starting options, you can Generate Color Palette which changes your interface to chose the color swatch for the foreground you may want to use, the RGB value (yay, finally!) or HEX value of that color swatch, the resulting text with those foreground and background colors, and last but not least, the contrast ratio based on your selected WCAG standard.

Below all that are the glorious color options you were waiting for. You can select primary hues to see what tints and shades as well as dullness or brightness comply under that standard. Select one and check above for the results.

Again, the awesome part of this application is that you can grab the RGB values that you can use in Word or Outlook, and so forth, once you have picked the colors you wanted.

If you are wondering how easy it is for you personally to distinguish colors, take this fun color acuity challenge! I was tired the first time I took it, so my score was a bit off. The next morning, I tried it again being more focused, and I got a perfect score. Just an excuse you might want to use if you want to challenge your friends.