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 ensure readability and accessibility, with the required ratio depending on the font size.
- Normal (regular) text requires a minimum contrast ratio of 4.5:1. This includes text smaller than 18 point (24 px) regular, or smaller than 14 point (18.66 px) bold.
- Large text requires a minimum contrast ratio of 3:1, since larger/bolder text is easier to read. This includes text that is at least 18 point (24 px) regular, or at least 14 point (18.66 px) bold.
How 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.