Skip to main content

Personal tools

Translate

WebAim Contrast Checker

WebAim Contrast Checker allows users to check the contrast between text and background colors.

WebAim Contrast Checker Interface

Users who design and present content must ensure that their text has proper contrast with the background.

The WebAim Contrast Checker can help you check your color contrast.

Use WebAim to check your text color and background for normal-sized and large-sized text, and WebAim will instantly let you know whether the contrast passes or fails WCAG 2.0 standards.

For additional explanations of WCAG 2.0's standards for contrast, you can consult the WebAim Contrast Checker or the Contrast Guide by Nothing Magical.

Who WebAim Contrast Checker Helps

Staff at schools and departments use Microsoft, Google, and Adobe to create and share materials for students, families, and employees. These tools allow users to adjust text and background colors.

As you craft your materials, check color contrast so that your audience has equal access to the information:

  • Slideshows
  • Documents
  • Images
  • Flyers
  • Infographics

Additional Resources

As you design your materials, consult the APS Branding Colors for information on approved APS colors as well as accessibility and color contrast.

Use Color Safe to design accessible color palettes based on WCAG Guidelines for text and background contrast.

How to Use the WebAim Contrast Checker

WebAim has detailed instructions and technical information on how to use their tool.

  1. Go to the WebAim Color Contrast Checker.
  2. Enter your text and background colors using their color picker, or enter the color value. If you need to extract the color value from a page, you can use Colorzilla or the Contrast Color Accessibility App for Macs.
  3. Adjust your color until you pass the contrast checker. Required contrast ratios depend on whether you are using normal-sized text or large-sized text.
    • Normal text (12-point) requires a contrast ratio of 4.5:1
    • Large text (14-point and bold, 18-point, or larger) requires a contrast ratio of 3:1

Recommendation

Color contrast must pass the WCAG 2.0 Level AA standard. For enhanced contrast, strive to meet WCAG 2.0 Level AAA where possible.

This page was last updated on: June 29, 2020.