Browse Articles
Select a Product
null Support Directory
Browse all null articles. (Last Updated )
No articles found.
Search Results
No articles found.
Storyline 360: Using the Two-Color Focus Indicator
Article Last Updated Feb 23, 2026
This article applies to:
When learners navigate with a keyboard, the focus indicator shows which item is currently selected. In the modern player, you can choose two colors for the focus rectangle to keep it visible across different backgrounds.
Using a single light color and a single dark color helps ensure the focus indicator stands out across slides, images, and interface elements.
Select Focus Indicator Colors
Follow these steps:
- Go to the Home tab on the ribbon and click Player.
- Confirm that you're using the modern player style.
- Click Colors & Effects on the ribbon.
- Choose two Accessibility Focus Colors, ideally one light and one dark.
Choose Accessible Color Combinations
Keep these guidelines in mind:
- The first color selector controls the outside color of the focus rectangle.
- The second color selector controls the inside color of the focus rectangle.
- The default options are based on your theme colors.
- Choose colors that have at least a 3:1 contrast ratio against adjacent background colors. This supports WCAG requirements for user interface components and graphical objects.
- Use a contrast checker to confirm your color choices meet this ratio.
- To use a single color focus indicator, select the same color in both fields.
Test Focus Visibility Before Publishing
Before publishing your training:
- Navigate your content using only the keyboard (Tab and Shift+Tab).
- Check visibility on light, dark, and image-based backgrounds.
- Confirm the focus indicator remains clearly visible on buttons, links, and interactive elements.
- If possible, review with people who use keyboard navigation or screen magnification to ensure the indicator is easy to track.
This helps ensure learners who rely on keyboard navigation can clearly see where they are on the screen.