Color contrast is the difference in brightness between text (foreground) and its background. Good color contrast makes content readable for everyone, including people with low vision or color blindness.
Missouri S&T’s accessibility standards:
- For most text, the color contrast ratio should be at least 4.5:1.
- For bold text 19px or larger, or regular text 24px or larger, a 3:1 contrast ratio is acceptable.
- Interactive elements (like buttons and tabs) should also meet at least a 3:1 ratio.
Why it matters:
Strong color contrast ensures your content is visible on all devices and in different lighting. Poor contrast can make information hard to read, especially for users with vision differences or when viewing on mobile devices outdoors25.
Where to check for contrast issues:
- Website templates and digital documents
- Text over images or semi-transparent backgrounds
- Link text against the surrounding content
- Buttons, menus and other interactive elements
Exceptions:
Logos, inactive interface components, and purely decorative graphics do not need to meet contrast requirements2.
How to check color contrast:
Use online tools to test your color choices:
- WebAIM Color Contrast Checker
- WebAIM Link Contrast Checker
- Missouri S&T’s recommended templates are already designed to meet contrast requirements.
Tips:
- Avoid using red and green together-these are hard to distinguish for many users with color blindness.
- Don’t rely on color alone to convey meaning.
- If you use non-standard colors, always check their contrast.