Color Contrast Guide

Questions answered by this guide

• ?What contrast ratio does my text need?
• ?How do I check color contrast in Storyline or Rise?
• ?What's the difference between WCAG AA and AAA contrast?
• ?Do buttons and icons need contrast too, or just text?
• ?Why can't I just use red and green to show right and wrong answers?
• ?Which WCAG criterion covers color contrast?

What you'll learn

• Text needs a contrast ratio of at least 4.5 to 1 against its background
• Large text and headings can use a slightly lower ratio of 3 to 1
• Never use color alone to communicate meaning

What's inside

Instructional designers checking color contrast in any authoring tool

1. 01The concept
2. 02What WCAG requires for text
3. 03What WCAG requires for icons and UI components
4. 04How to check it
5. 05Common mistakes

Why it matters

Low contrast text is hard to read for learners with low vision, color blindness, or anyone using a screen in bright light. This is WCAG success criterion 1.4.3 (Contrast Minimum, Level AA): normal text needs a ratio of at least 4.5 to 1, and large text, defined as at least 18pt, or 14pt bold, needs at least 3 to 1. A separate, easy-to-miss criterion, 1.4.11 (Non-text Contrast, Level AA), applies the same 3 to 1 minimum to icons, button borders, form field outlines, and other graphical UI components, contrast rules aren't only about body text. Good contrast is not just an accessibility requirement, it makes your course easier for every learner to read, especially on a laptop screen in a bright office or a phone screen outdoors.

When you'll encounter this

• You're styling body text, captions, or headings against a background color or image.
• You're designing a custom button, icon, or form field and choosing its border or outline color.
• Your course's theme uses light gray or pastel colors for text, common in "clean" or minimalist templates.
• A11yCheck flags a color contrast issue on a scan report.

Examples

Best practices

• Use a contrast checker to test your actual text and background colors, not just a visual guess.
• Aim for a contrast ratio of at least 4.5 to 1 for normal-sized text.
• Larger text, like headings, can use a slightly lower ratio of at least 3 to 1.
• Icons, button borders, and other meaningful UI components need at least 3 to 1 too, this is a separate WCAG requirement (1.4.11) from body text.
• Never rely on color alone to communicate meaning. Add an icon or label alongside a color change.

Common mistakes

• Light gray text on a white background.
• Using red and green alone to show correct and incorrect answers, with no other indicator.
• Text placed directly on a busy image background with no way to check contrast.
• A pale, low-contrast border on a button or icon, checked as if only body text needed to meet a ratio.

Practical checklist

• Every block of text meets a contrast ratio of at least 4.5 to 1.
• Large text and headings meet at least 3 to 1.
• Icons, button borders, and form field outlines meet at least 3 to 1.
• Nothing relies on color alone to communicate meaning.
• Text on an image background has been checked, not just assumed to be readable.

Frequently asked questions

Summary

Normal text needs at least 4.5 to 1 contrast, large text needs at least 3 to 1, and icons or UI components need at least 3 to 1 too, these are WCAG 1.4.3 and 1.4.11. Check actual colors with a contrast checker, and never rely on color alone to communicate meaning.