On this page:
Summary
Contrast refers to the difference in brightness between two colors, such as text and its background. Strong color contrast is essential for making digital content readable and accessible to everyone, especially people with visual impairments or color vision deficiencies.
Impact
Effective color contrast is vital for making digital content readable and accessible to a broad audience. It helps people with various types of vision differences鈥攊ncluding color blindness and low vision鈥攁s well as those viewing screens in different lighting conditions. Without sufficient contrast, important text and interface elements can become difficult or impossible to see, creating barriers to understanding and interaction.
Dos and Don鈥檛s
Do:
- Use high-contrast color combinations: Dark text on a light background (e.g., black on white).
- Light text on a dark background (e.g., white on navy).
- Test color combinations with color contrast tools, e.g., .
顿辞苍鈥檛:&苍产蝉辫;
- Don鈥檛 use color pairs with poor contrast, like light gray text on a white background or green and red together.
- Don鈥檛 use color as the sole indicator for meaning (e.g., don鈥檛 use only red to show errors).
- Don鈥檛 Place Text Over Images Without an Overlay: If text must be on an image, use a solid or semi-transparent overlay to ensure readability.
How-To
Below are examples of poor contrast and strong, accessible contrast.
ban Bad Contrast
- Blue on black is bad
- Green on orange is bad
- Red on green is bad
- Grey on purple is bad
circle-check Good Contrast
- Yellow on black is good
- Black on orange is good
- Black on green is good
- White on purple is good
The Accessible Text-Based Material guide (PDF) has additional information on color contrast.