Colors with Good Contrast

Web accessibility is essential for people with disabilities and useful for all. Learn about the impact of accessibility and the benefits for everyone in a variety of situations.

Video on Colors with Good Contrast

This video information is available as a Text Transcript with Description of Visuals below.

What is “Colors with Good Contrast”?

Colors must have sufficient contrast, for example, between the text color and the background color (technically called luminance contrast ratio). This includes text on images, icons, and buttons. Also colors used to convey information on diagrams, maps, and other types of images must be distinguishable.

Who depends on this feature?

People with low contrast sensitivity, which is common in older people.
People who cannot distinguish between certain colors (often called “color blindness”).

What are the additional benefits?

Content works in different lighting conditions, such as sunlight and glare.
Content is easier to read by everyone, including those who do not have specific visual conditions.

What needs to happen for this to work?

Select text and background colors that provide sufficient contrast. There are tools to help check and select appropriate color combinations. This is ideally done during the early design stage and the selection of color palettes. While some people need high contrast, some people are sensitive to brightness and need to change the colors.

Learn more

Accessibility Principle:
- Content is easier to see and hear
Getting Started:
- Provide sufficient contrast between foreground and background
Easy Check:
- Contrast ratio (“color contrast”)
User Story:
- Mr. Lee, Online shopper who cannot distinguish between certain colors (color blindness)
- Mr. Yunus, Retiree with low vision, hand tremor, and mild short-term memory loss
User Needs:
- Accessibility Requirements for People with Low Vision
Web Content Accessibility Guidelines (WCAG Overview):
- Success Criteria relating to “contrast”
Mobile Applicability:
- Information conveyed solely with color

Text Transcript with Description of Visuals

Audio	Visual
Web Accessibility Perspectives: Colors with Good Contrast	Web Accessibility Perspectives: Colors with Good Contrast
There's something about great design that allows it to go practically unnoticed.	Signs with directions are shown. A woman is walking happily down the street.
But it doesn't take much to make things confusing and frustrating.	The signs change to have poor contrast. The woman now looks confused.
Choosing colors with poor contrast makes navigating, reading and interacting a real pain	She looks at a navigation app on her phone.
Good design means sufficient contrast between foreground background and colors. That's not just text and images but links, icons, and buttons.	The app has a button with low contrast that changes to become clear.
If it's important enough to be seen, then it needs to be clear. And this is essential for people with low contrast sensitivity. Which becomes more common as we age.	An older man on a sofa is looking at a tablet. He goes to read a message on his mobile phone.
With good colors, websites and applications can be easier to use in more situations. Like in different lighting conditions.	Sun glares on the phone but the text is still readable.
Web accessibility: Essential for some, useful for all.
Visit w3.org/WAI/perspectives for more information on Colors with Good Contrast	Visit w3.org/WAI/perspectives for more information on Colors with Good Contrast. W3C Web Accessibility Initiative logo