Color Contrast Tools

Here are some tools that specifically check for color contrast accessibility issues on websites. And a few related links below. Know any others?

Updated April 2024. Please feel free to comment with additions and corrections.

WebAIM contrast checker
Link Contrast Checker by WebAIM (for stubborn designers who won’t underline text links)
The Contrast Triangle by Chip Cullen
Colour Contrast Analyzer app by TPG
Stark – for Figma, Sketch and Adobe XD
Colour Contrast Check by Snook
~~Juicy Studio Accessibility Firefox add-on~~ (no longer available)
Color Contrast Analyzer Chrome plug-in by NCSU
Colorable – interactive web tool
Contrast Ratio – by Lea Verou
Tanaguru Contrast-Finder – web tool that offers solutions
WCAG Contrast checker – Firefox add-on by Rumoroso
Colour Contrast Determinator (beta) by Vision Australia
ColorA11y Chrome extension by Matt Long
A11y Color Palette by Matt Long
Color Contrast Analyzer – Chrome extension by NCSU/Greg Kraus *supports gradients and advanced CSS attributes
Text on background image a11y check – great for text over images
Color Contrast Tester by Joe Dolson, supports alpha
Accessible color palette builder by “toolness”
Hex Naw by The Scenery
Contrast calculation – Javascript in CodePen by Heydon Pickering
Color Contrast iOS app (free with ads) by UserLight Ltd.
Contrast Finder by Asqatasun (GitHub)
WCAG Contrast Checker by Acart Communications
HTML Color Codes by Dan’s Tools, supports alpha
Contrast Checker by Fog Creek via Glitch
Color by Cloudfare Design
Color.Review by Anton Robsarve
Contrast Grid by Eightshapes
Pa11y – Create Accessible Color Palettes
Button Contrast Checker by ADITUS
Who can use this color combination? by Corey Ginnivan
Color Palette Contrast Checker by Deque Systems
Deque Color Contrast Analyzer by Deque Systems
Odd Contrast by OddBird (Warning: doesn’t apply alpha channel at time of posting)
Are my Colours Accessible? by Simon Taggart
Accessible Brand Colors by Use All Five
~~NoCoffee vision simulator~~ (no longer available)
ColorZilla color picker for Firefox and Chrome
Eye Dropper Chrome extension
Color Contrast for Better Readability article by Viget
Contrast — Color Accessibility Mac OS X app ($6.99) by Nothing Magical Inc.
Contrasts – iOS app, free plus upgrades

color wheel

33 replies on “Color Contrast Tools”

I use the Contrast tool available in the tota11y bookmarklet. You just run it and it highlights which elements on the page have low contrast.

The ColorA11y Chrome extension is a personal favorite 🙂

[…] http://www.webaxe.org/color-contrast-tools/ […]

I’m not seeing this tool listed: http://colorsafe.co/
Thanks, Dennis, for such a comprehensive collection.

I use Color Oracle to view content through three different kinds of color blindness.

Scrap the grey text on white. Get real. Make text to background contrast for all to view with black text.

[…] They have gotten better from version 3 to version 4, but it’s still important to test any color combination you have on your website to make sure it has a high enough contrast. Webaim has a good color contrast checker, otherwise you can get a browser plugin to help check. […]

This tool analyses your text/background colour contrast

If it is not accessible, it suggests the closest background/text combination that is accessible

http://accessible-colors.com/

[…] Show notes: Check out our show, ATFAQ at http://www.ATFAQshow.com Inclusive Design: 12 Ways to Design for Everyone – Shopify http://bit.ly/2Kwhdxl Dennis’ LINKS Adrian Roselli’s blog: http://adrianroselli.com/ Deque Cauldron patterns: https://pattern-library.dequelabs.com/ eBay MIND patterns: http://ebay.github.io/mindpatterns/ Color Contrast Tools http://www.webaxe.org/color-contrast-tools/ […]

[…] WebAxe pueden encontrar diferentes herramientas para ayudar a diseñadores a elegir una paleta de colores accesible, según las pautas de accesibilidad de la (WCAG) […]

Hello,

may I suggest to add this free online application to check color contrast ?
https://amadeusitgroup.github.io/Colors-for-All/

– Users can create/edit/duplicate/delete/save each palette.
– The application offers unlimited color palettes.
– There is no limit in the number of colors per palette.

Rgds,
JP

Hi Denis,
I made a listof color contrast tools here
https://www.digitala11y.com/color-contrast-analyzers-checkers/

[…] WebAxe pueden encontrar diferentes herramientas para ayudar a diseñadores a elegir una paleta de colores accesible, según las pautas de accesibilidad de la (WCAG) […]

[…] More color contrast tools […]

[…] Web Axe list of color contrast checkers […]

[…] Color Contrast Tools […]

[…] Herramientas de contraste de color […]

[…] Color Contrast Tools […]

CheckMyColors has been discontinued.

Removed, thank you!

You can create an entire color palette by defining the target contrast ratios (rather than auditing after-the-fact) with Adobe’s Leonardo.

It also has a contrast checker that allows you to check contrast of colors that have alpha transparency, which is one thing missing from a lot of other contrast checkers.

This is a very comprehensive list indeed. Most of these are based on the WCAG 2.x era contrast math, which as we know is somewhat limited to to the last 17 years of ever shifting technology.

For the emerging WCAG 3.0, we have developed the new method to replace the older 2.x math. The new method is the APCA — Advanced Perceptual Contrast Algorithm.

It has been incorporated into a number of contrast tools, and the canonical technology demonstrator is:

https://www.myndex.com/APCA/

Among other things, APCA considers important factors such as font weight, and the difference between text and non-textual contrast needs.

But most important, unlike WCAG 2, APCA for WCAG 3 is perceptually accurate as per human perception, so it provides a solid foundation for useful design guidance.

Thank you,

Andy

[…] tra độ tương phản màu sắc tốt , nếu không bạn có thể nhận được một plugin trình duyệt để giúp kiểm tra […]

[…] Color Contrast Tools […]

Hi there, great list. Could you please add Contrasts for macOS and iOS: https://contrasts.app

Hi there,

I‘m working on a contrast checker tool for iOS and macOS. It aims to be more intuitive and easier to use than most other tools. You can find it at: http://www.contrasts.app

It would be great if you could have a look and perhaps consider it in your a11y tool list.

Thank you,

Chris

Added!

33 replies on “Color Contrast Tools”

Leave a Reply Cancel reply