Color Contrast
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鈥檛:听
- 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.听听
听
