How can I test text color contrast?

Question

Is there a way that  I can test the color contrast of text and graphics?

Answer

At Accessible Web, we utilize the following methods for checking color contrast:

  • The Accessible Web Scanner - within RAMP, we have built an automated scanning tool. One of the rules this scanner checks for is color contrast. This only works when the font color and background color are defined (ie. you'll need to use a different tool in order to check the contrast of text on a background image, for example).
  • Chrome DevTools - within Chrome DevTools, there is an element inspector (click the button in the top left corner of DevTools, labeled "Select an element in the page to inspect it"). When this tool is active, you can hover over text and it will tell you the Color, Font, Margin & Contrast. This is great for on-the-fly, quick checks of individual elements.
  • Accessible Web WCAG Color Contrast Checker - This tool is a great way to test contrast ratios of text on images and other places where the background color isn't defined and therefore, automated tools cannot tell you the ratio.

Free Tools to Continue Learning

Accessible Web Company Logo

Accessible Web RAMP

Monitor your website and manage your progress towards WCAG conformance.

Accessible Web Company Logo

Accessible Web Academy

Career specific courses to help power up your accessibility knowledge.