Now with the new built in contrast checker in the color picker, we can change colors on the fly to see if they pass WCAG (Web Content Accessibility Guidelines) AA or AAA conformance. Lea Verou also released an awesome tool to check color contrast on the web. There is also a contrast checker on their website to use. I have used the WAVE extension from, you can get the extension in the Chrome store. What’s New in DevTools (Chrome 65) Backgroundīefore this tool was introduced, there were a few options out there to run color contrast checks on your experiences. Therefore, the content is easily readable. The foreground or text pops off of the background color. Now, if you had a white background with black text, like here on Medium, that is an example of amazing contrast.

The text would start to blend in to the background.

That text would not be good color contrast. For instance, if you have a white background with light gray text on top. And what do great questions deserve? Great answers, you got it!Ĭolor contrast is important because a user needs to be able to visually distinguish what is in the background, to what is in the foreground. I coach all the developers on the teams at work to use this tool when checking if colors meet contrast in the browser. This is surely an accessibility win if I have ever seen one. Today I am going to share a little bit of knowledge around the built-in color contrast checker inside the color picker INSIDE Chrome’s DevTools. 👋🏻 Hey all you wonderful developers out there in and around the interwebs! How is everyone doing this fine day? Good? That is what I like to hear.

Color picker chrome extension