Color and contrast are essential for both accessibility and everyday usability. They’re critical for users with visual disabilities — including color blindness and age-related vision changes — but they also help everyone read content more easily, especially in bright light or on low-quality screens. This guide will help you understand what color combinations are accessible and how to check them using accessibility checkers.
Text
Text must have sufficient contrast with its background to support readability and accessibility.
- Normal text: Text that is smaller than 18 pt, or bold text smaller than 14 pt, is considered normal text. Normal text needs a minimum contrast ratio of 4.5:1.
- Large text: Text that is larger than 18 pt (or bold text larger than 14pt) is considered large text. Large text needs a minimum contrast ratio of 3:1, since larger/bolder text is easier to read.
infoHow to check contrast ratio
To determine contrast ratio, see these resources:
WebAIM Color Contrast Checker: Check foreground/background contrast ratios online.
Deque Color Contrast Analyzer: Includes real-time color adjuster for accessibility fine-tuning.
WebAIM Link Contrast Checker: Specifically tests links for visual distinction and compliance.
TPGi Colour Contrast Analyzer: A desktop app (Win/Mac) for checking contrast in apps and interfaces.
Graphical Elements
Graphics, like icons, chart components and custom-designed buttons—must have a contrast ratio of at least 3:1 against their background.
Interactive components (such as buttons and form fields) must also maintain at least 3:1 contrast in all states:
- Focus
- Hover
- Active
- Selected
Avoid hard-to-read color combinations, like white text on a gold background. Refer to the Mizzou Brand Color Guidelines to ensure your color choices meet university standards and support accessibility. This page shows examples of accessible and non-accessible color combinations.
Color should never be the only way to convey information — add labels, symbols, or patterns.
- Text labels – Clarify meaning directly.
- Example: Show a red dot next to the word “Overdue” instead of using the dot alone.
- Symbols or icons – Add recognizable visual cues.
- Example: Use an exclamation mark icon to indicate a warning.
- Patterns – Differentiate elements that may appear similar in color.
- Example: Use stripes, dots or textures in charts or maps to help users with color vision deficiencies.