This Developer Tools extension allows you determine whether or not the color contrast on a site is WCAG 2.0 AA and AAA compliant.
ColorA11y allows you to easily select a foreground color and a background color, and determine whether or not the contrast ratio between the 2 colors is WCAG 2.0 compliant. ColorA11y can help validate the existence of web accessibility issues you think you already have with color contrast. This Developer Tools extension can also help verify you're technically adhering to the WCAG 2.0 color contrast guidelines. Simply open the Developer Tools in Chrome, and open the ColorA11y tab. Currently, this works best using Mac's color picker, and not the Windows native tool. I'm working on integrating this with Spectrum, and will have an update shortly.
- (2018-08-08) Nick Welsh: Not easy to use. Lacking basic ease of use functionality. May be broken in latest versions of Chrome. Tested in Chrome Version 68.0.3440.84 (Official Build) (64-bit)
- (2018-02-27) Santina Croniser: a bit odd to figure out, but fantastic once you do! Highly recommended!
- (2018-09-11, v:1.3) Chase Wing: Low color contrast when Dev. Tools theme is switch to dark
Needs an alternative theme for the dark theme within dev. tools.
- (2015-07-20, v:1.3) a11y Sherpa: Eyedropper?
Hi There. When I try to select a new colour, the window that pops up only has a gradient and hex entry. The icons in your screenshots are missing so there is no way to sample a colour from the screen that I can find. Is this expected? Thanks. (ChromeOS)
- (2015-06-15, v:1.2) Lainey Feingold: Can't find icon next to address bar
I downloaded the extension but don't see the icon. I see my other extensions. I also see the little tool to move the address bar to the left but it doesn't move. Thx