How can I test text color contrast?


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


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

  • The Accessible Web Scanner - within Console, 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.
  • Paciello Group's Colour Contrast Analyser (CCA) - 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.