How to Fix Colour Contrast Issues in Storyline 360

Overview

This covers two related problems: text that's hard to read against its background, and information, like a right or wrong answer, that's shown using colour as the only signal. Faint gray text on a white background is hard for almost everyone to read, not just people with a diagnosed vision impairment, and a colour-only signal disappears completely for a colour blind learner.

Step-by-step instructions

1. 1

   Select the text that looks low contrast.

2. 2

   Open the Format menu.

3. 3

   Increase the contrast between the text colour and its background, aim for at least 4.5:1 for normal-sized text.

4. 4

   For any feedback or status that currently relies on colour alone (a green highlight for "correct," a red one for "incorrect"), add a second signal.

5. 5

   Add a checkmark or X icon, or the word "Correct" or "Incorrect," alongside the colour.

6. 6

   Preview the slide in grayscale if possible, or squint at it, if the meaning only comes from colour, it needs a second signal.

Screenshots

Tips

• Stick to a small, tested colour palette across your course instead of introducing one-off custom colours per slide, it's the easiest way to keep contrast consistent everywhere.
• 4.5:1 is the target for normal text, large text (18pt and up, or 14pt bold) only needs 3:1.
• Imagine the course in grayscale and ask whether the meaning survives, that's a fast, reliable gut check.

Common mistakes

• Light gray text on a white or pale background because it looked clean in the design.
• Marking correct answers in green and wrong answers in red with no other signal, like an icon or label.
• Fixing contrast on body text but forgetting about it on smaller UI elements like captions or button labels.

Why it matters

Low vision and colour blind learners may not be able to read this text or notice this signal at all.