Blog Post

Discover
2 MIN READ

Storyline: 5 Accessible Color Themes

BWoods's avatar
BWoods
Former Staff
3 years ago

It’s amazing how much something simple—like thoughtful color choices—can improve the accessibility of your courses. Strong color contrast makes course elements easier to read and interact with. And considering how your design could be perceived by learners with different types of color blindness can help avoid visual miscommunication.

These days there are a wide range of online tools that can help you check how accessible a color palette is. But it can still take some fine-tuning to ensure your color selections are most effective. To help speed things up for you, we’ve created this download with five accessible color themes built right into the Storyline 360 file.

Created with the help of Contrast Grid and Coolors, these themes use high-contrast colors that learners with color blindness can easily distinguish from one another. In this file, you’ll also find a table for each theme that outlines which colors can be used together while maintaining a sufficient contrast ratio.

 

 

Here’s how to use the recommendations from the table to guide your design choices:

  • Using text on a background? Choose any pairing listed as Pass.
  • Is that text 18pt or larger? Your options broaden to both Pass and Large Text.
  • Are you placing two colors next to each other? You can also use combinations listed as Pass or Large Text.

Because design needs can vary, you’ll notice two approaches to the theme accent colors. Some alternate between light and dark colors, making them a good fit for content that features graphs or other tightly spaced design elements. Others use a gradual color shift, offering more options to display text on, but requiring space between each design element. Just choose the type that works best for your situation. 

Like a palette but need a different color order? It’s easy to edit and rearrange the theme. And if you want to swap in some different colors, Contrast Grid and Coolors can help check that your new picks are still accessible.

Explore this project.

Published 3 years ago
Version 1.0
  • Thanks Bianca, Really looks good and very helpful. Appreciate all the hard work on it. :)
  • Couldn't open the downloaded article to share because the extension is .story. Is it available as PDF?
  • JamesWooten's avatar
    JamesWooten
    Community Member
    I am confused - I thought red and green were the most likely colors to cause difficulty with the predominant form of color blindness. Why does the combo on the far right work then?

    Thanks
    • BWoods's avatar
      BWoods
      Former Staff
      Hi Robin. That's a great question! I did this quick screen recording to show you the testing tool I used to assess how these palettes would be perceived by people with different types of color blindness: https://360.articulate.com/review/content/661c8ce2-6e11-4e1f-a312-f83bfb126489/review

      I think this combination works because the green and red in this palette aren't pure versions of those colors. Instead, they're a blue-green and a magenta. Since they've got other colors mixed with them, they sidestep the problems of pure red and pure green being used together.
  • JamesWooten's avatar
    JamesWooten
    Community Member
    Thanks Bianca for taking the time to make and share these plus making the video to answer my question. Makes a lot more sense - plus I think this tool will be very helpful! Thanks again.
  • My courses must all pass formal 508 testing, no matter what colors I use, because I don't use the colors alone to convey meaning, and I make sure that the colors all have sufficient contrast. From that perspective, what is the utility of these specific palettes?
    • BWoods's avatar
      BWoods
      Former Staff
      Happy to help with that question. These palettes were designed to help people start out a project with a palette that's already had the color contrast testing done for them. So as long as they follow the pairing recommendations in the table that accompanies each color palette, their project will meet the accessibility requirements for color contrast.

      For people new to considering color contrast for accessibility, the goal is for these color palettes to make the concept more approachable. And for people who have experience doing color contrast testing, these palettes can speed up their e-learning development because that testing has already been done for them.