Distinguishable content
WCAG Guideline 1.4 (AA) and success criteria
Learn how to make it easier for users to see and hear content.
Last updated on
- Make sure colour isn’t the only way you convey information
- Provide controls to pause, stop or adjust audio
- Use high contrast for text and images
- Allow users to resize text
- Use images of text sparingly
- Use responsive design to avoid losing content or context
- Enhance visual contrast for user interface and graphics
- Adjust text spacing for improved readability
- Ensure people can read or close pop-up content
Make sure colour isn’t the only way you convey information (Level A, 1.4.1)
To make content accessible for individuals with low vision or colour blindness, it’s crucial not to solely rely on colour. For example, when indicating that certain fields are required by using the colour red, it’s important to include another visible identifier like an asterisk alongside the red text. This way, individuals who have difficulty distinguishing colours can easily identify the required fields by looking for the asterisks.
Another common accessibility issue is when link text solely relies on colour for identification. To address this, it’s recommended to underline link text in addition to using colour to ensure its visibility and accessibility.
Similarly, graphs that solely rely on colour, like pie charts with colour-coded segments, pose challenges for individuals with colour or vision related disabilities. To overcome this, it’s essential to add clear labels or patterns to differentiate the segments and provide equal access to the information.
It’s helpful to check content in black and white to ensure important information isn’t missed when colour is absent. This practice helps identify potential accessibility issues and ensures content remains accessible to all users.
How to include additional visual identifiers
To comply with this success criterion, follow these steps:
- Use additional visual cues beyond colour to convey information, indicate actions, prompt responses or distinguish visual elements
- Accompany colour-coded information or actions with visual text labels or symbols that provide explicit descriptions or instructions
- Make sure text and other visual elements have sufficient contrast with the background or surrounding elements
- Test the content using grayscale or colour-blind simulations to assess its usability for individuals with different colour perceptions. Verify information, actions, responses and visual elements can still be distinguished and understood
- Offer alternatives to colour-coded information, actions or visual elements. For example, if colour is used to represent different categories, provide an additional non-colour coding, such as icons, patterns or labels
Provide controls to pause, stop or adjust audio (Level A, 1.4.2)
Audio that begins playing automatically for more than 3 seconds when a page is opened should be able to be controlled by the user.
People who use screen readers may find it hard to hear their screen reader if other audio is playing at the same time, while others may find the sudden noise distracting or off-putting. It’s important that users are able to control background sounds.
How to give people control of audio
- Do not use automatically playing audio on your webpage. If audio must play automatically for more than 3 seconds:
- Make sure there are visible and accessible controls available to pause or stop it
- Clearly label the controls
- In addition to pause and stop, offer mechanisms to control the volume independently from the overall system volume level
- Make sure the controls have appropriate visual cues, such as icons or text labels and have a high enough contrast to be distinguishable from the surrounding content
- Provide controls for people to start audio manually
- Ensure audio controls can be accessed and operated using the keyboard alone. Users should be able to navigate to the controls, activate them and adjust the volume using a keyboard
- Test the audio controls with assistive technologies, such as screen readers or keyboard-only navigation. Verify users can pause or stop the audio and control the volume independently
Use high contrast for text and images (Level AA, 1.4.3)
You must provide a high enough contrast between text and background colour so it can be read by people with low vision or colour blindness.
Larger text has wider character strokes and is easier to read at lower contrast. Because of this, the contrast ratio for large text is 3:1 instead of 4.5:1. Large text is defined as 14 point (typically 18.66px) and bold or larger or 18 point (typically 24px) or larger.
Decorative text that conveys no information is excluded. For example, words used to create a background which could be rearranged or substituted without changing meaning.
Text in logos is also exempt.
How to use a high enough contrast for text and images
- Check the colour contrast ratio using a tool such as the Web Aim Contrast Checker
- If the contrast ratio falls below the specified requirements, make adjustments to the colours of the text or background
- Test the contrast of your text on different devices and with various display settings, such as brightness levels or colour profiles to make sure text remains legible and maintains sufficient contrast under different viewing conditions
Allow users to resize text (Level AA, 1.4.4)
Text content, excluding captions and images of text, should maintain its content and functionality when resized up to 200% without the need for assistive technology.
This requirement ensures that users have the ability to easily resize text without relying on specialized tools, allowing them to comfortably read and interact with the content.
It’s important to note that images of text may not scale as effectively, leading to pixelation and adjusting the contrast ratio for images of text can pose challenges for users requiring higher colour contrast.
How to allow people to resize text
- When defining the size of text elements on your website, use relative units such as percentages (%), ems (em) or rems (rem) instead of fixed units like pixels (px). Relative units allow text to scale proportionally when users adjust the text size
- Make sure people can resize text on your website up to 200% without using assistive technology, such as screen magnifiers or browser zoom. Test this functionality across different browsers and devices for consistency
- When text is resized, ensure the layout and functionality of your website remain intact. Elements should not overlap, be cut off or cause issues with interactive features. Test the resized text in different areas of your website, including navigation menus, forms and content sections
- Use responsive design techniques to ensure your website adapts to different screen sizes and text resizing
- Whenever possible, avoid using text within images as it can’t be easily resized. Instead, use HTML text elements that can be resized without loss of quality or readability. For images that do contain text, include it in the alt text
- Test with users who rely on assistive technology, such as screen magnifiers, to ensure text remains accessible and understandable. Verify it can be read or magnified without issues
Use images of text sparingly (Level AA, 1.4.5)
Users should have the ability to customize text in images to suit their needs, including adjusting font size, colour contrast, font family, line spacing and alignment. If the technology does not support such customization, it’s recommended to present the text as actual text rather than in an image.
Exceptions apply when the text within an image is essential to its purpose, such as logos, graphs, screenshots, infographics or diagrams. In these cases, the text information should be provided as a text alternative within the content to ensure accessibility.
How to allow people to customize text in images
- Instead of using images that contain text, use real, selectable text
- If the technology you’re using allows for visual customization of text, provide options for users to adjust the text appearance according to their preferences. This could include options for font size, font style, colour contrast and other visual properties
- Provide alternative text (alt text) which accurately describes the information conveyed by the image of text
Use responsive design to avoid losing content or context (Level AA, 1.4.10)
Ensure that web content can be presented effectively without loss of information or functionality, eliminating the need for scrolling in 2 dimensions. This includes:
- Vertical scrolling content at a width equivalent to 320 CSS pixels
- Horizontal scrolling content at a height equivalent to 256 CSS pixels
Exceptions apply to content parts that necessitate two-dimensional layout for usage or meaning, such as images, maps, diagrams, video, games, presentations, data tables and interfaces where toolbars need to remain visible during content manipulation.
By avoiding fixed-size or fixed-position elements, utilizing responsive design techniques and employing relative units for sizing, content can reflow vertically or align to a single column without requiring two-dimensional scrolling. Flexible sizing and positioning techniques enable elements to adapt to varying screen sizes including mobile.
Certain complex content, like large data tables with numerous columns, may not be able to reflow without sacrificing essential information or functionality.
How to develop responsive content
- Use responsive design techniques to make sure the content adapts to different screen sizes and orientations. Use fluid layouts and flexible elements that adjust their size and positioning based on the available viewport width and height
- Test your content to ensure that it can be displayed without the need for scrolling in 2 dimensions at specific dimensions:
- Vertical scrolling content needs to fit within a width equivalent to 320 CSS pixels
- Horizontal scrolling content needs to fit within a height equivalent to 256 CSS pixels
- Minimize the use of fixed-width elements that can cause horizontal scrolling or require 2-dimensional layout. Instead, use relative units like percentages or flexible grids to allow content to adapt to different screen sizes
- Take into account that the specified CSS pixel dimensions are equivalent to a starting viewport width of 1280 CSS pixels wide and a starting viewport height of 1024 CSS pixels at 400% zoom. Test your content at different zoom levels to ensure it remains usable
- Identify parts of the content that require 2-dimensional layout for usage or meaning. This may include images, maps, diagrams, video, games, presentations, data tables and interfaces where toolbars need to remain in view while manipulating content. Provide alternative access methods such as text descriptions or alternative navigation methods
Enhance visual contrast for user interface and graphics (Level AA, 1.4.11)
Improving readability for individuals with low vision or colour blindness is achieved by using a sufficient contrast ratio. Non-text content, including images, icons and user interface components should have a minimum contrast ratio of 3:1.
Contrast ratios measure the brightness difference between the foreground and background. You can achieve a higher ratio by:
- Adjusting colours, brightness or opacity
- Adding borders or outlines
Tools like Web Aim’s Contrast Checker can help verify ratios.
Contrast exceptions
This requirement does not apply to inactive components, like images or icons that are not interactive or clickable. It also does not apply to components whose appearance is determined by the user agent.
If a graphic includes text or other content necessary for context, it must meet the contrast ratio. There are some use cases when altering colours may alter the meaning, such as a weather map. In this example the meaning of colours may be commonly understood such as blue for cold and red for hot. In this case, changing the colours could alter the meaning. In these types of cases, provide a text-based alternative to ensure the content is accessible.
How to use a high enough contrast in graphics and the user interface
- Make sure visual information used to identify user interface (UI) components and states has a contrast ratio of at least 3:1. This includes elements such as buttons, links, input fields, checkboxes and radio buttons
- Provide sufficient contrast for visual information in active components, such as buttons in their active state. There are no contrast requirements for inactive components
- Parts of graphics essential for understanding the content should have a contrast ratio of at least 3:1 against adjacent colours, such as diagrams, icons or infographics. However, if a particular presentation of graphics is essential to convey the intended information, there’s no contrast requirement. This typically applies to situations where a specific visual style or design is necessary to convey the message accurately, such as logos or decorative graphics
- Use colour contrast evaluation tools or techniques to check the contrast ratio of your visual elements
- If you find that certain UI components or graphical objects do not meet the contrast ratio, consider adjusting the colours
Adjust text spacing for improved readability (Level AA, 1.4.12)
Design webpages to allow users to adjust text style properties without losing content or functionality. This enables people to personalize their viewing experience. The following text style properties should be adjustable:
- Line height (line spacing) should be at least 1.5 times the font size
- Spacing following paragraphs should be at least 2 times the font size
- Letter spacing (tracking) should be at least 0.12 times the font size
- Word spacing should be at least 0.16 times the font size
These adjustments apply to all text on the page, including headings, paragraphs, lists and captions. They do not apply to captions embedded in videos or images of text.
If the markup language lacks support for these properties, CSS (Cascading Style Sheets) can be used to set them. Plugin technologies should have the built-in capability to modify styles.
You’re not obligated to set your content to these specific metrics. The goal is to make your content adaptable to these adjustments, allowing users to customize their reading experience. It’s not considered a failure if user agents or platforms do not provide specific ways for users to make these adjustments.
Exceptions in text spacing
Exceptions should be considered based on the language used on the page. Different languages and scripts have varying conventions for text display. For example, languages like Japanese do not use spaces between words, and specific fonts or styles may not be necessary or applicable. In these cases, word spacing properties are not applicable.
How to allow people to adjust the text spacing
- Design your webpages to allow users to modify text style properties without losing content or functionality. This will enable them to personalize their viewing experience
- Ensure that users can adjust the following text style properties:
- Line height (line spacing): Set it to at least 1.5 times the font size. This will create sufficient spacing between lines of text, making it easier to read
- Spacing following paragraphs: Set it to at least 2 times the font size. This will provide enough space between paragraphs, enhancing readability and visual separation
- Letter spacing (tracking): Set it to at least 0.12 times the font size. This will adjust the space between individual letters, improving legibility and clarity
- Word spacing: Set it to at least 0.16 times the font size. This will control the spacing between words, making the text more readable and visually appealing
- Apply these adjustments to all text elements on your webpage, including headings, paragraphs, lists and captions. Keep in mind that these adjustments don’t apply to captions embedded in videos or images of text
- If your chosen markup language lacks support for these text style properties, you can use CSS to set them. CSS provides additional flexibility in controlling text styles
- Ensure that any plugin technologies you use have built-in capabilities to modify text styles. This will allow users to make the desired adjustments easily
Ensure people can read or close pop-up content (Level AA, 1.4.13)
When users interact with elements on a webpage, ‘hover’ and ‘focus’ are two important actions. For mouse users, ‘hover’ refers to moving the mouse over an element without clicking, while ‘focus’ signifies the state of an element that has been selected or activated by a user. This can occur through a mouse click or keyboard navigation.
In some cases, hovering or focusing on an element may trigger the appearance of additional information, such as tooltips or sub-menus. To ensure accessibility, people must have the ability to:
- Read or hear the additional content, even if they cannot see it
- Dismiss the extra content without needing to move the mouse or click, for example, by pressing the ‘Escape’ key
- Position the additional content so that it doesn’t obstruct page content, except for white space or purely decorative elements
- Allow people to move the mouse pointer away from the trigger without the additional content disappearing. This provides sufficient time for users to read the content once it appears. The content should remain visible until:
- The user removes hover or focus from the trigger and additional content
- The user dismisses it using a built-in mechanism like the ‘Escape’ key
- The information becomes irrelevant, such as a ‘busy’ message that’s no longer valid
Whenever possible, it’s recommended to explore alternative methods of presenting content on the page instead of relying solely on pop-up information triggered by hover or focus. These alternatives tend to be more user-friendly.
Exceptions in hover and focus
If the visual presentation of the additional content is determined by the user agent rather than the author, meeting this success criteria isn’t the author’s responsibility.
How to make hover and focus predictable
- When implementing additional content that appears on hover or focus, choose an appropriate dismissible mechanism based on the nature of the content. For example you can:
- Include a visible ‘close’ or ‘dismiss’ button within the content to allow users to easily close or hide it without interacting with other page elements
- Utilize an icon or symbol that indicates the ability to dismiss the content, associating it with the dismissal action when clicked or activated by keyboard focus
- Support keyboard interactions, such as enabling the ‘Escape’ key, to provide an alternative method for users relying on keyboard navigation or assistive technologies
- Make additional content hoverable. To achieve this you can:
- Implement a slight delay before hiding the additional content when the pointer moves away from it
- Increase the trigger area that activates the additional content, extending it slightly beyond the content’s boundaries
- Utilize mouse-out detection to determine if the pointer has truly moved away from the additional content
- If the additional content is triggered by keyboard focus instead of pointer hover, ensure it remains visible as long as the focus remains on it
- Ensure persistence of additional content. To achieve this you can:
- Ensure the additional content remains visible as long as the hover or focus trigger is active
- Continuously monitor the presence of the hover or focus trigger and hide the additional content if the trigger is removed (e.g., pointer moves away or focus is lost)
- Provide a clear and accessible mechanism for users to dismiss the additional content, such as a close button or dismiss icon, that is easily discoverable and usable by both mouse and keyboard users
- Test the functionality using different input methods, such as mouse and keyboard, to ensure accessibility and usability across various user interactions