Storyline 360: Modern Player Accessible Contrast

Article Last Updated

This article applies to:

Accessible content is more than just a nice-to-have, it’s a necessity.

As part of our ongoing commitment to making courses fully accessible to everyone, the modern player in Storyline 360 now meets and exceeds WCAG Level AA guidelines for visual contrast and color. With the March 2021 update, it’s easier for all learners to read text, decipher icons, perceive interactions, and navigate content.

This feature is turned on by default in new and existing projects that use the modern player. Just install Storyline 360 build 3.50.24668.0 or later and let it do the heavy lifting for you!

Note: This update doesn’t change any functionality of the modern player. It increases the contrast on player elements, so they adhere to accessibility guidelines.

Read on to learn the benefits.

Enhanced Contrast

Previously, some elements of the modern player interface had insufficient color contrast, which created barriers for people with a visual impairment. For example, someone with a color deficiency might not see subtle color changes and therefore miss key information.

Now, all controls and icons of the dark and light themes have optimal contrast, resulting in an inclusive interface that’s easier to see. 

Curious about which player icons and buttons have enhanced contrast? Examples include:

  • Player tab options (e.g., Menu, Glossary, Notes, Resources)
  • Player controls (e.g., Volume, Search, Captions, Seekbar, Play/Pause, Accessibility Controls, Scroll bar)
  • Navigation buttons (e.g., Prev/Next, Submit)

Check out these before-and-after screenshots. (Click the images to enlarge them.)

Before

After

Modern player in the dark theme without accessible contrast
Dark Theme
Modern player in the dark theme with accessible contrast
Dark Theme
Modern player in the light theme without accessible contrast
Light Theme
Modern player in the light theme with accessible contrast
Light Theme

Meaningful Communication

Information should be empowering, not overwhelming. 

With that philosophy in mind, we updated the modern player to clearly convey all player states and status changes to learners and screen readers. As a result, it’s easier for all learners to identify the state of each player element and always know their progress in your course—without relying on color alone. 

Here’s what to expect:    

Selected Slide Indicator

A rectangle appears to the left of the slide title in the menu for the selected slide, indicating which slide the learner is currently on.

Example of the selected slide indicator

Check Mark and Lock Icons

Check mark icons appear to the right of the slide title in the menu for selected and visited slides, informing learners of their progress.

Example of the check mark icon

Lock icons next to slide titles display when your course has navigation restrictions, guiding learners along the way. 

For restricted menu navigation, learners see this lock icon for slides they haven’t yet reached:

Example of the lock icon for restricted menu navigation

For locked menu navigation, learners see the lock icon as shown above for slides they haven’t yet reached, as well as this visited lock icon for slides they previously viewed:

Example of the lock icon for locked menu navigation

No matter the menu navigation type—free, restricted, or locked—learners see the check mark icon for selected and visited slides.

Hover Border

A border appears when hovering over slide titles and resources, helping learners stay focused.

Mouse cursor hovering over a resource item, displaying a hover outline around it

Selected Tab Indicator

A line is visible below the selected sidebar tab, making it more explicit for learners to see which tab they’re on. 

Line below the selected sidebar menu tab

Note: The selected tab indicator won’t show for topbar tabs.

Adjustable Volume Bars

The sound waves of the volume button instantly update to reflect the selected level, resulting in greater control and visuals of volume levels.

Cursor adjusting the volume slider up and down to display the interaction
Pro Tip: The color of some player elements—such as the selected slide indicator, selected tab indicator, and the volume controller—is based on the accent color you set in your player properties.

To learn how to customize the modern player, visit Choose Colors, Fonts, and Button Styles for the Modern Player.

Distinct Visual Cues

When you don’t depend on color alone to convey information, your content becomes more accessible for everyone.

The modern player now uses icons and other visual elements like those described above, giving people with low vision or color deficiency more options to scan and perceive content. 

This feature also improves the accessibility of your courses for learners who view them in direct sunlight or who enable warmer screen colors, which can cause colors to become less discernible.

Compatibility

The modern player is exclusive to Storyline 360. 

If you open Storyline 360 project files that use the modern player in Storyline 3, players will return to the classic style and default color scheme. Additionally, players will continue to use the classic player if you later reopen those projects in Storyline 360.

To learn more about compatibility, visit this article.