Creative & Accessibility

Color Accessibility in Digital Design

by | Jul 29, 2019 | Accessibility, Creative

At Blndspt, we work with an exceptional team that creates digital products to make experiences easier. Disability or not. We pride ourselves on our extensive accessibility knowledge. For the purpose of this article, however, I will focus on just one digital accessibility standard: COLOR ACCESSIBILITY.

A person who is not able to see color or distinguish between colors has a visual impairment. This is an accessibility issue that affects 1.3 billion people globally. In addition to official diagnoses, we all find ourselves with a visual disability at some point. You might be color blind, have an injury or find yourself in a different lighting situation. All of these situations give you a visual disadvantage at somepoint. It shouldn’t matter who is using your website, where they are, or how they are doing it. What matters is that they are able to use it.

—-

Accessibility in Digital Design as outlined in the W3C Web Accessibility Initiative states that

” when websites and web tools are properly designed and coded, people with disabilities can use them…

Web Accessibility is a complicated subject, and unfortunately, sticking to these standards is often seen as a barrier to innovation. Instead of focusing on the restrictions, I like to think of it as a design philosophy.  A philosophy that encourages me to make better choices, find empathy, and focus on what really matters to the design.

—-

Before we address how to work within W3C Standards in regards to color accessibility, here are a few key facts about vision impairment globally:

1. The World Health Organization states that, globally, it is estimated that approximately 1.3 billion people live with some form of vision impairment. (WHO)

2. Color blindness (color vision deficiency, or CVD) affects approximately 1 in 12 men (8%) and 1 in 200 women (0.5%) in the world. (NEI)

3. The majority of people with vision impairment are over the age of 50 years. (WHO)

It is estimated that approximately 1.3 billion people live with some form of vision impairment…

How to be in Compliance with Color Accessibility in Digital Design

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!

Color Accessibility is Important

Color is often overlooked and a huge web accessibility issue. If it’s important enough to be put on a page and seen then it needs to be clear.

If you are to takeaway anything from this article, being aware of contrast and color blindness are, to me, the most important aspects of being compliant with color accessibilitty standards.

Contrast is not only important for people with low vision, or color vision deficiencies, color contrast also affects people who are aging as well as people with perfect vision but in a different lighting situation that makes reading on a screen difficult.

When color is taken away, communication is lost and users who might be color blind will abandon your product.

—-

We all can find ourselves in these situations and as such, it doesn’t take much to make things confusing and often very frustrating as we try and understand what is right in front of us. If a user is unable to navigate a page, or read and understand page visuals, then we have failed at our jobs.

As Derek Featherstone, internationally-known speaker and authority on accessibility and web development has said,

“When something works for everyone, it works better for everyone.”

—-

Blndspt encourages comments and insights from our community! We host an A11y Community Forum for users to discuss all things accessibility related. Become a member and get involved today!

0 Comments

Submit a Comment

Your email address will not be published.

Leave the field below empty!

[BLNDSPT] Headquarters:

1553 Platte Street, Suite 300
Denver, CO 80202

Call Us:

(720) 574 - 9900

[ELEVATION] Headquarters:

1553 Platte Street, Suite 202
Denver, CO 80202