Why is user accessibility important?
Maybe you’ve heard of the recent lawsuit against Domino’s Pizza, which didn’t make its site accessible through a screen reader — and to be fair, Domino’s isn’t the only one. Traditionally, accessibility has been more of an afterthought or a “nice-to-have” element in many organizations’ design plans. Hopefully moving forward, we’ll see a greater trend in planning and incorporating Web Content Accessibility Guidelines as a basic part of the design process.
Just as any business would not want to keep someone with a disability from entering its store, the same holds true for websites. The internet is, after all, a public place. And as designers, we have an ethical responsibility to make sure that what we design is functional for everyone.
A very simple way to begin is to pay attention to the use of color on your site.
Know your compliance level
The standards on color are basically all about contrast. Below is an extremely simplified checklist that should not be taken as complete — read here for the full and detailed list with examples and further information. But at the heart, it’s this:
Seems pretty simple, right?
First, check what standard your client or project requires. There are three levels of compliance ranging from A to AAA (the highest). Discuss this with your team to make sure everyone is on the same page.
Conveying information with more than color
Don’t indicate something by use of color only. Imagine a screen reader is going through your site, interpreting to someone who is blind. Would that person know what to act on?
The basics are:
- Links: Don’t indicate a link or action using only color. Show an underline or some other kind of visual differentiation.
- Error messages/form info: An error in a form shouldn’t only be indicated by a red outline alone, but also by descriptive text and an icon, if possible.
- Maps/infographics: Imagine a subway map that’s been photocopied so you can’t tell the lines apart, or an infographic that says “the red bar shows the time of departure” but doesn't label which line that is. There must be an additional way for the user to gain the information they need or your graphics can miss their target.
Note that none of this applies to light and dark values that are indistinguishable from each other. When two colors have the same value, a person who is visually impaired may not be able to tell the difference between the two. For instance:
Both sets of buttons are red and green and show two different choices. While the red is the same in each choice, the green is darker in the left set, and brighter in the set on the right - but still indisputably red for option 1 and green for option 2.
Here’s what the same button sets look like to a user who has red-green color blindness:
Notice how the set on the left now looks like pretty much the same color, while the set on the right is clearly visible as two distinct shades of color.
It’s all about the contrast
Use contrast ratios to ensure your colors have enough contrast for the visually impaired and the colorblind. The contrast ratio describes the ratio of the luminance of the foreground color against the background. You should aim for a contrast of 7:1 for smaller text, or 4.5:1 for text 18pt and above to reach the AAA standard. (Again, please refer to the full list for concise information and examples.)
There are several different contrast checkers available, many for free, and some of which can work right with your design software. Our favorite is ContrastChecker.com, which is free to use, keeps a history, and allows you to export and share findings with your team. To illustrate how you can check for contrast, let’s test the following circles.
In the example above, our red circle (“ONE”) with a background of #B50000 and white text has enough contrast to pass all levels because its contrast ratio is 7.08:1.
Testing our green sample “TWO,” with background #02850F and white text, shows that the color passes for the way we’re using it because the text is 18pt or higher. But notice also that it doesn’t pass for other levels. The ratio here is 3.29. Again — this is where your specifications for the site will let you know how stringent you need to be in each situation.
And now for the pink circle with white text, sample “THREE.” It fails across the board with a ratio of 1.7:1.
So what can we do about it?
Option 1: Tweak the background color until it’s dark enough to have a better contrast. This could work if you want to keep the background pink but you’re not picky about how dark it is. In our example below where the background is #96006C with white text, it gives us a ratio of 8.36:1, which meets the AAA rating.
Option 2: The simplest option is to change your text color to something with more contrast. Making the text black on our original background of #FFACE8 provides the contrast needed over and beyond the requirements with a 12.32:1 ratio.
The golden rule of color accessibility
This is the simplest guideline to follow: Don’t make any styles that impede the use of reader accessible technology. Readers can overwrite your foreground or background colors to make your content clearer, even if you’ve missed something.
With the tips above and the resources included below, you can easily make accessibility a “will-have” or “must-have” element in your next design project. Remember, just a little consideration and planning can go a long way toward making the internet a more welcoming public space, and toward making your content available to a wider audience of readers.
HELPFUL LINKS
Web Content Accessibility Guidelines (WCAG) 2.1 section regarding color usage with explanation and examples.
My favorite color checker as noted above: Contrast Checker.
Another accessible color palette builder where you can compare and contrast your choices.
I find these user stories really interesting to see how differently-abled people may interact with content.
Stark Plugin works right inside Adobe XD, Sketch, and Figma to help you make better color choices on the fly.
