WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Grabbing the color from a webpage

for

From: Jared Smith
Date: Mar 9, 2020 5:47PM

The primary functionality of Colorzilla is purely visual. After selecting
the Pick Color From Page option, the mouse cursor changes to an eyedropper.
You can then click on any page element to collect it's color value. I
enable the "Automatically copy picked color to clipboard" to make it easier
to then paste the color value into a contrast checking tool (like
https://webaim.org/resources/contrastchecker/).

If you're unable to click or see the elements in the page, there is an
option for "Webpage Color Analyzer" that will list all of the CSS colors
(not helpful for images) in the page. However, this functionality is not
currently working for me in Chrome.

An alternative approach for getting CSS colors is to use the Styles or
Computed panes in Chrome Developer Tools (or similar options in other
browser developer tools).

Jared