So far in my efforts to take the mystery out of web accessibility, I’ve tackled text alternatives and alternatives for time based media. This time I’m discussing the WCAG 2.0 1.4 guideline of making content distinguishable. What exactly do they mean by distinguishable?
Distinguishable: Make it easier for people to see and hear content including separating foreground from background.
We’re going to cover 5 of the most important ways you can help to pass this guideline and help millions of people use your site easier.
Don’t use color as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.
An example of a failure here is marking required form fields with only a red outline. Or a quality table that indicates a pass/fail for criteria with only the use of red/green color. Links, since they indicate an actionable item should not only be a different color from surrounding text, but also be underlined or look different from the surrounding non-actionable text.
If audio automatically plays on the page for more than 3 seconds, provide a way to pause, stop or control the audio volume independently from the overall system volume level.
This is a very important rule to follow because a failure here will automatically fail your entire page even if other accessibility requirements are met. Playing audio with no way to turn it off interferes with the screen reader’s ability to distinguish what is happening on the page leaving them no option but to exit the page. It is best to let the user initiate the audio themselves.
Text, including text in images, must have a contrast ratio of at least 4.5:1 between the text and background color.
This ensures there is enough contrast for content to be read by people with color deficits or when viewed on a black and white screen. Sufficient color contrast between the text and background is the third most problematic issue reported by people with low vision. Color blindness affects 1 in 12 males and 1 in 200 females. With numbers this high, you’re bound to know a guy or two that sees the world this way. Also consider your responsive website when it’s viewed outside in the sun. Does the color contrast still hold up? Help people out by providing enough contrast so that they can comfortably read text.
When contrast is too light, people may experience eye strain as they try to decipher the words. On the flip side, too much contrast like pure white on pure black can also be harmful. For many people with dyslexia, high contrast colors can make the words appear to swirl or blur together.
Logos and incidental text are exempt from color contrast standards. An example of incidental text is buttons that are disabled because they cannot be used yet. Once buttons are enabled, they should pass contrast ratio.
Can you tell which color combination passes contrast ratio?
It can be difficult to choose your branding colors and accent colors for web, but there are tools out there that can help. One of these tools is the Colour Contrast Check.
With this tool you not only insert the colors to see if they are compliant, but it also refers you to the WCAG 2.0 contrast ratio formula which explains why you should be following these rules.
So have you figured out the correct block above? It’s the one in the first column, third row. Below is the aforementioned contrast ratio checker showing how it passes.
Except for captions and images of text, text can be resized in the browser without assistive technology up to 200 percent without loss of content or functionality.
Text that is not scalable is the 2nd most problematic accessibility barrier reported by visually impaired web surfers. Simply getting older, or not having your glasses or contacts in could be enough to make you want to increase the text size to be able to comfortably read the content.
We use relative font sizes instead of pixels to allow all browsers including IE 9 and older to increase the font size.
Use text instead of images of text as much as possible.
Strive to have the only images with text in them be of logos. This ensures people that need to enlarge text can do so easily without loss of quality. It helps screen reader users hear the content. Plus it allows people to upload their own user-defined style sheets to override your site styles so they can read the content with contrast settings that are comfortable for them.
For more information on this guideline, look to the WCAG 2.0 documentation.
* Special thanks to Marni Bramstedt for her contributions to this article!