E-learning is a visual medium. Whether you’re creating a fun, game-based scenario or a basic quiz, the visual design of e-learning sets the tone for the experience.
When designing accessible e-learning, there are some additional considerations to keep in mind to ensure your course design is accessible. One of those considerations is contrast.
In this article, we’ll talk about what contrast is, why it’s important, who it impacts, how to measure it, and how to ensure your e-learning courses have the optimal levels.
What Is Contrast?
When we talk about contrast in the context of accessibility, we mean the difference in brightness between two colors. To describe this difference, we use ratios.
For example, white text on a white background would have the lowest possible contrast ratio—1 to 1 (1:1)—since there’s no difference between the background and the foreground. On the other hand, black text on a white background has the highest possible contrast ratio—21 to 1 (21:1).
As you may have gathered, the bigger the first number, the more contrast there is between the two colors, and vice versa.
Why Should You Care?
If the contrast levels between your text or buttons and the background are too low, some of your learners might struggle to see—and therefore understand and interact with—your content. And since that’s the whole point of the course you’re designing, that’s a big problem.
Not to mention, depending on your country and organization, you may be legally required to follow contrast guidelines. Failure to stick to these guidelines could result in a lawsuit.
For information about the applicable laws in your country, check out this resource: Web Accessibility Laws & Policies.
Who Benefits When You Optimize Contrast?
People often think accessibility features like optimal contrast only benefit a small group of people. They wonder if it’s worth putting in the extra effort for just a few learners. But the reality is the range of people who find these features helpful is quite large.
Optimal contrast doesn’t only benefit people who were born with low-vision impairments. It’s also great for people whose vision is getting worse with age, and those who are viewing your content outside on a sunny day or in low light. And even people with no visual disabilities in perfect lighting conditions appreciate designs with optimal contrast. They’re just easier on the eyes.
Look at the images below, for example:
Do you see how much harder it is to read the text on the left? That’s because the contrast ratio is too low, so the text blends into the background.
Accessibility features like optimal contrast benefit not only those who need them to access your content—they benefit everyone.
What’s the Ideal Contrast Ratio?
When it comes to accessibility, higher contrast is generally better. However, it’s best to avoid the absolute highest level of contrast—for example, black text on a white background, or vice versa (21:1)—because it’s too harsh and can cause eye strain. Instead, try swapping the black out for dark gray to make it a little easier on the eyes.
Take a look at this side-by-side comparison to see for yourself what a difference this small change makes:
Obviously, there will be times when you want or need to use colors other than white and dark gray. For those times, you should aim for a minimum contrast ratio of 4.5:1.
How do you know if you’re meeting that contrast ratio? Keep reading to find out!
Measuring the Contrast Ratio
It’s important to measure the contrast ratio using a dedicated tool—and not just trust your own perception. After all, everyone perceives things differently depending on a variety of factors, including our vision and lighting.
Take a look at the example below:
To me, the contrast ratio for this slide seemed pretty good! The white text appeared to stand out well against the dark pink background. But when I put the colors into my contrast checker, I was surprised to see that the contrast ratio wasn’t quite high enough.
As you can see in the screenshot, these colors have a contrast ratio of 3.36:1, which is below our target of 4.5:1. Luckily, my contrast checker also suggested an alternative color that does meet the target contrast ratio, making it super easy for me to adjust my design.
Here’s what it looked like after I applied the suggested color:
When you compare these images side by side, it’s easier to tell the second version is better, but it’s still not obvious. That’s why it’s essential to use a contrast checker.
The good news is that there are tons of free tools out there that allow you to measure contrast. All of them have slightly different features and use cases. Here are some of my favorites:
- Polypane is a web app that not only tells you if your contrast ratio is high enough, it gives you some options if it’s not. The only downside is that you have to input HEX codes instead of simply using an eyedropper.
- Colour Contrast Checker is a Chrome extension that allows you to check the contrast ratio using a handy eyedropper tool.
- Color Contrast Analyser is similar to Colour Contrast Checker, except that it’s a desktop app. It works on both PCs and Macs.
- Material Design Color Tool is a web app that allows you to play around with color schemes while making sure the contrast ratio is on point. It’s a great tool to start with if you haven’t decided on colors yet.
There are tons of other free color contrast apps out there. If you’re not satisfied with these, do a quick search and see what else you find.
Design Considerations
The Web Content Accessibility Guidelines (WCAG) for contrast* can feel overwhelming. That’s because each criterion outlines not only the main guideline, but also several exceptions.
The good news is, if you hold yourself to the main guidelines—and ignore the exceptions—it’s easier for you to remember what to do, and makes your course better for your learners.
With that in mind, when you’re designing courses there are four main things to remember when it comes to contrast:
- All text should be at least size 12.
- All text should have a contrast ratio of at least 4.5:1** to the background.
- All parts of the interface (i.e., buttons) and graphics required to understand the content should have a contrast ratio of at least 3:1 to both the background and anything touching them.
- Graphics that are purely aesthetic and don’t contain text or convey meaning don’t have any contrast requirements.
If you stick to these rules, you should be all set from a contrast perspective.
Let’s take a look at an example.
This is a menu slide, so each of these squares are clickable and therefore considered to be part of the interface. That means that not only does the text need to be sufficiently contrasted against the button color (4.5:1), but the buttons themselves need to be sufficiently contrasted against the background color (3.1). If the buttons were touching, they would also need to be sufficiently contrasted from one another (3:1). Since there’s a space in between, that’s not necessary.
To help you take contrast into account from the very start, use this color scheme design template or an accessible color palette builder app like this one.
Wrap-Up
Designing your course with contrast guidelines in mind is about more than just checking a box on your long list of accessibility requirements. It’s about making sure all learners can read and understand your content. What could be more important than that?
Follow the tips outlined in this article and be confident that you’re set when it comes to contrast. However, if you want to dig into the details of the related WCAG guidelines, check out this WebAim article or the criteria links in the footer of this article.
If you’re looking for more advice on designing accessible e-learning courses, be sure to check out these helpful resources: All About Accessibility.
Subscribe to our newsletter to get the latest e-learning inspiration and insights directly in your inbox. You can also find us on LinkedIn and X (Formerly Twitter).
*WCAG 2.0 Guidelines for Contrast:
**According to the guidelines, large-scale text can have a contrast ratio as low as 3:1, but we simplified it here to make it easier to remember and because a higher contrast is better.
Published 4 years ago
Version 1.0
