Guideline 1.4: Separate background from foreground

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

This guideline is about making the default presentation as easy to perceive as possible to people with disabilities: it’s about contrast, not only the ‘colors’ for visual content, but also for the ‘voices’ on audio content.

Best practices

  • Use readable fonts.
  • Text in images should be at least 14 points and has good contrast.
  • Links and controls must be highlighted when they receive keyboard focus.

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.

Compulsory

If the color of particular words, backgrounds, or other content is used to indicate information:
  • Ensure that information conveyed by color differences is also available in text
  • Include a text cue whenever color cues are used
  • Ensure that additional visual cues are available when text color differences are used to convey information
  • Use a contrast ratio of 3:1 with surrounding text and providing additional visual cues on focus for links or controls where color alone is used to identify them (We will see how to calcultate this ratio
If the color is used within an image to convey information:
  • Use color and pattern
  • Ensure that information conveyed by color differences is also available in text

Recommended

  • Convey information redundantly using color
  • Use CSS to change the presentation of a user interface component when it receives focus

Failures

  • Having a text alternative that does not include information that is conveyed by color differences in the image
  • Creating links that are not visually evident without color vision
  • Identifying required or error fields using color differences only

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.

Since any content that does not meet this success criterion can interfere with a user’s ability to use the whole page, all content on the Web page (whether or not it is used to meet other success criteria) must meet this success criterion. See Conformance Requirement 5: Non-Interference.

Compulsory

  • Play a sound that turns off automatically within three seconds
  • Provide a control near the beginning of the Web page that turns off sounds that play automatically
  • Play sounds only on user request

Recommended

  • Provide a site-wide preference to turn off audio in addition to providing a control near the top of the Web page that turns off sounds that play automatically

Failures

  • Playing a sound longer than 3 seconds where there is no mechanism to turn it off

1.4.3 Minimum Contrast 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:

  • 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.

Read also about the enhanced contrast (Level AAA)

Compulsory

  • Use the browser defaults, so do not specify background nor text color.
  • Provide a control with a sufficient contrast ratio that allows users to switch to a sufficient contrast version.
  • Ensure these contrast ratios between text (and images of text) and background behind the text:
    Text size Text weight Contrast ratio Level AA
    Less than 18 points Normal 4.5:1
    Bigger than 18 points Normal 3:1
    Less than 14 points Bold 4.5:1
    Bigger than 14 points Bold 3:1

Recommended

  • Use a technology that has commonly-available user agents that can change the foreground and background of blocks of text
  • Use a higher contrast value for text that is over a patterned background
  • Use Unicode text and style sheets instead of images of text
  • Use a higher contrast values for lines in diagrams
  • Use greater contrast level for red-black text/background combinations
  • Use colors that are composed predominantly of mid spectral components for the light and spectral extremes (blue and red wavelengths) for the dark
  • Use a light pastel background rather than a white background behind black text to create sufficient but not extreme contrast
  • Make icons using simple line drawings that meet the contrast provisions for text
  • Provide sufficient color contrast in graphs and charts
  • Use a 3:1 contrast ratio or higher as the default presentation
  • Provide sufficient color contrast for empty text fields

Failures

  • specifying foreground colors without specifying background colors or vice versa
  • using background images that do not provide sufficient contrast with foreground text (or images of text)

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.

Compulsory

  • Use a technology that has commonly-available user agents that support zoom
  • Ensure that text containers resize when the text resizes AND use measurements that are relative to other measurements in the content by using em units for text containers and percent, named or em units for font sizes. Also, you can resize text containers by liquid layouts or calculating calculate size and position in a way that scales with text size
  • Provide controls on the Web page that allow users to incrementally change the size of all text on the page up to 200 percent
  • Ensure that there is no loss of content or functionality when the text resizes and text containers do not resize

Recommended

  • Provide large fonts by default
  • Use page-percent for container sizes
  • Avoid scaling font sizes smaller than the user-agent default
  • Avoid justified text
  • Provide sufficient inter-line and inter-column spacing
  • Provide different sizes for non-text content when it cannot have an equivalent accessible alternative
  • Avoid the use of text in raster images
  • Use server-side scripts to resize images of text
  • Scale form elements which contain text
  • Ensure that text in raster images is at least 18pt
  • Scale text down to 50%
  • Use relative measurements to set column widths so that lines can average 80 characters or less when the browser is resized
  • Use CSS to control visual presentation of text
  • Provide a mechanism to allow captions to be enlarged

Failures

  • If you resize visually rendered text up to 200% causes the text, image or controls are clipped, truncated or obscured
  • If text-based form controls do not resize when visually rendered text is resized up to 200%

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:

  • 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, i.e. logotypes (text that is part of a logo or brand name) .

Read also about the images of text without exceptions(Level AAA)

Compulsory

  • Use CSS to control visual presentation of text
  • Use CSS to replace text with images of text and providing user interface controls to switch
  • Separate information and structure from presentation to enable different presentations

Recommended

  • Identify informative non-text content
  • Use server-side scripts to resize images of text
  • Use percent, named or em units for font sizes
  • Use CSS letter-spacing to control spacing within a word
  • Position content based on structural markup
  • Avoid applying text styling to text characters within a word

1.4.6 Enhanced Contrast Level AAA

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

  • 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.

Read also about the minimum contrast (Level AA)

Compulsory

  • Use the browser defaults, so do not specify background nor text color.
  • Provide a control with a sufficient contrast ratio that allows users to switch to a sufficient contrast version.
  • Ensure these contrast ratios between text (and images of text) and background behind the text:
    Text size Text weight Contrast ratio Level AAA
    Less than 18 points Normal 7:1
    Bigger than 18 points Normal 4.5:1
    Less than 14 points Bold 7:1
    Bigger than 14 points Bold 4.5:1

Recommended

Follow the same recommendations as in the minimum contrast success criteria.

1.4.7 Low or No Background Audio Level AAA

Low or No Background Audio: 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:

  • 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.

Per the definition of “decibel,” background sound that meets this requirement will be approximately four times quieter than the foreground speech content.

Compulsory

  • Mix audio files so that non-speech sounds are at least 20 decibels lower than the speech audio content

Recommended

  • Providing a way for users to adjust auditory levels of foreground and background sound independently

1.4.8 Visual Presentation Level AAA

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

  1. Foreground and background colors can be selected by the user.
  2. Width is no more than 80 characters or glyphs (40 if CJK).
  3. Text is not justified (aligned to both the left and the right margins).
  4. 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.
  5. 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.

Compulsory

Ensure foreground and background colors can be selected by the user
  • Specify text and background colors of secondary content such as banners, features and navigation in CSS while not specifying text and background colors of the main content
  • Specify borders and layout in CSS to delineate areas of a Web page while not specifying text and text-background colors
  • Use a technology that has commonly-available user agents that can change the foreground and background of blocks of text
  • Don’t specify background color, nor specifying text color, and not use technology features that change those defaults
  • Providing a multi color selection tool on the page for foreground and background colors
Ensure width is no more than 80 characters or glyphs (40 if they are Chinese, Japanese and Korean characters)
  • Don’t interfere with the user agent’s reflow of text as the viewing window is narrowed
  • Using relative measurements to set column widths so that lines can average 80 characters or less when the browser is resized
Ensure text is not justified (aligned to both the left and the right margins)
  • Specify alignment either to the left OR right in CSS
  • Provide a mechanism to remove full justification of text
  • Align text on only one side
Ensure 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
  • Provide a button on the page to increase line spaces and paragraph spaces
  • Specify line spacing in CSS
Ensure 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
  • Don’t interfere with the user agent’s reflow of text as the viewing window is narrowed
  • Use liquid layout and measurements that are relative to other measurements in the content by using percent, named font or em units for font sizes or percentage values in CSS for container sizes or calculating size and position in a way that scales with text size (Scripting)
  • Provide options within the content to switch to a layout that does not require the user to scroll horizontally to read a line of text

Recommended

  • Use a hover effect to highlight a paragraph, list items, or table cells
  • Present text in sans serif font or providing a mechanism to achieve this
  • Use vertical (bulleted or numbered) lists rather than inline lists
  • Use upper and lower case according to the spelling conventions of the text language
  • Provide large fonts by default
  • Avoid the use of text in raster images
  • Avoid scaling font sizes smaller than the user-agent default
  • Provid sufficient inter-column spacing
  • Avoid centrally aligned text
  • Avoid chunks of italic text
  • Avoid overuse of different styles on individual pages and in sites
  • Make links visually distinct
  • Provide expandable bullets
  • Show/hide bullet points
  • Put an em-space or two spaces after sentences

Failures

  • Specifying foreground colors without specifying background colors or vice versa
  • Using text that is justified (aligned to both the left and the right margins)

1.4.9 Images of Text without exceptions 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, i.e. logotypes (text that is part of a logo or brand name).

Read also about the images of text without exceptions(Level AA)

More info