How Do I Develop With Color Contrast in Mind?

Does learning how to develop accessible courses feel overwhelming to you? You want to make sure that everyone can easily view and understand your content, right? That’s where WCAG 2.2 comes in. It’s a set of guidelines to help make websites and other digital experiences accessible to people with disabilities.

But, the WCAG 2.2 guidelines can be a lot to take in, especially if you’re trying to memorize them all! Don’t worry, you don’t have to learn everything at once. It’s best to start with something that’s easy to implement, like minimum color contrast. Ensuring proper color contrast not only benefits those with color blindness or low vision, it can also provide an overall better user experience. So, let’s learn how to do this as we answer this “as heard in training” question: “How do I develop with color contrast in mind?”

Develop With Color Contrast in Mind with the Articulate Trainer

WCAG 2.2 Success Criteria 1.4.3 and 1.4.11 are two of the guidelines that focus on color contrast to help make digital experiences (like e-learning) accessible to everyone, including those with visual impairments.

This means there should be enough difference between the color of your text and the background so that it’s easy to read.
This also applies to non-text items such as images and icons. These elements should have enough contrast with their background so they’re easily distinguishable.

So, how do we make sure our Articulate Storyline 360 courses meet these color contrast requirements? Let’s explore a few ways!

Getting Started

Begin by using a tool to help determine the color contrast levels of the element in your course. For example, the Color Contrast Analyzer will provide results for Contrast Minimum (Level AA) regular and large text, Contrast Enhanced (Level AAA) regular and large text, and Non-text Contrast. Most organizations target Level AA, which is considered the global standard.

Note: Revised Section 508 references WCAG Level AA in its standards. Therefore, when you strive for Level AA compliance, you are also making your course “508 compliant.”

So, how do each of these elements translate in Storyline 360?

Regular Text includes normal (body) text, sub-headings, button text, marker text, and so on.
Large Text includes slide titles and larger headings.
UI Components are interactive elements like buttons, clickable images or icons, sliders, dials, and things like that.
Graphical Objects are graphics that help learners understand the content, such as charts, graphs, and infographics.

Let’s explore how to incorporate color contrast in Storyline 360 for each of these elements.

Regular Text and Large Text

When adding text, we need to ensure that it has a contrast ratio of at least 4.5:1 for regular text and 3:1 for large text when compared to the slide background. For a more inclusive user experience, we prefer to use a minimum of 4.5:1 for large text as well.

Apps like the Color Contrast Analyzer (linked above) will allow you to verify contrast ratios, but you can also use web-based tools such as the Web AIM Contrast Checker.

Contrast minimum is fairly easy to accomplish on a solid background, but graphic backgrounds can be a little more tricky. If your background has varying colors (like an image), try checking the text when it’s over the lightest area. And if your text is dark, test it against the darkest part of the background.

In this example, even though the large text technically passes the contrast check, you may want to consider making it even easier to read by exceeding the minimum standards. You can do this by adding a transparent shape behind the text to increase the contrast ratio, as we’ve done in the example below.

User Interface Components (aka, Interactive Objects)

Similar to text-based content, you want to make sure that buttons and other interactive elements stand out from the slide background. Relevant visual components, such as interactive icons or text on buttons, should also be visible.

In this example, the buttons are a bit too close in color to the background, and the icons are hard to spot. It might be tough for learners to figure out what they can click on.

Experimenting with different colors and shades can help you achieve the maximum contrast within your template or brand standards. One handy tool that can help you visualize which color combinations meet compliance requirements is the Accessible Color Palette Builder.

This web-based tool allows you to compare up to six colors to determine which combinations can be used to meet the ratio of 4.5:1. Using the color palette tool, we can fine-tune these colors so that our slide meets compliance requirements while following our brand guidelines, (like our example below).

Note: Interactive elements often use states, so be sure to compare the text or graphic elements to the button’s background color on each state.

Graphical Objects

Non-interactive graphic elements (such as infographics) can be used to demonstrate ideas or to engage learners in understanding important concepts within a course. Developers often have difficulty determining which graphics are relevant enough to be considered vital to understanding. So, to be safe, it’s always a good idea to make sure all of our graphic elements meet contrast standards when possible.

In this example, the bar graphs used meet contrast minimum. While the data is shown as percentages, the comparisons in the bar graph make it easier for the learner to understand its meaning.

You may notice that the design feature in the upper right corner of the slide doesn’t meet standards for contrast. But, since it’s purely decorative, it’s not necessary for the learner to be able to perceive it.

Summary

By remaining aware of color contrast throughout the development process, you can ensure a key component of accessibility. And with practice, you’ll be able to almost instinctively identify when colors don’t meet those standards!

What’s your experience with using colors with proper contrast when designing slides? Feel free to leave a comment or contact us to share your approach!