When I open the dev tools, inspect an element, and click on the little color picker box for a CSS property that has a color, there should be two lines on the color gradient plane and a section that tells me if the color contrast is AA or AAA compliant, but there isn't.
Is there a setting somewhere to turn this on? Is this a known bug?
Everything I read online says that it should just be there. I've also seen the contrast checker area before on my machine. Maybe it was on a previous version.
I'm running Chrome Version 74.0.3729.169 (Official Build) (64-bit) on Windows 10.
I have all browser extensions turned off, and I've restarted chrome.
Relevant threads from the chromium dev team:
https://bugs.chromium.org/p/chromium/issues/detail?id=461320
https://bugs.chromium.org/p/chromium/issues/detail?id=514674
https://bugs.chromium.org/p/chromium/issues/detail?id=879856
It looks like it may have been removed because of buggy performance, but I can't find anything definite.
Best Answer
It looks like they opted to put the color contrast score somewhere else in Chrome 84. https://developers.google.com/web/updates/2020/05/devtools#a11y
If you turn on the inspect cursor (
Ctrl+Shift+C), then hover over an element, it will show you a few accessibility checks.