Here are some tools that specifically check for color contrast accessibility issues on websites. And a few related links below. Know any others?
Last updated April 2021. Please comment with corrections.
- WebAIM contrast checker
- Link Contrast Checker by WebAIM (for stubborn designers who won’t underline text links)
- Colour Contrast Analyser app by TPG
- Stark – for Figma, Sketch and Adobe XD
- Colour Contrast Check by Snook
Juicy Studio Accessibility Firefox add-on(no longer exists)- Chrome Color Contrast Analyzer plug-in
- Colorable – interactive web tool
- Contrast Ratio – by Lea Verou
- Tanaguru Contrast-Finder – web tool that offers solutions
- CheckMyColors – enter URL – by Giovanni Scala
- 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
- Contrast-A by Annika Hamann (requires Flash)
- Accessible color palette builder by “toolness”
- Hex Naw by The Scenery
- Contrast calculation – Javascript in CodePen by Heydon Pickering
- Color Contrast iOS app ($.99) 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
- The Contrast Triangle by Chip Cullen
More:
- NoCoffee vision simulator – Chrome extension
- ColorZilla color picker for Firefox and Chrome
- Eye Dropper Chrome extension
- Adobe Photoshop accessibility
- Color Contrast for Better Readability article by Viget
- Contrast — Color Accessibility Mac OS X app ($6.99) by Nothing Magical Inc.
24 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/ […]
[…] http://www.webaxe.org/color-contrast-tools/ […]
[…] http://www.webaxe.org/color-contrast-tools/ […]
[…] 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. […]
[…] 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 […]
[…] Color Contrast Tools […]
[…] Color Contrast Tools […]