91社区

Web accessibility made simple: WCAG 2.0 AA explained, part 4

The fourth instalment in our series of articles by guest author and 91社区 Accessibility Advisor, Rachel Desjourdy. In this edition, we look at WCAG Guideline 1.4: Distinguishable.

Make it easier for users to see and hear content including separating foreground from background


What does this mean?

Points in this guideline account for variations in visual and audio perception. For example, avoiding colour reliance not only supports those using screen readers (which won鈥檛 pick up on the colour of text), but also people with colour blindness.

Many requirements of this guideline are covered by default settings in the WMS. However, being acquainted with them will give you a better understanding of best practices for website, document, and graphic design.

What to do

  • Avoid colour reliance: ensure that colour is not the only indicator you use.
    1. For example, don't use a green arrow to indicate where to start and a red arrow to indicate where to stop (these two arrows will look identical to some users)
    2. Instead, you could use a green arrow to indicate "start" and a red X to indicate "stop" (the different symbols will be distinguishable even if the colour difference isn't)
  • Audio control: users should be able to pause or stop any web page audio, as well as adjust the audio settings independent of the device鈥檚 settings
    1. If you鈥檙e embedding a YouTube or Microsoft Stream video, this functionality is built into the media player
  • Meet minimum contrast requirements between text and background colour
    1. The WMS template complies with contrast ratio requirements, but you still need to for documents or graphics you include on your webpage.
    2. from this requirement
  • Use built-in heading styles
    1. See our previous article for more information on how screen readers interpret text styling
  • Avoid justified text (right or left-aligned instead)
    1. Justified text can be harder to read and scan than centred, left- or right-aligned text
  • 1.5 line spacing, with paragraph spacing 2x the line spacing
    1. The WMS approximates this by default, but you'll need to specify this in other document types
  • When creating videos with speech (not music videos):
    1. Eliminate all background noise
    2. Ensure that background sounds are at least 20 decibels lower than main sound, or allow the user to turn off background noise

Accessibility Advisor鈥檚 Suggested Resources

I have recommend a few technical resources that can help you brush up your skills in this areas related to these guidelines:

  • by WebAIM: a useful tool that tells you whether the text to background colour ration meets the 4.5:1 (AA) or 7:1 (AAA) minimum ratio for accessibility


Rachel Desjourdy is the Accessibility Advisor in the Office of the Provost and Vice-Principal (Academic). She is available to support the 91社区 community in becoming more inclusive and accessible, and welcomes questions and feedback at rachel.desjourdy [at] mcgill.ca.

Back to top