Non-text Contrast

21 minute read

Last updated: Feb 23, 2026

Summary

Good non-text contrast helps meaningful visual elements stand out from the background. Meaningful visual elements, such as buttons, icons, and borders, help people understand the content. Good contrast is essential for people to perceive these elements.

Overview

Individuals with color blindness and those with low or limited vision require good contrast to distinguish between colors. What is considered good contrast for one person may result in indistinguishable colors for another. Good contrast makes non-text content easier to see when people are color blind or have low or limited vision.

Contrast is the difference in relative luminance (brightness) between two colors. Someone who is color blind may not be able to see the difference between red and green with the same luminance value, but they can see the difference in contrast between light red and dark green.

Meaningful non-text elements include all visual cues that convey meaning, information, or purpose. Visual cues like these are known as affordances, as they provide (afford) clues about how people can use an element. A small sampling of meaningful non-text elements includes:

Graphics that convey information:
- A house icon indicates a link to a website’s home page.
- The bars in a sales chart depict a company’s annual sales.
Borders, background colors, or graphics that indicate a function or relationship:
- A rectangular border identifies a form’s input field.
- A colored rectangle behind the word “submit” indicates a button.
- A border around three images indicates they are related.
Icons or graphics that identify a function or action:
- A pencil icon indicates that a document can be edited.
- Two small arrows indicate that a table column can be sorted.
Changes in an interactive element that indicate a change of state:
- A button changing color indicates it is hovered over.
- An arrow changing direction indicates that a dropdown menu has opened.

In short, meaningful non-text content can be any graphical element or visual cue needed to understand content. The magnifying glass icon is a clear example that most people are familiar with. It is commonly used to indicate a search field. Since the icon conveys information, it must contrast well with the background. If an individual cannot see the search icon, they may not understand that the option to search the site exists. If viewers cannot see the information provided by non-text content, like search icons, it can significantly reduce a website’s usability.

Who is Helped

Good contrast helps people with color blindness, low or limited vision, and certain cognitive disabilities.

People who are color blind or have low or limited vision rely on good color contrast to discern the differences between colors. Visual elements that convey information may be difficult or impossible to see without good contrast.
Oversaturated, high-contrast colors or large amounts of bright yellow, orange, or red can cause difficulties for sensory-sensitive people.
Very high-contrast color combinations, such as black text on a white background, can cause difficulties for people with dyslexia, Irlen Syndrome, light sensitivity, and autism.
Some people require specific colors to see visual elements on the page. It is essential to ensure that people can use the operating system, browser settings, or assistive technology to override text and background colors and substitute them with the colors they select.
Good contrast helps everyone see in very low-light or bright-light situations. For example, you may have difficulties reading text on a phone outside in bright sunlight.

Ensuring that all color combinations that convey information have good contrast means that most people can reliably perceive the information throughout a website, document, or any other product built using accessible color combinations.

Guidelines

These guidelines focus on non-text contrast. See Text Contrast to learn about contrast for text.

Two magnifying glasses on a white background. One is dark gray and has a green checkmark next to it. The other is a very light gray with a red X next to it. — Figure 1: Good and Bad Contrast Examples

Contrast determines how well content stands out from its background. The dark gray search icon on the white background in Figure 1 is easily visible to most people, but some individuals may have difficulty seeing the light gray icon.

Requirements

The Web Content Accessibility Guidelines (WCAG), Level AA, define the minimum required non-text contrast guidelines.

These criteria require that all meaningful non-text content have a contrast ratio of at least 3:1 against adjacent colors. While it is an oversimplification, you can think of this contrast ratio as the foreground content being three times brighter or darker than the background.

The WCAG requirement for non-text contrast applies to:

Visual cues that are needed to identify interactive elements.
Visual cues that are needed to identify active states of interactive elements.
Graphical objects, such as stand-alone icons and the parts of a graphic that are needed to understand its content. Examples include a search icon without a text label or the lines in a graph.

Interactive elements with another indicator that identifies their function, such as buttons with text, are not required to have visual cues like borders or colored backgrounds. If you use borders or colored backgrounds in an instance like this, they are not required to have good contrast. The one exception is when color alone indicates a state change for an interactive element. In this case, the color difference between the two states must meet the 3:1 contrast ratio.

Three sets of Yes/No radio buttons, with one button selected in each set. Different visual indicators are used each time. The following text fully describes the image. — Figure 2: Using Color to Indicate A Change of State

Figure 2 has three examples of white radio buttons with black borders on a white background. In each example, one of the two radio buttons is selected.

The first example changes the selected radio button’s color from white to black to indicate the change of state. Since the contrast is greater than 3:1, this example meets the contrast guidelines.
The second example changes the selected radio button’s color from white to light green and enlarges the border to indicate the change of state. The color change doesn’t meet the contrast requirements, but it is not the only indicator. The larger border also indicates the change of state, so this example passes.
The last example fails because it relies on color alone to indicate that the radio button is selected. The light green selected state has poor contrast with the white unselected state.

Meeting the 3:1 contrast ratio is essential when content relies on color to be understood. WCAG established the minimum 3:1 contrast requirement to ensure that non-text elements are discernible for individuals with 20/40 vision. This standard is equivalent to the vision of the average 80-year-old person (see Understanding Success Criterion 1.4.3: Contrast (Minimum) for the rationale behind the WCAG contrast ratios).

You should always meet the minimum contrast requirements for non-text elements and try for better contrast where possible. The following image illustrates the importance of this.

Three color combinations that meet minimum contrast requirements are shown for normal, protanopia, deuteranopia, and tritanopia vision. The image is fully described in the text. — Figure 3: Minimum Contrast & Color Blindness

The first row of colors in this image shows large red text against three colors: dark gray, light gray, and dark red.
The last three rows of color combinations show the impact of color blindness on how people perceive color.
The second row of colors has a Protanopia filter applied
The third row of colors has a Deuteranopia filter applied
The last row shows the colors with a Tritanopia filter.

For each type of color blindness, some color combinations no longer meet the minimum contrast standards. It is a best practice to meet the minimum contrast standards for different forms of color blindness when possible, although it is not required. Usually, only a slight increase in contrast is needed to provide this support to people who are color blind.

Tools like the Adobe Color Tool and WhoCanUse help identify color combinations that work for people with color blindness.

Exceptions

Logos
- A company logo can use any combination of colors. If you have a choice, choose colors with good contrast.
Decorative graphics and images
- Examples include a pattern used for a decorative background or parts of a diagram that do not convey information.
When specific colors are essential to the information
- Examples include images of flags, medical or scientific imagery, or other similar images that require specific colors.
Inactive or disabled elements
- Inactive and disabled elements are usually “grayed out” and difficult to see. This design affordance meets compliance guidelines but is not best for usability. See Best Practices below to learn why.

Best Practices

WCAG requirements for non-text contrast are limited to specific elements and objects. Many non-text elements that convey information to viewers are not covered. You should always consider why these design elements are part of the design. What information is conveyed by a radio group’s border or a greyed-out button? If a border, background, or color change is important enough to include in the design so that some people can see it, isn’t it important enough that all people should see it?

This criterion illustrates an instance where better usability equates to better accessibility beyond the limits of the WCAG criterion. Affordances like borders around a button make it easier to identify the word as a button, lowering the cognitive load for everyone. Providing a good contrast for the border ensures that all viewers can see it.

Borders and Backgrounds

It is a best practice to provide good contrast for graphical elements that group or separate objects on a page, as these provide important cues about the content’s organization.

Examples include borders or background colors such as:

A background color that indicates the banner area of a web page.
A border that groups related images.
A border combined with a background color to group an image and related text in a card component.

Three cards each contain the title of an Accessible Community service, a short description, and a link. The cards have a similar appearance, with a border surrounding each one. All three cards are co-located in an area with a gray background. — Figure 4: Cards Defined by Borders and Background Colors

In Figure 4 from the Accessible Community home page, borders and background color changes help define three separate but related content areas.

The borders help people understand that each card’s title, text, and link relate to a single topic.
The proximity of the three cards on a background with a different color from the adjacent content helps viewers intuit that these three topics are related.

Icons

Icons with text labels that convey their purpose are not essential for understanding content, so good contrast is not required.

It is a best practice to provide good contrast for all icons to ensure that individuals with low vision and color blindness can see these visual cues.
Visual cues, such as icons, reinforce the purpose conveyed by text labels and are especially helpful for people with cognitive and learning disabilities.

Three home icons on a white background. One is dark gray and has no label, so it requires good contrast. One is light gray but has a “Home” label below it, so good contrast is optional. The last is dark gray and has a “Home” label below it, so good contrast is not required, but is still recommended. — Figure 5: Icon Contrast Examples

Interactive Elements

It is a best practice to provide borders and colored backgrounds to help people understand the purpose of an element.
- For example, a border around the word “submit” helps people understand that this word functions as a button. This type of affordance is beneficial for people with cognitive and learning disabilities.
It is a best practice to provide good contrast for visual cues, such as a button’s border or background, to ensure that individuals with low vision and color blindness can see these cues. Good contrast ensures these individuals can find the input field or button and know where to click.
If color is used to indicate a change of state, it is a best practice to provide good contrast. This guidance remains true even when another distinguishing factor, such as added text or a wider border, is used to indicate the change.
It is easier for everyone to know where to click when form fields and buttons have borders or backgrounds with good contrast.

Two submit buttons. One is labeled “required,” and the border is an extremely light blue, but the text is a dark enough shade of blue to meet contrast requirements. The other is labeled “recommended,” and both the button border and text are dark enough shades of blue to meet contrast requirements. — Figure 6: Recommended Contrast for Interactive Elements

Disabled Elements

Disabled elements can provide important cues to people about the functionality of an interactive element. It is a best practice to provide good color contrast for inactive and disabled elements, even though it is not required. This guidance helps all viewers better understand the function of the disabled element.

For example, if a submit button is disabled to indicate that someone has not completed all required fields, then people who cannot see the button may be confused. These individuals may not understand why they are unable to submit the form.

Two submit buttons. One is labeled “exempt,” and both the button and text are an extremely light gray. The other is labeled “recommended,” and both the button border and text are dark enough shades of gray to meet contrast requirements. — Figure 7: Recommended Contrast for Disabled Elements

Understanding Color Contrast

The Accessible Community home page illustrates the use of non-text contrast to convey information. This page begins with a banner area featuring a white background, as illustrated in Figure 8 below. The content below the banner area is visually separated from it by a dark background image. The change in the background color serves as a visual cue or affordance, indicating to users that these two parts of the page are distinct. Because the change of color has meaning, it should have at least a 3:1 contrast ratio.

Banner area of the Accessible Community home page has dark text on a white background, followed by an area of white text on a dark background image. — Figure 8: Using Background Color to Define Two Content Areas

It’s essential to understand what a 3:1 contrast change looks like. The U.S. Web Design System Color Tokens, shown in Figure 9 below, illustrate the change in luminosity required to meet the WCAG 3:1 contrast ratio. The color gradient for each hue includes a range of colors that go from white to black in even steps or grades of 10, starting with 0 (white) and ending with 100 (black). A difference in grade of 40 represents a 3:1 contrast.

This relationship between grades holds regardless of the color (hue). A blue with a grade of 10 and an orange with a grade of 50 still have a 3:1 contrast ratio, just like the two grades of red in Figure 9 below. This differentiation between color and contrast exists because contrast primarily depends on the difference in luminosity between colors, rather than the colors themselves.

11 blocks of color, starting with white, ending with black, and with nine evenly distributed shades of red between. Blocks are numbered in increments of 10, starting with 0 (white) and ending with 100 (black). An indicator identifies the span from grade 10 to grade 50 as a 3 to 1 contrast ratio. — Figure 9: U.S. Web Design System Red Color Tokens

Addressing color contrast can be very complex. Understanding the color relationships presented in the U.S. Web design System makes it easier to identify and select color combinations that are accessible.

See Accessible Color Themes for more information on selecting accessible color combinations.
See Color and Accessibility (Ta11y) to learn more about the components of color and how they affect accessibility.

Choosing an Icon Set

When users override colors with a tool like ZoomText or Ease of Access, both the text and font icons automatically change to the user’s preferred color. When images are used instead of font icons, their color usually remains the same because most of the tools used to override color settings do not affect them. For this reason, selecting an icon set that works well against both dark and light backgrounds is important. There are two approaches to meeting this guideline:

Select an icon set in a mid-range color that meets the 3:1 contrast guideline when tested against both black and white backgrounds.
Select an icon set with a light color and a dark border, or a dark color and a light border.

Four accessible search icons: gray on white, gray on black, cyan with a black border on white, and cyan with a black border on black. — Figure 10: Two Icon Sets that work on both Black and White Backgrounds

Working with Complex Images

Color contrast in complex images that convey information can be challenging. Separating elements with contrasting borders or white space is helpful when an image uses many colors. This is because it is impossible to successfully use more than two colors, even with a white background and black text, that have a contrast ratio of at least 3:1 to the background and to each other. This technique is especially helpful for charts and graphs. When combined with direct labeling, only the contrast to the border or background color is important; the contrast between one chart element and another is no longer critical.

Pie chart shown without and with a Deuteranopia filter is divided into four sections: apples, bananas, oranges, and grapes. Each section has a different color, a direct label, and the sections are divided by white space. — Figure 11: Pie Chart Using White Space Between Sections (shown without and with a Deuteranopia filter)

See Charts and Graphs (Ta11y) for in-depth information on using multiple colors in charts and graphs.

Color Customization

Perhaps the most critical guidance regarding color is to ensure that people can always substitute their color choices for yours.

While higher-contrast colors are best for supporting some groups of people with low vision, other groups of people need to avoid very bright and very high-contrast colors. Beyond WCAG: Losing Spoons Online describes one person’s reaction to the use of high-contrast and very bright colors.

Sensory-sensitive people may find oversaturated, high-contrast colors or large areas of bright yellow, orange, or red unsettling.
Some individuals with dyslexia, Irlen Syndrome, light sensitivity, and autism may experience difficulties with high-contrast colors, such as 100% black on a 100% white background, particularly when there are large areas of white space. As shown in Figure 12, it’s best to use dark (not black) and light (not white) colors together, but avoid using black on large areas of white.

Figure 12: Avoid Using Black on Large Areas of White

As you can see, making good color choices can be a complex process. Follow these rules of thumb to make color choices that help support all people:

Always aim for color combinations that meet or exceed the minimum color contrast standards.
It is impossible to select colors that will work for everyone, so users must be able to substitute their color choices. Ensure people can use browser settings, platform accessibility settings (Windows OS), or assistive technologies such as ZoomText (Freedom Scientific) to override the website’s colors and select the colors that best meet their needs. Tools like these can override color settings in both websites and documents, although most will not affect images.
It is a best practice for websites to honor platform settings if the user asks for a specific type of color theme. Check the platform settings to see if the user has selected options asking for a light, dark, or high-contrast color theme. You can then use CSS media queries, like prefers-color-scheme and prefers-contrast, to control the colors used by the website. See Color Control with Media Queries (Ta11y) for more information on this technique.
If users cannot use the browser settings, platform settings, or assistive technologies to override color settings, then the site must provide alternative color schemes. At least one of the alternative color schemes must be a high-contrast color scheme. This requirement usually only affects desktop applications.

Dark Theme applied to Accessible Community Home Page inverts black and white and changes the dark blue text to cyan, but images remain the same. — Figure 13: Dark Theme Applied to Accessible Community Home Page

Figure 13 shows the Accessible Community home page with the High Contrast Theme enabled. The light and dark page colors are inverted, but the images remain unchanged.

Colors may not seem appealing when a high-contrast theme is applied to a page, but there is no way to predict the colors a specific individual may need. What matters is that users can substitute their color selections, and all information remains available regardless of the color choices a user makes.

How to Test

Accessibility test tools such as WAVE, ANDI, axe devTool, and ARC Toolkit do not currently run automatic color contrast checks for non-text elements. However, testers can still choose from many tools to manually check color contrast. No math is needed to compare color values and determine contrast ratios—the tools do all the hard work.

What Colors Should You Sample?

The WCAG guidelines require that all meaningful non-text content have a contrast ratio of at least 3:1 against adjacent colors. In some cases, it is unclear which color is adjacent to another. For interactive elements, “adjacent colors” refers to the colors immediately next to the component.

Two identical “Name” input fields with light backgrounds and dark borders are shown against both a light and a dark page background. — Figure 14: Measuring Element-to-Background Contrast

When elements are designed like the input fields in Figure 14 with a light background color and dark border color, you can use either color to measure contrast against the page background.

The input field’s dark border color makes it easy to see against the lighter page background.
The input field’s light background color makes it easy to see against the darker page background.

This guidance applies to all similar elements, such as a focus indicator that uses both a white and a black outline.

When you place elements over an image or gradient, you must use the least contrasting area for this test. If the colors do not meet the 3:1 contrast requirement, you must determine if enough of the element has good contrast to be understood. There is no specific guidance on how much is “enough,” so this check is based on your best judgment.

Checking Contrast for Static Elements

One of the most versatile tools for checking contrast is the Colour Contrast Analyser (CCA) from the Paciello Group (TPGi). It allows you to use an eyedropper to sample the text or content color against the background color, or you can enter the color values manually. It displays the color contrast ratio, provides pass/fail feedback, allows you to experiment with colors to explore alternative color options, and enables you to view content through color blindness filters. CCA is a desktop tool and can be used to test both desktop applications and browser-based websites.

Screenshot showing Colour Contrast Analyser Test Results, see text for full description. — Figure 15: Colour Contrast Analyser Test Results

Figure 15 above shows the Colour Contrast Analyser test results for two colors on the Accessible Community home page. A dark blue foreground color (hex value 041058) has a contrast ratio of 8.7 to 1 against a teal background color (hex value 33CCCC). Testers can use the contrast ratio in the test results to determine whether non-text elements have sufficient contrast.

See Colour Contrast Analyser for more information about using CCA.

Many easy-to-use online color checkers are available to enter two color values and return pass/fail results, such as WebAIM’s Contrast Checker.

Screenshot of WebAIM’s Contrast Checker; the “Graphical Objects and User Interface Components” section is highlighted for identification. Text results indicate that the selected component passed the color contrast check. See text for full description. — Figure 16: WebAIM Contrast Checker

This versatile tool has fields for entering foreground and background color values, as well as blocks that display the two selected colors. You can use the color blocks to access a color picker that includes an eyedropper. The eyedropper lets testers select colors from any location on the screen display. There are also sliders to adjust the lightness of each color. The results show the contrast ratio between the two colors and pass/fail results for normal text, large text, and graphics.

The test results for graphics cover graphical objects and user interface components. A pass/fail indicator informs testers whether or not the two colors meet the 3:1 contrast ratio. A graphical display shows what the two colors look like using a checkmark icon and a border for a form field.

Below are a few examples of the many online color contrast checkers available. Most of these tools allow you to adjust the colors for better contrast or have other unique features. See Color Tools (Ta11y) for additional tools and information on their use.

WebAIM Color Contrast Checker - Provides test results for text and non-text elements. Colors can be adjusted to find better combinations. It includes an eyedropper that lets testers select colors from any location on the screen display.
Contrast Ratio - Includes the option to check colors with transparencies.
Color Review - Adjust the hue to see the entire range of accessible colors available for that hue against a selected background color.
Tanaguru contrast finder - Suggests better colors to meet contrast requirements.
WhoCanUse - Results include color blindness contrast ratios and some vision disability simulators.
Eight Shapes - Builds a grid with multiple colors, shows all color combinations, and identifies all accessible color combinations.

Most Browser DevTools also include the ability to evaluate color contrast. This article from WebAIM describes how to check color contrast using the computed styles.

Checking Contrast for Interactive Elements

The browser’s DevTools are a good option for testing interactive elements with multiple states, such as hover and focus, as they can force elements to appear in these inactive states. See Browser Inspect / DevTools (Ta11y) for more information on testing with DevTools.

Figure 17 below shows two views of a button and the DevTool’s Style pane. The focused button is darker than the unfocused button and has a border.

Screenshot of the DevTools Style pane with two views of a button. The focused button is darker than the unfocused button and has a border. In the Styles pane, the “:hov” button and the “:focus” checkbox are selected. — Figure 17: DevTools Contrast Check with Forced Focus State

To force an element to appear in an inactive state so that its color can be assessed for correct contrast:

Right-click on an element and select “Inspect” to open DevTools and expose the code for that element.
Go to the “Styles” pane and select the “:hov” button. Selecting this button reveals a list of possible states for the element.
Select the state to be tested, such as ‘hover’ or ‘focus’. Selecting the state forces the chosen state to appear on the web page. The change will persist until the option is deselected, DevTools is closed, or the page is reloaded.
Use a tool like CCA or WebAIM’s Color Contrast Checker to test the contrast of the interactive element’s color while in focus, hover, or other applicable state.

As an alternative to using the browser’s DevTools, testers can take a screenshot of interactive elements in their focus or hover state. Contrast checkers like CCA and WebAIM can then test the color contrast of the element’s changed state in the screenshot.