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
35 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 […]
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!
[…] Farben: kontrastreiche Farben verwenden und die Kontraste checken (es gibt onlinen viele Kontrast-Checker). […]
[…] Color Contrast Tools […]