Day 4: Distinguishable Skip to Content

Perceivable 1.4 Distinguishable

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

Examples

  • Have sufficient contrast between text color and backgrounds.
  • Use both color and icons to show error and success messages.
  • Users are able to zoom into a website up to 200% and still be able to navigate and interact with the page.
  • Background music in videos is low enough that it doesn't interfere with dialogue.
Read the WCAG 1.4 Specification

Success Criteria

Depending on which level of compliance your website needs, the following criteria needs to be met.
Criterion Level Description
1.4.1 A Color is not the only means of conveying information.
1.4.2 A Any audio that plays for more than 3 seconds has controls to pause, stop, or control the volume.
1.4.3 AA All text has a minimum contrast of 4.5:1 to separate it from its background.
1.4.4 AA Text can be resized up to 200% and still be readable.
1.4.5 AA Text should be represented as text and not as images with the exception of logos.
1.4.6 AAA All text has a minimum contrast of 7:1 to separate it from its background.
1.4.7 AAA Audio media should not have background audio, or background audio is 20 decibels lower than foreground content.
1.4.8 AAA Visual representations of text can be customized by the user.
1.4.9 AAA Images that include text are only used for decoration.
1.4.10 AA Content is presented without having to scroll in two directions.
1.4.11 AA Interface controls have a minimum contrast of 3:1 to separate from adjacent elements.
1.4.12 AA Text has appropriate line height and spacing relative to the font size.
1.4.13 AA When content becomes visible on hover, that content must be dismissable, hoverable, and persistent.
Read about all WCAG 1.4 Success Criteria