Acquia Copilot is a conversational AI connected into our product documentation and knowledge base. Ask Copilot about product features, technical details, troubleshooting and how to get started with Acquia products.
The visual presentation of UI and graphics components have a contrast ratio of at least 3:1 against adjacent color(s)
1.4.11 Non-text Contrast
This document provides information about the related accessibility checks:
The visual presentation of UI and graphics components have a contrast ratio of at least 3:1 against adjacent color(s).
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 trouble seeing 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.
Please observe that 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.
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 gives some examples of the issue.
Example 1
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
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
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
How to review and fix the issue.
This is a review check. This means 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."
Note
You do not need to consider any inactive components or components that use the default browser styling.
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.
Note
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.
How to find the contrast ratios
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.
Calculate the luminosity contrast ratio between the text on the component, the component itself as in a pie chart for example, and the background color. To do this:
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.
Tip!
If the image on the component is hard to select with the color picker, hover over it with the cursor. The small bar at the top of the color picker extension shows the code for the color.
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.
The visual presentation of UI and graphics components have a contrast ratio of at least 3:1 against adjacent color(s)
1.4.11 Non-text Contrast
This document provides information about the related accessibility checks:
The visual presentation of UI and graphics components have a contrast ratio of at least 3:1 against adjacent color(s).
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 trouble seeing 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.
Please observe that 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.
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 gives some examples of the issue.
Example 1
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
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
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
How to review and fix the issue.
This is a review check. This means 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."
Note
You do not need to consider any inactive components or components that use the default browser styling.
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.
Note
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.
How to find the contrast ratios
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.
Calculate the luminosity contrast ratio between the text on the component, the component itself as in a pie chart for example, and the background color. To do this:
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.
Tip!
If the image on the component is hard to select with the color picker, hover over it with the cursor. The small bar at the top of the color picker extension shows the code for the color.
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