Contrast & Color
Find colors that provide maximum contrast, including enough contrast between content and the background, so that text and non-decorative images are legible for anyone with low vision or color deficiencies.
- Ratio: Text and interactive elements should have a color contrast ratio of at least 4.5:1.
- Color as indicator: Color should not be the only indicator for interactive elements. For example, underline links on hover, or mark a required field with an asterisk.
- Color blindness: Red/green color blindness is the most common, so avoid green on red or red on green. (Think especially about avoiding using red and green for “bad” and “good” indicators).
From the US Standards Website::
“WCAG (Web Content Accessibility Guidelines) ensure that content is accessible by everyone, regardless of disability or user device. To meet these standards, text and interactive elements should have a color contrast ratio of at least 4.5:1. This ensures that viewers who cannot see the full color spectrum are able to read the text.”
“The options below offer color palette combinations that fall within the range of Section 508 compliant foreground/background color contrast ratios.”
Colors on a white background
Neutrals on a colored background
Tools & Resources
Articles & Guides
- Three common accessibility pitfalls for developers: colour contrast
- What is Color Contrast?
- Colour Accessibility
- US Standards Colors