Color Contrast

On this page:

• Summary 
• Impact
• Dos and Don’ts
• How-To
   

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—including color blindness and low vision—as 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’ts

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., WebAIM Contrast Checker. 
   

Don’t: 

• Don’t use color pairs with poor contrast, like light gray text on a white background or green and red together. 
• Don’t use color as the sole indicator for meaning (e.g., don’t use only red to show errors). 
• Don’t 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. 

The Accessible Text-Based Material guide (PDF) has additional information on color contrast.  
 

All Accessibility Essentials