Web Accessibility Perspectives: Colors With Good Contrast


Web Accessibility Perspectives: Colors With Good Contrast.

[Signs with directions are shown. A woman is walking happily down the street.]

There's something about great design that allows it to go practically unnoticed.

But it doesn't take much to make things confusing and frustrating.

Choosing colors with poor contrast makes navigating, reading and interacting a real pain.

[The signs change to have poor contrast. The woman now looks confused. She looks at a navigation app on her phone.]

Good design means sufficient contrast between foreground and background 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 importa​nt 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.

[The woman from earlier arrives at her destination using the mobile app.]

Visit w3.org/wai/perspectives for more information on colors with good contrast.

W3C Web Accessibility Initiative. Copyright 2016.