Top seven free color contrast checkers & analyzers

Published by Hampus Sethfors

Here are seven great free tools that help you measure color contrasts and create beautiful, accessible color schemes that fulfill the contrast requirements in the Web Content Accessibility Guidelines (WCAG).

Crayons of different colors, photo.

1. Contrast Ratio

Contrast Ratio

Perfect if you just want a quick and easy contrast measurement.

  • Measure contrast quickly in this web app
  • Very intuitive to use
  • Open source if you want to contribute

Screenshot of Contrast Ratio

Contrast ratio interface screenshot, two input boxes for colors and a digit between them displaying the contrast measurement.

2. Tanaguru Contrast Finder

Tanaguru Contrast Finder

Perfect if you want to find a new accessible color combination if your combination fails.

  • Web app that measures contrasts
  • Suggests alternative colors if your combination fails
  • Open source if you want to contribute

Screenshot of Tanaguru Contrast Finder

Interface Tanaguru, showing new color suggestions for a color combination that failed the contrast requirements.

3. Colour Contrast Analyser – by The Paciello Group

Colour Contrast Analyser

Perfect if you’re measuring contrasts a lot.

  • Desktop application for Mac and PC
  • Analyze any colors appearing anywhere on your screen with the “Colour Picker”
  • Shows how contrast varies with different types of color blindness

Screenshot of Colour Contrast Analyser

Interface of Colour Contrast Analyser, showing a blue, white combo that passes everything except AAA-level

4. Color Tool at material.io – by Google

Color Tool (material.io)

Perfect if you want to create a complete color palette.

  • Web app created and curated by Google
  • Create an accessible color palette from scratch
  • Choose a text color and the tool shows the minimum opacity needed to fulfill contrast requirement

Screenshot of material.io’s Color Tool

Interface of Color Tool, shows red and black combo and accepted levels of opacity for the black text.

5. Accessibility Developer Tools – by Google

Accessibility Developer Tools (Chrome Store)

Perfect if you’re already using the Developer Tools in Chrome.

  • Chrome plugin that adds a layer to the developer tools
  • Shows color suggestions and lets you view them live on your site
  • Also adds an “Accessibility Audit” that let’s you find other accessibility issues than color

Screenshot of Accessibility Developer Tools

Interface of developer tools color checker, an accessibility tab shows at bottom of screen and measures contrast of selected text.

6. Color Contrast – iOS app by UserLight

Color Contrast at App Store

Perfect if you prefer working on iOS devices.

  • App for iOS devices
  • Test colors of apps, websites or screenshots
  • Available in iOS Control Center (swipe up from bottom of screen) for quick live testing

Screenshot of Color Contrast iOS app

Interface of iPhone color contrast tool. Lets you check contrast of photo or website.

7. Android Accessibility Scanner – Android app by Google

Android Accessibility Scanner at Google Play

Great if you work with Android apps.

  • Scan apps with your Android device
  • Points out other accessibility issues as well as contrasts
  • Created and curated by Google.

Screenshot of Android Accessibility Scanner

Interface of Google's accessibility checker, highlights area in app that has failing contrasts.

Get notified when we write new stuff

About once a week we write an article about accessibility or usability, that’s just as awesome as this one (#HumbleBrag)!

Get notified by following us on Twitter @AxessLab or Facebook.

Or simply drop your email below!