1.4: Distinguishable

Guideline 1.4: Make it easier for users to see and hear content including separating foreground from background.

This guideline mostly concentrates on colors, though audio is also included. The intent is to make everything distinguishable even if people are not able to differentiate between colors, or to control audio. While at the first glance it may appear that color and audio do not belong together, consider that many people use the computer with a screen reader which provides audio output. When other audio information is present and it cannot be controlled, users of screen readers will not be able to hear the audio output properly.

1.4.1: Use of Color (Level A)

Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element. (Level A)

In simple terms: picture your site in black and white. Would it still make sense? If it did make sense before in color, and does not now in black and white, it is not accessible.

The most commonly made mistakes are indicating form fields by color only, or alerting the user by color.

When you use color to indicate a form field, also use some other means, for example a "*", or the word "required".

When you alert the user about something, for example that a task is overdue, also provide a textual way of indicating it.

Also, when you are writing guides or documentation, do not refer to color only. For example, do not say that red items need your attention, rather, say that the overdue items need your attention.

It is perfectly appropriate to use color in any situation. All that is required is that there is an alternative.

1.4.2: Audio Control (Level A)

If any audio on a Web page plays automatically for more than 3 seconds, either a mechanism is available to pause or stop the audio, or a mechanism is available to control audio volume independently from the overall system volume level. (Level A)

As it was mentioned before, there are people who use the computer with a screen reader. This success criterion helps them to distinguish their screen readers voice from the audio plaid on a web site.

You have probably encountered web sites which start playing background music as soon as you load the site. When you don't display a control to adjust the volume or to stop the audio, these pages are completely unusable for screen reader users.

You are allowed to play short audio messages without notice, but make sure these are not longer than three seconds.

When you play anything longer than three seconds, also embed a control on the page which allows users to turn the volume down without changing the system volume. When an audio file is designed to play in an audio player program, this control should be embedded automatically.

While WCAG does not require any further adjustments or notice, just providing an audio control still has one problem: while the audio is playing, screen reader users will have difficulties finding the audio control. Therefore, before you play the audio, it is always a good idea to let the user know that a control is available to adjust the volume, and briefly explain how the control works, and provide any keyboard shortcuts available.

1.4.3: Contrast (Minimum) (Level AA)

The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following: (Level AA)

Large Text: Large-scale text and images of large-scale text have a contrast ratio of at least 3:1.
Incidental: Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.
Logotypes: Text that is part of a logo or brand name has no minimum contrast requirement.

It is necessary to provide a certain level of foreground and background contrast for people with visual impairment. The contrast ratio is determined by a relatively complex algorithm, which is not important to understand, as the Contrast Analyser can perform the calculation for you. You will find instructions on using the Contrast Analyser in the appendix.

All you need to do is to run the Contrast Analyser, and change the colors accordingly.

If you use a color picker on your site, it is acceptable to allow color combinations which do not meet the minimum requirements, as long as there are options which provide a contrast ratio of 4.5:1.

In certain scenarios, you are not required to provide a 4.5:1 contrast. It is sufficient to provide a 3:1 contrast ratio for large text, and also, you are not required to provide any specific contrast ratio for decorative elements and logos.

The contrast ratio requirement also does not apply to images of text, however, when these images are informative, you are still required to provide a text alternative.

1.4.4: Resize text (Level AA)

Except for captions and images of text, text can be resized without assistive technology up to 200 percent without loss of content or functionality. (Level AA)

You should allow the user to resize text.

One option to do this is to provide a control where the user can make the text larger or smaller. However, most browsers allow resizing the text in a browser window. You need to make sure, however, that your pages allow this. Using relative fonts will help you comply with this success criteria.

Test your page by resizing it from different browsers, and make sure that all elements, except images, can be resized.

1.4.5: Images of Text (Level AA)

If the technologies being used can achieve the visual presentation, text is used to convey information rather than images of text except for the following: (Level AA)

Customizable: The image of text can be visually customized to the user's requirements.
Essential: A particular presentation of text is essential to the information being conveyed.

There are instances where it is not only the content of the text that is important, but also the presentation of text. It is more simple to provide images of text, rather than plain text. However, textual representation should always have preference, unless the text on the image can be resized.

Also, when this text represents essential information, textual information is required.

1.4.6: Contrast (Enhanced) (Level AAA)

The visual presentation of text and images of text has a contrast ratio of at least 7:1, except for the following: (Level AAA)

Large Text: Large-scale text and images of large-scale text have a contrast ratio of at least 4.5:1.
Incidental: Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.
Logotypes: Text that is part of a logo or brand name has no minimum contrast requirement.

This success criterion is very similar to 1.4.3. The difference is that a higher, 7:1 contrast ratio is required, which allows a higher, Level AAA conformance level. Here, large text needs to have a contrast ratio of 4.5:1, which is the standard contrast ratio under 1.4.3.

1.4.7: Low or No Background Audio (Level AAA)

For prerecorded audio-only content that (1) contains primarily speech in the foreground, (2) is not an audio CAPTCHA or audio logo, and (3) is not vocalization intended to be primarily musical expression such as singing or rapping, at least one of the following is true: (Level AAA)

No Background: The audio does not contain background sounds.
Turn Off: The background sounds can be turned off.
20 dB: The background sounds are at least 20 decibels lower than the foreground speech content, with the exception of occasional sounds that last for only one or two seconds.

This success criterion applies to audio materials, where the primary intent is to provide speech as means of information. This also includes information for the use of CAPTCHA.

You have to make sure that this audio content either does not contain background sounds/noise, or if it does, it can be turned off. If for any reason you still would like to provide some background sound, for example when using CAPTCHA so that automated voice recognition systems cannot easily decode it, the background sound has to be at least 20 decibels lower than the speech itself. As this is relatively difficult to measure, the best approach is either to stay away from background sounds, or make them very low.

1.4.8: Visual Presentation (Level AAA)

For the visual presentation of blocks of text, a mechanism is available to achieve the following: (Level AAA)

foreground and background colors can be selected by the user
width is no more than 80 characters or glyphs (40 if CJK)
text is not justified (aligned to both the left and the right margins)
line spacing (leading) is at least space-and-a-half within paragraphs, and paragraph spacing is at least 1.5 times larger than the line spacing
text can be resized without assistive technology up to 200 percent in a way that does not require the user to scroll horizontally to read a line of text on a full-screen window

Sometimes, when the layout of the text is important aside from the information it contains, it is important to make sure that this text is equally readable. Sometimes, a different text presentation can be more difficult to read. When the presentation of text is important, make sure you apply the following criteria:

Allow the user to select foreground and background colors. In this case, you will have to provide a color picker.
The text width is not more than 80 characters, and if you are using a different writing system, such as Chinese or Japanese, it is not more than 40.
The text is not justified.
You provide line spacing which is 1.5 times wider than for the rest of the text content on the page. Paragraph spacing should be 1.5 times the adjusted line spacing.
Text can be resized to 200%, which can be achieved by using the browser's resize functionality.

1.4.9: Images of Text (No Exception) (Level AAA)

Images of text are only used for pure decoration or where a particular presentation of text is essential to the information being conveyed. (Level AAA)

It is very similar to 1.4.5. The difference is that for the sake of a higher conformance, Level AAA, less exceptions are allowed.

In order to achieve a Level AAA conformance, images of text can only be used when the image serves purely a decorative purpose, or for any reason an image of text is required. One of these instances could be to display an electronic signature.

Bookmark/Search this post with: