As a graphic designer, document designer or web designer, understanding the WCAG color and contrast accessibility guidelines will help make your designs more inclusive and accessible to sighted individuals with or without a visual disability.
In this episode of Design Domination, I’m going to break down the color and contrast guidelines into plain English.
If you’ve ever made your way over to the Web Content Accessibility Guidelines, which we call “WCAG” (wih-cag) for short, you might have felt overwhelmed. There are a lot of guidelines and explanations that can easily make your eyes glaze over. Some of them are confusing or ambiguous. Some make you wonder, “OK, but what the heck do I do with this information?,” leaving you with more questions than answers.
So I want to help you understand what they mean and some of the things that they apply to, so you can make your designs more accessible to everyone, which means your work will also get better results.
Understanding Color and Contrast Guidelines
If you’re just getting into accessibility or looking to make your designs visually accessible, you need to understand and adhere to specific accessibility guidelines that pertain to color and contrast.
There are several WCAG guidelines about color and contrast.
Luckily, the ones that apply to color and contrast are very clear and easier to understand. Even though they’re called Web Content Accessibility Guidelines, you can apply them whether you’re designing a website, document, infographics or other data graphics, or an app that you need to make accessible.
Level of Conformance
First off, you have to find out which level of conformance your client or place of work needs to adhere to. That is, if they have a legal requirement to produce accessible content.
That’s because there are 3 levels of conformance you can comply with—A, AA and AAA. A is the lowest level and AAA is the highest.
The typical level of conformance to meet to comply with accessibility laws is AA. That is also the default if they don’t have a legal requirement.
Sometimes a client may have a federal and a state requirement to comply with accessibility laws. But sometimes a company may have specific internal accessibility preferences, and these may go beyond the guidelines. That’s totally fine. That’s why we always need to ask what their requirements are.
Use of Color
WCAG 1.4.1 Use of Color
Let’s talk about use of color.
How you use color is one guideline that WCAG covers. It falls under 1.4.1 Use of Color and level A. So that means it’s a very basic requirement and very important.
Whether you have to comply with A, AA or AAA, you will need to meet this requirement.
These guidelines say that you cannot use color as the only visual means of:
- conveying information,
- indicating an action,
- prompting a response or
- distinguishing a visual element.
If content relies on color alone to be able to be read or understood, then it’s not accessible.
The reasoning behind this is so that individuals with low vision, color blindness or another visual disability can still make out what something says or knows what to do.
For example, think about a pie chart with a legend. Some individuals may not be able to discern the pieces from one another or read the text on top of the pie pieces.
Another example: Think about text that might say to click a red button. That button won’t appear red to everyone. It could appear green or brown to people with color blindness.
WCAG also has guidelines that relate to contrast between text and the background color it appears on.
WCAG 1.4.3 Contrast Minimum
The first guideline is WCAG 1.4.3 Contrast Minimum.
This is a level AA guideline. It says that text and images of text that are normal size need to have a minimum contrast ratio of 4.5 to 1 with the background.
Text that is what they call “normal” size is any text below 14 points (or about 18.66 pixels) and bold, or below 18 points (or 24 pixels) of any weight.
But if the text is large, then there is a lesser requirement, and that’s 3 to 1 instead of 4.5 to 1.
Large text is text that is at least 14 points or 18.66 px and bold, or at least 18 points or 24 pixels any weight.
WCAG 1.4.6 Contrast (Enhanced)
There is another guideline that pertains to the contrast of text, and that’s WCAG 1.4.6 Contrast (Enhanced).
So the one I just mentioned was Contrast Minimum, and this one is Contrast (Enhanced).
This is a AAA guideline. Needing to adhere to WCAG AAA is not very common. But if you need to, then this guideline applies.
WCAG 1.4.6 Contrast (Enhanced) ups the contrast ratio for normal text from a minimum of 4.5 to 1 to at least 7 to 1 and large text from a minimum of 3 to 1 to at least 4.5 to 1.
Remember when I mentioned that some clients may have some internal accessibility preferences?
Well, I actually recently had a client who needed to meet AA conformance but requested that all text meet the AAA requirement for contrast. So that meant that text of any size had to meet the 7 to 1 contrast ratio—even large text. So that was even stricter than what AAA calls for.
WCAG 1.4.11 Non-text Contrast
Now, text and images of text are not the only things that contrast guidelines apply to.
That’s because sometimes we have elements that aren’t text that convey meaning, which means sighted users, regardless of a visual disability, need to be able to see them to understand the content.
This is where WCAG 1.4.11 Non-text Contrast comes in.
This guideline is AA and applies to graphical objects and user interface components, which need to have at least a 3 to 1 ratio of contrast against their adjacent colors.
Let’s break this down.
First off, what the heck are “graphical objects and user interface components”?
Let’s start with graphical objects.
We often use graphics in place of text to convey information, right?
We might create infographics and use icons and symbols in place of text.
We might create a line graph. In a line graph, we use lines to convey data. All sighted users would need to be able to see the lines but also distinguish them from each other. Otherwise, they wouldn’t be able to understand the chart.
We might create a pie chart where we have text on top of the pie pieces and where we’re using color to distinguish each piece from the other in the legend.
If someone cannot differentiate each piece of the pie from the other, they will not be able to understand the information that is being conveyed.
They could make assumptions, or they might misinterpret the data.
Now what about user interface components?
An example of those would be what we use to show that text or another element is a hyperlink. For instance, if we use an underline for hyperlinks. An underline isn’t text, but it says, “hey, this is a hyperlink.”
User interface components could also be form field boundaries, so someone knows where to type in the information. Someone with a visual disability may have a hard time seeing which field they’re in.
No Contrast Requirements
It might surprise you to know that there are many elements that don’t have any contrast requirements.
As for right now, there are no contrast requirements for:
- logos, although it’s best if all sighted users can see a logo and read any text that is a part of it;
- decorative elements that don’t convey meaning, such as decorative borders or dividers or some icons;
- inactive user interface components, such as a button that is disabled and doesn’t become active until required fields in a form are filled out;
- any text that happens to be part of an image that isn’t meant to take the place of text, such as a street sign or text on the page of a book;
- heat maps; and
Now that you have a better understanding of the color and contrast guidelines, be sure to download my free guide, Essential InDesign and PDF Accessibility Tools, where I mention several different color contrast checkers. Those will help you measure the contrast ratio of text and non-text elements and tell you if they pass or fail based on what they are and what level of conformance you need to meet. You’ll also find out some of my other favorite tools for InDesign and PDF accessibility.