Colours with good contrast
Lesson 4 of 9 · Video · about 2 minutes
Watch on YouTube (opens in new tab)
Keyboard keys inside the YouTube player are YouTube’s own: K or Space plays and pauses, J and L move 10 seconds, C turns captions on and off, F is full screen.
Transcript
Source: W3C WAI, https://www.w3.org/WAI/perspective-videos/contrast/
Visual: Web Accessibility Perspectives: Colors with Good Contrast
Audio: There's something about great design that allows it to go practically unnoticed.
Visual: Signs with directions are shown. A woman is walking happily down the street.
Audio: But it doesn't take much to make things confusing and frustrating.
Visual: The signs change to have poor contrast. The woman now looks confused.
Audio: Choosing colors with poor contrast makes navigating, reading and interacting a real pain
Visual: She looks at a navigation app on her phone.
Audio: Good design means sufficient contrast between foreground background and colors. That's not just text and images but links, icons, and buttons.
Visual: The app has a button with low contrast that changes to become clear.
Audio: 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.
Visual: An older man on a sofa is looking at a tablet. He goes to read a message on his mobile phone.
Audio: With good colors, websites and applications can be easier to use in more situations. Like in different lighting conditions.
Visual: Sun glares on the phone but the text is still readable.
Audio: Web accessibility: Essential for some, useful for all.
Visual: Visit w3.org/WAI/perspectives for more information on Colors with Good Contrast
End of transcript.
Good colour contrast makes graphics, slides and social media images readable for people with low vision and for everyone in bright sunlight.
Video: “Colors with Good Contrast”, W3C Web Accessibility Initiative (WAI). Source page with transcript. Audio-described version.