Section 1.4: Distinguishable Content
This section of WCAG 2.1 ensures that content is easy to perceive, even for users with visual or auditory disabilities. It addresses color contrast, text resizing, and auditory cues among other aspects.
1.4.1 Use of Color
Color should not be the only method used to convey information, as it excludes users who are colorblind.
- Example: Below is an accessible form where both color and text indicate required fields:
1.4.2 Audio Control
Users should have the ability to stop or control audio that plays automatically for more than three seconds.
- Example: Below is an embedded audio player with controls:
1.4.3 Contrast (Minimum)
Text and images of text must have a contrast ratio of at least 4.5:1 to be easily readable.
- Example: Below is a heading with sufficient contrast against its background:
High-Contrast Heading
1.4.4 Resize Text
Text must remain readable and functional when resized up to 200% without assistive technology.
- Example: Users can resize the text on this page using browser settings or zoom tools, and the content will remain legible and functional.
1.4.5 Images of Text
Use text instead of images of text whenever possible, or ensure the image has sufficient contrast and alternative text describing its content.
- Example: Below is a visually distinguishable piece of text, avoiding the use of an image:
This is text content, styled for clarity and accessibility.
1.4.10 Reflow
Ensure that content reflows properly when viewed on different screen sizes or when zoomed, without requiring scrolling in two dimensions.
- Example: This page layout adjusts seamlessly for mobile, tablet, and desktop screens.
1.4.12 Text Spacing
Allow users to adjust text spacing, including line height, letter spacing, and word spacing, without losing content or functionality.
- Example: Below is an editable text area where users can customize spacing:
1.4.13 Content on Hover or Focus
Ensure that content appearing on hover or focus is dismissible, persistent, and accessible.
- Example: Below is a tooltip that appears when you hover over the button: