Text Contrast

13 minute read

Last updated: Feb 23, 2026

Summary

Text contrast defines how well the text color stands out from the background color. Good text contrast is essential for good readability.

Overview

People with color blindness and low or limited vision require good contrast to distinguish between colors. What is good color contrast for one person may result in colors that are indistinguishable for another person. Good contrast makes reading easier 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.

In short, text contrast defines how well text stands out from its background. If an individual cannot see the text clearly, they may have difficulty understanding the content. Poor contrast can significantly reduce a website’s readability. With sufficient contrast, text is easier to see, and readability is improved for everyone.

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. Without good contrast, text may be difficult or even impossible to read.
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 white, can cause difficulties for people with dyslexia, Irlen Syndrome, light sensitivity, and autism.
There are people who need to use specific colors to see visual elements on the page. It is important to ensure that these individuals can use the operating system, browser settings, or assistive technology to override text and background colors and select their own colors.
Everyone is helped by good contrast when trying to read text in very low or bright light situations. For example, you may have difficulties reading text on a phone outside in bright sunlight.

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

Guidelines

These guidelines focus on Text Contrast. See Non-Text Contrast to learn about contrast for icons, buttons, and other non-text elements that convey information.

Dark gray text on white reads, “Good contrast makes text easier to read.” Light gray text on white reads, “Too little contrast can make reading difficult. — Figure 1: Contrast and Readability

Contrast determines how well text stands out from its background. The dark gray text on the white background in Figure 1 is easy for most people to see, but some individuals will have difficulty seeing the light gray text. Good readability depends on having sufficient contrast between the text and the background.

Requirements

The Web Content Accessibility Guidelines (WCAG) defines two levels of compliance for text contrast standards that apply to both text and images of text. These guidelines also include placeholder text, hint text, tooltips, or other similar text elements.

The guidelines express the light-to-dark contrast between the text and its background as a contrast ratio. Large, bold text is easier to read at a lower contrast ratio, which is reflected in the guidelines.

WCAG AA defines the minimum required level of contrast:

All text must have at least a 4.5:1 contrast ratio, except large text.
Large text may have a 3:1 contrast ratio.
- Large text is 18pt (24px) or larger, or 14pt (18.5px) bold or larger.

WCAG AAA is the preferred (enhanced) level of contrast.

All text must have at least a 7:1 contrast ratio, except large text.
Large text may have a 4.5:1 contrast ratio.

While it is an oversimplification, you can think of these contrast ratios as the text being 3, 4.5, or 7 times brighter or darker than the background. As a comparison, black text on a white background has a 21:1 contrast ratio.

Sample text is shown at 16 points and a 4.5 to 1 contrast, 12 points bold and a 4.5 to 1 contrast, 18 points and a 3 to 1 contrast, 14 points bold and a 3 to 1 contrast in a comparison to a 12 points black text with a 21 to 1 contrast ratio. — Figure 2: Text Contrast Levels

WCAG set the 4.5:1 contrast ratio as the minimum requirement to ensure text is readable for someone with 20/40 vision. This is equivalent to the vision of the average 80-year-old person. WCAG Level AAA provides enhanced color contrast guidelines that require a 7:1 contrast ratio for text (or a 4.5:1 contrast ratio for large text). This is intended to make the text readable for someone with 20/80 vision. See Understanding Success Criterion 1.4.3: Contrast (Minimum) for the rationale behind the WCAG contrast ratios.

People needing even greater contrast levels can adjust the colors on the display screen using assistive technology such as ZoomText or the computer’s platform settings.

You should always meet the minimum contrast requirements for text and try for better contrast where possible. The following image illustrates why this is important. The first row of colors in this image shows large red text against three colors: dark gray, light gray, and dark red. Even though all three color combinations meet the 3:1 minimum contrast requirement, some color combinations appear to have better contrast than others.

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

The last three rows of color combinations show the impact color blindness has on how people perceive color. The second row of colors has a Protanopia filter applied, the third row shows a Deuteranopia filter, and the last row shows a Tritanopia filter. In each instance, 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 can identify color combinations that work for people who are color blind.

Exceptions

Text contrast guidelines apply to all text or images of text with the following exceptions:

Logos
- A company logo can use any combination of colors, but try to choose colors with good contrast if you have a choice.
Purely decorative text
- For example, random words in a background image do not need good contrast.
Text that is not visible
- Text such as skip links that are not seen until they receive focus can be any color.
Text that is part of a picture that contains significant other visual content
- For example, a downtown street photograph that contains a sign with a store’s name.
Inactive controls
- Inactive controls are usually “grayed out” and difficult to see. This meets compliance guidelines but is not best for good readability. See Best Practices below to learn why.

Best Practices

It is a best practice to provide good color contrast for the text in inactive controls, even though it is not required. This guidance ensures that most sighted individuals can understand the function of the disabled element.

For example, a disabled submit button indicating that someone has not completed all required fields may confuse people who cannot see the button.
Individuals who cannot see the disabled button may not understand why they cannot submit the form.

Understanding Color Contrast

The U.S. Web Design System color tokens shown in Figure 4 illustrate the change in luminosity needed to meet the WCAG contrast ratios. The color tokens for each hue include 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.
A difference in grade of 50 represents a 4.5:1 contrast.
A difference in grade of 70 represents a 7: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 60 still have a 4.5:1 contrast ratio, just like the two grades of red in the figure 4 below. This is because contrast depends primarily on the difference in the luminosity of a color, not the color itself.

11 blocks of color, starting with white, ending with black, and with 9 evenly distributed shades of red between. Blocks are numbered in increments of 10, starting with 0 (white) and ending with 100 (black). Indicators identify each of the 3 WCAG contrast ratios. — Figure 4: 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 colors that are accessible.

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

Color Customization

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

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

Sensory-sensitive people may find oversaturated, high-contrast colors or large areas of bright yellow, orange, or red to be unsettling.
Some people with dyslexia, Irlen Syndrome, light sensitivity, and autism can have 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 5, it’s best to use dark (not black) and light (not white) colors together, but avoid using black on large areas of white.

Three magnifying glass icons with the text Search next to them: Gray on White (Use), Gray on Ivory (Use), and Black on White (Avoid). — Figure 5: Avoid Using Black on Large Areas of White

As you can see, making good color choices can be complicated. 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 are not able to use the above-mentioned tools to override color settings, then alternative color schemes must be included in the website design. At least one high-contrast color scheme must be included. This requirement usually only affects desktop applications.

High Contrast Theme applied to the Accessible Community Home Page inverts black and white, changing the dark blue text to cyan, but images remain the same. — Figure 6: High Contrast Theme Applied to Accessible Community Home Page

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

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

How to Test

There is a wealth of automatic and manual tools testers can use to check color contrast. No math is needed to compare color values and determine contrast ratios - the tools do all the hard work.

One of the most versatile tools for checking contrast is the Colour Contrast Analyser (CCA) from the Paciello Group (TPGi). It lets you use an eyedropper to sample the text or content color against the background color, or you can enter the color values. It tells you the color contrast ratio, provides pass/fail feedback, lets you play with the colors to explore other possible color choices, and lets you 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 7: Colour Contrast Analyser Test Results

The Colour Contrast Analyser Test Results are shown 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 text has sufficient contrast.

See Colour Contrast Analyser for more information on using CCA.

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

Screenshot of WebAIM’s Contrast Checker; see text for full description. — Figure 8: WebAIM Contrast Checker

This versatile tool has fields for entering foreground and background color values and blocks showing the two selected colors that can be used 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 each color’s lightness. The contrast ratio between the two colors and pass/fail results for normal text, large text, and graphics are shown.

The test results for text include a pass/fail indicator informing testers whether the two colors meet the contrast ratio guidelines for normal and large text. A graphical display also shows what the text on a page looks like using the two selected colors.

Listed below are a few of the many online color contrast checkers. Most of these tools include the ability to adjust the colors for better contrast or have other unique features. See Color Tools (Ta11y) for more tools and more information on using them.

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 and 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.
Color safe - Suggests text colors for the given background color and text style.
WhoCanUse - Results include color blindness contrast ratios and some vision disability simulators.
Hex Naw - Tests multiple colors at one time.
Eight Shapes - Builds a grid with multiple colors, shows all color combinations, and identifies all accessible color combinations.
Toolness - Builds a grid with multiple colors and shows all accessible color combinations.

Nearly all automated accessibility testing tools, such as WAVE, ANDI, axe devTool, and ARC Toolkit check for text color contrast within a website. Many of them provide tools to help you correct the color when there are errors and show you what new color choices look like on the website.

WAVE test results panel with the contrast tab selected. See text for full description. — Figure 9: Text Contrast Error Identified in WAVE

The figure 9 above shows the WAVE Color Contrast Test Results with a text contrast error identified for white text on a light cyan background. The colors fail WCAG AA and AAA tests for both normal and large text sizes. See WAVE for more information on using this tool.

Lastly, most browser DevTools include the ability to evaluate color contrast. This article from WebAIM describes how to check color contrast using the computed styles.