Checking Color Contrast Against WCAG Requirements

Relevant to: faculty and staff

This article contains information considered accurate at the time of publishing. Technology updates, changes in University security practices, policies and procedures may effect the information in this article - updates to articles are scheduled on a periodic basis and will address any required changes.

Why Does Sufficient Color Contrast Matter?

Have you ever had a difficult time reading an event flyer because of the colors used? Sufficient color contrast refers to how readable and accessible certain color combinations are against each other. When designing materials like flyers, it is important to use compatible foreground colors and background colors that offer sufficient contrast. This likely helps everyone to some degree, but is especially important for providing access to individuals with certain visual disabilities. Providing sufficient color contrast is also a WCAG requirement.

What's WCAG?

WCAG stands for Web Content Accessibility Guidelines. SUNY Empire’s Electronic Information Technology (EIT) policy requires WCAG compliance. For more information on WCAG, visit WCAG 2 Overview.

What are the Requirements?

As stated by WebAIM, required color contrast ratios are as follows:

  • WCAG AA, normal text = 4.5:1, large text = 3:1
  • WCAG AA, graphical objects = 3:1
  • WCAG AAA, normal text = 7:1, large text = 4.5:1
  • Bold text at size 14 is considered large text, as is regular text at size 18.

Meet AA, Strive for AAA

  • Make sure that your color contrast ratio at minimum passes for WCAG AA.
  • When using WebAIM's color contrast checker, a passing color combination will be indicated in green, and a failing color combination will be indicated in red.
  • As a best accessibility practice, strive for meeting WCAG AAA when possible.

Using WebAIM's Color Contrast Checker

WebAIM has an easy-to-use web-based color contrast checker, available at https://webaim.org/resources/contrastchecker/. Follow these steps to test color combinations:

  1. Locate the area that says Foreground Color and click the sample color (blue box).
  2. Select the eyedropper tool to pull a sample of the color you want to test. Alternatively, you can enter the HEX/RGB color code if you know it.
  3. Repeat these steps for the Background Color.
  4. View results to determine if you have sufficient color contrast.
  5. If your color combination does not pass color contrast requirements, you can increase or decrease the lightness to find a color combination that will pass.

Screenshot of the WebAIM Color Contrast Checker, showing the eyedropper tool and option to enter RGB color code. The sample shows a deep blue for the foreground and white for the background, with a contrast ratio of 8.59:1.

A screenshot of WebAIM's Color Contrast Checker results, showing the color contrast passes for WCAG AA and WCAG AAA for normal and large text, and passes WCAG AA for graphical objects and user interface components. The sample text is blue on a white background and says "The five boxing wizards jump quickly."

Other Color Contrast Checkers

Reference

Web Accessibility in Mind (WebAIM). (n.d.). WebAIM contrast checker. http://webaim.org/resources/contrastchecker/

Print Article