This document provides information about the Acquia Web Governance accessibility check:
Are important UI and graphical components distinguishable?
What
Visual information that is used to identify active user interface components, states, and graphical objects must have good contrast. This means 3:1 minimum contrast ratio.
User interface components are elements that users can interact with in order to perform functions. For example, buttons, checkboxes, sliders, and other controls.
States are properties related to user interface components that can change over time. For example, checked, focused, selected, and visited.
Graphical objects are parts of graphics that are necessary for understanding the content. For example, an icon without a visual text description or the lines in a line chart.
The minimum requirement is a contrast ratio of at least 3:1. For comparison, the maximum contrast ratio, for example black on a white background, is 21:1.
Why
People with reduced visual perception often have struggle to see graphical elements when there is low contrast between the background and the adjacent areas. Specific forms of color deficiencies can also make it hard for people to see contrast ratios.
When users struggle to see the contrast in graphical components, they can become isolated and feel excluded because they cannot access the content and functionality. Other users might need to spend a disproportionately high amount of time and energy to use the functions and content on the web page.
This concerns not only individuals with severe vision impairments, but also the typical age-related decline in contrast vision. Therefore, it is relevant for the majority of the aging population.
Who
Affected users
This check affects the following users who have:
Low Vision: Including many elderly due to natural age related vision loss.
Color Blindness: Colorblind individuals have a better ability to distinguish graphics and user interface controls when there is a good contrast ratio.
No impairments: All users benefit from good contrast when they view content under special lighting conditions, such as in bright sunlight or on a screen that is dimmed due to low battery mode.
User story
Emily, 63 years:
“When they use those light pastel colors on a website, I really, really struggle to see anything. When I want to check the three-day forecast, they display it with those small light blue icons and arrows showing how the weather will be. It's on a light gray background, and it's nearly impossible for me to make it out.”
Examples
This section provides some examples of the issue.
Example 1: White button with gray icon
A button for the user to send a message is white with a light gray mail icon. The entire button background is white. The ratio between the gray and the white is 2:1. In this case, there is not sufficient contrast to perceive the location of the button on the page or what the icon represents.
Example 2: White button with dark gray icon
A button for the user to send a message is white with a darker gray mail icon. The entire button background is white. The ratio between the gray and the white is 7:1. In this case, there is sufficient contrast to perceive the location of the button on the page and what the icon represents.
Example 3: White button with black text
A button for the user to send a message is white with a darker gray mail icon. The overall background of the button is white. Additionally, the button includes the text "Send" in black alongside the icon. The ratio between the black text color and the gray background is 12:1 which is sufficient for text contrast requirements.
In this scenario, the text alone serves as an adequate means for the user to locate and comprehend the function of the button. Therefore, no additional contrast specifications are necessary for the icon button.
How
This section provides information on how to review and fix the issue.
How to review it
You need to manually examine the website to locate and measure contrast on the relevant graphical elements. Before you measure the contrast ratios, you must identify all active user interface components, states, and graphical objects.
Look through the examples in Understanding SC 1.4.11 Non-text Contrast to better understand which graphical elements and combinations of elements in various states are important to review in this check.
Locate user interface components, states, and graphical objects:
Go to the webpage you are reviewing.
Identify all active user interface components such as buttons, checkboxes, text fields, date pickers, and all other input and interactive elements.
Examine the possible states of each component. For example, focused, hover, selected, pressed, checked, visited/unvisited, and expanded/collapsed.
Check if there are any other significant graphical objects on the page. These can be images of diagrams or instructional drawings that are necessary for the user to understand the content of the page.
You do not need to consider any inactive components or components that use the default browser styling.
You do not need to take into account any visual information that is already presented in text form on the page. Only consider visual elements if they are crucial and they are the only way to perceive the content.
To calculate the contrast ratio, you need to know the color code for the foreground color and for the background or adjacent color. The elements in the image versus the background of the page as well as adjacent colors should meet the minimum contrast requirements of 3:1.
You should, for example, use the background color to assess whether there is sufficient contrast between an icon's foreground color and the icon's background color. However, if you are measuring the contrast on a pie chart, it is typically the adjacent colors that you should measure, such as the color of two neighboring segments. You must therefore assess for yourself which color combinations are essential to distinguish from each other in order for the user to perceive the meaning of your content.
Follow these steps to alculate the luminosity contrast ratio between the text on the component, the component itself as in a pie chart for example, and the background color:
Use a color picker like ColorZilla (a Google Chrome extension) to “pick” the color from the icon in the component. In this example, the component we will look at is the delete button, with an icon of a red trash can on it.
Paste the color code into the “Foreground color picker” on the Acquia Color Contrast Checker. (If you are using ColorZilla, the color code automatically copies to your clipboard.)
Use the color picker to “pick” the color from the component background. In this example, the component (a button) background is pink.
Paste the color code into the “Background color picker” on the Acquia Color Contrast Checker.
Repeat for adjacent colors, for example on a pie chart or a varied background, to make sure that the contrast between each adjacent area is easy to distinguish. Do this if it seems like the button or image does not meet the minimum contrast requirements of 3:1.
Who in your team can typically fix this
Web team: (Visual Design and front-end developer) for changes in your CMS/website template.
Content Authoring: for issues that are found in content such as diagrams and info graphics.
Are important UI and graphical components distinguishable?
1.4.11 Non-text Contrast
Introduction
This document provides information about the Acquia Web Governance accessibility check:
Are important UI and graphical components distinguishable?
What
Visual information that is used to identify active user interface components, states, and graphical objects must have good contrast. This means 3:1 minimum contrast ratio.
User interface components are elements that users can interact with in order to perform functions. For example, buttons, checkboxes, sliders, and other controls.
States are properties related to user interface components that can change over time. For example, checked, focused, selected, and visited.
Graphical objects are parts of graphics that are necessary for understanding the content. For example, an icon without a visual text description or the lines in a line chart.
The minimum requirement is a contrast ratio of at least 3:1. For comparison, the maximum contrast ratio, for example black on a white background, is 21:1.
Why
People with reduced visual perception often have struggle to see graphical elements when there is low contrast between the background and the adjacent areas. Specific forms of color deficiencies can also make it hard for people to see contrast ratios.
When users struggle to see the contrast in graphical components, they can become isolated and feel excluded because they cannot access the content and functionality. Other users might need to spend a disproportionately high amount of time and energy to use the functions and content on the web page.
This concerns not only individuals with severe vision impairments, but also the typical age-related decline in contrast vision. Therefore, it is relevant for the majority of the aging population.
Who
Affected users
This check affects the following users who have:
Low Vision: Including many elderly due to natural age related vision loss.
Color Blindness: Colorblind individuals have a better ability to distinguish graphics and user interface controls when there is a good contrast ratio.
No impairments: All users benefit from good contrast when they view content under special lighting conditions, such as in bright sunlight or on a screen that is dimmed due to low battery mode.
User story
Emily, 63 years:
“When they use those light pastel colors on a website, I really, really struggle to see anything. When I want to check the three-day forecast, they display it with those small light blue icons and arrows showing how the weather will be. It's on a light gray background, and it's nearly impossible for me to make it out.”
Examples
This section provides some examples of the issue.
Example 1: White button with gray icon
A button for the user to send a message is white with a light gray mail icon. The entire button background is white. The ratio between the gray and the white is 2:1. In this case, there is not sufficient contrast to perceive the location of the button on the page or what the icon represents.
Example 2: White button with dark gray icon
A button for the user to send a message is white with a darker gray mail icon. The entire button background is white. The ratio between the gray and the white is 7:1. In this case, there is sufficient contrast to perceive the location of the button on the page and what the icon represents.
Example 3: White button with black text
A button for the user to send a message is white with a darker gray mail icon. The overall background of the button is white. Additionally, the button includes the text "Send" in black alongside the icon. The ratio between the black text color and the gray background is 12:1 which is sufficient for text contrast requirements.
In this scenario, the text alone serves as an adequate means for the user to locate and comprehend the function of the button. Therefore, no additional contrast specifications are necessary for the icon button.
How
This section provides information on how to review and fix the issue.
How to review it
You need to manually examine the website to locate and measure contrast on the relevant graphical elements. Before you measure the contrast ratios, you must identify all active user interface components, states, and graphical objects.
Look through the examples in Understanding SC 1.4.11 Non-text Contrast to better understand which graphical elements and combinations of elements in various states are important to review in this check.
Locate user interface components, states, and graphical objects:
Go to the webpage you are reviewing.
Identify all active user interface components such as buttons, checkboxes, text fields, date pickers, and all other input and interactive elements.
Examine the possible states of each component. For example, focused, hover, selected, pressed, checked, visited/unvisited, and expanded/collapsed.
Check if there are any other significant graphical objects on the page. These can be images of diagrams or instructional drawings that are necessary for the user to understand the content of the page.
You do not need to consider any inactive components or components that use the default browser styling.
You do not need to take into account any visual information that is already presented in text form on the page. Only consider visual elements if they are crucial and they are the only way to perceive the content.
To calculate the contrast ratio, you need to know the color code for the foreground color and for the background or adjacent color. The elements in the image versus the background of the page as well as adjacent colors should meet the minimum contrast requirements of 3:1.
You should, for example, use the background color to assess whether there is sufficient contrast between an icon's foreground color and the icon's background color. However, if you are measuring the contrast on a pie chart, it is typically the adjacent colors that you should measure, such as the color of two neighboring segments. You must therefore assess for yourself which color combinations are essential to distinguish from each other in order for the user to perceive the meaning of your content.
Follow these steps to alculate the luminosity contrast ratio between the text on the component, the component itself as in a pie chart for example, and the background color:
Use a color picker like ColorZilla (a Google Chrome extension) to “pick” the color from the icon in the component. In this example, the component we will look at is the delete button, with an icon of a red trash can on it.
Paste the color code into the “Foreground color picker” on the Acquia Color Contrast Checker. (If you are using ColorZilla, the color code automatically copies to your clipboard.)
Use the color picker to “pick” the color from the component background. In this example, the component (a button) background is pink.
Paste the color code into the “Background color picker” on the Acquia Color Contrast Checker.
Repeat for adjacent colors, for example on a pie chart or a varied background, to make sure that the contrast between each adjacent area is easy to distinguish. Do this if it seems like the button or image does not meet the minimum contrast requirements of 3:1.
Who in your team can typically fix this
Web team: (Visual Design and front-end developer) for changes in your CMS/website template.
Content Authoring: for issues that are found in content such as diagrams and info graphics.
Web Governance