Regular text should meet a minimum contrast ratio of 4.5:1.
7 Core Skills: Color & Contrast
Color plays an important role in communication and design, but not everyone perceives color in the same way. Good color choices ensure content is readable, understandable, and accessible to all users.
What Does Accessible Color & Contrast Mean?
Accessible design ensures that information is readable and does not rely on color alone to communicate meaning.
Color contrast refers to the difference between text and its background. Adequate contrast ensures content can be read comfortably.
Use of color refers to how color is used to communicate information. If color is the only way meaning is conveyed, some users may miss or misunderstand it.
Why Is Color & Contrast Important?
People with low vision, color-blindness, or age-related vision changes may have difficulty reading low-contrast text or distinguishing colors.
Poor contrast can make content hard to read in bright light, on mobile devices, or when users are fatigued.
If color is the only way information is conveyed — such as showing errors in red without additional indicators — users who cannot perceive color differences may miss critical information.
Accessible color and contrast choices improve readability, usability, and clarity for everyone.
Top 3 Ways to Get Started
-
Ensure sufficient contrast between text and background
-
Avoid using color alone to convey meaning
Use icons, labels, patterns, or text in addition to color.
-
Check color combinations before publishing
Use a contrast checker to confirm readability.
What Does Good Color & Contrast Look Like?
Accessible color use includes:
- Dark text on a light background or light text on a dark background
- Clear visual separation between text and background
- Indicators beyond color alone (icons, labels, shapes)
- Consistent readability across devices and lighting conditions
Small adjustments can make content significantly easier to read and black and white is not your only option!
Common Mistakes to Avoid
- Using light gray text on a white background
- Placing text over busy images or patterns
- Relying on color alone to show errors, status, or required fields
- Using brand colors that do not meet contrast requirements
- Assuming text is readable because it looks clear to you
Good design and accessibility both result in improved user experiences.
Common Mistakes To Avoid
Simple tools can check color contrast:
- WebAIM Color Contrast Checker or similar tools can tell you if something is WCAG 2.1 AA compliant
- Built-in accessibility checkers in Word and PowerPoint
- Browser extensions and design tools that evaluate contrast
- Many CMS and design tools include contrast warnings
Learn more about accessible colors:
- WCAG 2.1 Success Criterion 1.4.3 – Contrast (Minimum)
- WCAG 2.1 Success Criterion 1.4.1 – Use of Color
- WebAIM: Color Contrast and Accessibility
- WebAIM Check Color Contrast Tool
- WebAim Link Color Contrast Tool
Try this quick check on your own content:
- Open a recent document, webpage, or presentation.
- Test the contrast of your text colors.
- Adjust combinations that do not meet the 4.5:1 standard.
- Add labels or icons where color is used to convey meaning.
Improving color and contrast is one of the quickest ways to make content more accessible.