Color contrast

On this page:


Overview

Important:

This information is intended for web developers, providing a holistic process for performing an initial pass of evaluating your website for accessibility. This is not a substitute for performing a complete Web Content Accessibility Guidelines (WCAG) 2.0 AA site evaluation, but following this full process will capture most of the WCAG 2.0 AA Guidelines more efficiently.

It is impossible to meet the IU ADA Web accessibility policy using only automated tools.

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:

Note:
Use the Contrast Ratio tool to check a color with transparency.

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:

  • NoCoffee is a Chrome browser extension that can display a web page through a variety of filters, including eight 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.
Note:
  • You can use the Alt-left Shift-Print Screen keyboard shortcut to switch between high contrast and default settings in Windows.
  • The macOS Invert colors accessibility system preference is not functionally equivalent to Windows high contrast themes.

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

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

Get help

For questions or consultations, contact the User Experience Office's accessibility team.

This is document atgh in the Knowledge Base.
Last modified on 2019-10-30 14:44:36.

Contact us

For help or to comment, email the UITS Support Center.