Storyline 360: Two-Color Focus Indicator

Help learners keep track of the accessibility focus indicator when they use keyboard navigation. Choose two colors—one light and one dark—for the focus rectangle so it's visible against any background in your course (modern player only). In the following example, the focus rectangle uses white and dark blue theme colors, so it's easy to see no matter which background it's on.

Selecting Colors

To take advantage of the two-color focus indicator, install the July 2021 update or later, then follow these steps:

1. Go to the Home tab on the ribbon and click Player.
2. When the player properties appear, make sure you're using the modern player style.
3. Click Colors & Effects on the ribbon.
4. Select two Accessibility Focus Colors, preferably one light and one dark.

Tips for Choosing Colors

• The first color selector controls the outside color of the focus rectangle. The second color selector controls the inside color.
• The default color choices in each selector come from your theme colors.
• To meet WCAG contrast guidelines, choose colors that have at least a 3:1 contrast ratio. Plug your colors into a contrast calculator to determine if they pass the 3:1 requirement for non-text content (i.e., graphical objects and user interface components). You can use a web-based calculator, such as WebAIM's Contrast Checker, or one that you install, such as Colour Contrast Analyser (available for Windows and Mac).
• If you want the focus rectangle to be a single color, choose the same color in both selectors.

Compatibility

The two-color focus indicator is exclusive to the modern player style in Storyline 360. You can open, edit, and publish Storyline 360 project files in Storyline 3. However, the player returns to the classic style and a one-color focus indicator in Storyline 3.

When you open a Storyline 360 project file with a two-color focus indicator in earlier builds of Storyline 360, the focus indicator returns to a single color.

Learn more about compatibility.