Color Accessibility Rule #1: Don’t rely on color alone

I love the color red, but did you know more than 99% of all color blind people can not distinguish between red and green . In our culture, where red means stop and green means go, it is of utmost importance to be able to communicate this message with more than just color alone.

WCAG 2.0 has Rule 1.4.1 stating that color should not be used as the only visual means of conveying critical information. This includes, indicating an action, prompting a response or distinguishing a visual element.

—-

What does this mean and why does it matter?

Rule #1 on color accessibility means you must get all users to understand the message, without relying on color alone. If color is the only element to display meaning, in the instance of a red dot verses a green dot, the colors may not be seen and the meaning will be lost. In addition to visual impairment issues, a small percentage of users tend to turn color off on their displays or use text-only devices. In these instances, color would be lost.

—-

What can you do to increase understanding without color:

• Use another type of visual indicator, such as text labels or icons. When an error occurs, don’t rely on just text color changes, add an alert icon or emphasize the error with text weight or line weight changes.
• For text links, underlines are always a good idea. If underlines are not working with your design patterns, try bold fonts, a contrasting type color or stylize a text highlighter that outlines the link. These visual cues can do wonders in helping users understand where to click on the page.
• Use patterns, labels or different shapes to convey data. Elements with more complex information like dashboard charts and graphs can be especially hard to read when you only use color to distinguish the data.
• Print your pages in black & white. If you can still see everything and understand what to do on the page without color, then your designs are in excellent shape. There are also apps like Color Oracle and Photoshop tools that show you in real time what people with common color vision deficiencies see.

Color Accessibility Rule #2: Ensure Sufficient Color Contrast

According to the WCAG 2.0 1.4.3 to meet color accessibility compliance, the contrast minimum for text and images of text should be atleast a 4.5:1 ratio. This rule applies to “normal-sized” text between 15 and 18pts.

Exceptions to the rule include:

• Text that is larger than 18pts or 14pts bold: Your contrast ratio can go down to 3:1.
• Disabled states: This includes inactive buttons and menu items. Placeholder or ghost text for form fields are not exempt from this standard.
• Incidental text or images: Items that are pure decoration and not required for the message to be understood have zero contrast requirement.

—-

What does this mean and why does it matter?

The point of the 4.5:1 ratio is to ensure enough contrast between text and its background so that the message can be read even by people with moderately low vision and color recognition deficiencies. When color ratios fall below these standards, distinguishing text against a background becomes harder and harder for the user.

—-

What can you do to increase understanding without color:

As a designer, its hard to not fall in love with your color choices and combinations. There are so many colors to choose from and more times than not you pick colors you like, because, well, color is subjective. But as an informed designer, I can make color choices that inject beauty into the design and also provide enough contrast that the message is able to be read by everyone, ensuring universal accessibility.

There are two ways to go about choosing WCAG approved colors:

1. Pick a few colors that meet the project goals and run them through a couple color checkers.
Two that I use all the time are:

a. WCAG 2.0 AA Standards Contrast Checker 
This tool is my all-time favorite. You type in your foreground and background hex colors and it will provide a score for both regular and large text sizes in different conformance levels (A, AA, AAA.) This tool also checks for color brightness and grayscale contrast. If you don’t use hex colors or just have an image you want to check, this tool will also analyze uploaded images.

b. Web Aim
Web Aim is another tool I use, though less frequently. With this tool, it will also calculate the score in different conformance levels (A, AA, AAA.) It also allows for real-time color adjusting, so if I have a background color that fails to meet the minimal contrast, I can adjust the color on this page to find the value that will pass.

2. Start with only WCAG approved colors using colorsafe.co
This tool has completely changed the way I choose colors. For example, if I know from the start that I have a gray background, I can use this tool to find supporting colors that already meet the minimal 4.5:1 contrast ratio. You can fall in love with these colors, because they will always meet the requirements. Try it, you’ll love it!