Check color contrast on a website

• Overview
• Recommended contrast ratios
• Color contrast evaluation
  • Text over images
  • Recommended tools
• High contrast display settings
• Get help

---

Overview

To accommodate people with low vision or color vision deficits, web pages should be designed with adequate contrast between the text and its background. Buttons, links, and other user interface components also should have adequate contrast compared to their backgrounds.

Recommended contrast ratios

The W3C Web Content Accessibility Guidelines (WCAG 2.1) provide the following contrast ratios as success criteria for helping people distinguish foreground content, such as text and buttons, from background elements:

• For people with moderately low visual acuity (20/40), the contrast ratio between text and its background should be at least 4.5:1. For large-scale text (at least 18-point normal or 14-point bold), a contrast ratio of at least 3:1 between text and its background is recommended. For more, see Success Criterion 1.4.3 Contrast (Minimum).
• For people with low visual acuity (20/80), the contrast ratio between text and its background should be at least 7:1. For large-scale text (at least 18-point normal or 14-point bold), a contrast ratio of at least 4.5:1 between text and its background is recommended. For more, see Success Criterion 1.4.6 Contrast (Enhanced).
• Link text embedded in paragraphs should have a contrast ratio of at least 3:1 compared to the paragraph text. For more, see Success Criterion 1.4.11 Non-text Contrast.
• User interface components, such as buttons, and graphical objects (parts of graphics that are required to understand the content) should have a contrast ratio of at least 3:1 against adjacent colors (Success Criterion 1.4.11 Non-text Contrast).

Color contrast evaluation

Some color contrast problems are easily identified when looking at a web page. These include text and background color combinations that hurt your eyes or make the text difficult to read, and user interface components, such as buttons, that blend into the background.

Automated tools are available for checking color contrast. You should do a visual check to confirm any issues found by automated tools. Many tools do not reliably check images of text, text over images, or gradients for color contrast.

To properly evaluate the color contrast of your web page:

1. Identify areas of potential low color contrast either visually or with an automated tool.
2. Determine the RGB or hexadecimal value for the color of the text, button, or graphical object.
3. Determine the RGB or hexadecimal value for the color of the background.
4. Check the contrast ratio using a color contrast tool.

Text over images

Manually check any text that displays over an image. Depending on screen width and responsive design, the location of your text may vary in relation to the underlying image. Consequently, you should check the text against background colors from more than one area of the image.

Confirm that a default background color has been set using CSS, and make sure it provides enough contrast with the text if images are turned off or fail to load. For example, white text may have sufficient contrast when displayed over your background image, but it will be invisible when displayed over a default white background.

Recommended tools

Following are recommended tools for checking color contrast ratios:

• Contrast Finder
• Contrast Ratio
• WebAIM Color Contrast Checker
• WebAIM Link Contrast Checker
• Colour Contrast Analyzer from The Paciello Group

While not part of a standard evaluation, simulating vision impairments can be helpful during the design process or for demonstrations. Following are recommended tools for simulating vision impairments:

• A11y – Color blindness empathy test is a Chrome browser extension that can display a web page through a variety of filters, including nine types of color vision deficits.
• Toptal.com Colorblind Web Page Filter is a web-based tool with filters for four types of color vision deficits; it provides a side-by-side comparison of the page with and without the chosen filter.

High contrast display settings

Along with checking color contrast, you should also check how your web pages appear when high-contrast display settings are used. In Windows, you can do this using high-contrast themes:

1. Select Settings > Ease of Access > High contrast.
2. Under "Use high contrast", click or tap the "Turn on high contrast" toggle switch.
3. Under "Choose a theme", use the drop-down list to select a high contrast theme.

Checking your web page with high contrast settings helps ensure that no visual content will be lost. Some specific issues to check include:

• Informative CSS background images, including icons, that may disappear
• Background images with text
• Transparent backgrounds on PNGs or GIFs
• Colors used to convey meaning, such as differentiating heading levels
• Buttons without borders
• Text fields and other form elements
• Any other lost content

View the short Quick accessibility test: High Contrast mode video for a demonstration.

Next step: Check zoom and magnification for web accessibility
Previous step: Use a screen reader to evaluate a website
Return to index: Perform an accessibility review on your website

Get help