23

According to the dev tools docs, you can view the contrast ratio of a text element in the Color Picker as of Chrome 65 - January 2018

However, sometimes the functionality appears buggy, as identified in this thread on Is "Contrast ratio" no longer available in Developer Tools?

Here's an example where the contrast picker doesn't show up

no contrast information available

Sometimes adding a background color can trigger it into working again. Has anyone else successfully found a way to get it to work? Are the others tools / recommendations to fallback to if the native contrast toolbox doesn't show up?

Alternative: contrast contrast in FF

KyleMit
  • 5,992
  • 7
  • 46
  • 61
  • It works only in some cases, for example if element has only text - it will work, but if element has text and links - it may not work. – ViliusL Jul 05 '21 at 09:47
  • Still an issue in March 2022, despite this training page from Google: https://developers.google.com/codelabs/devtools-cvd#3 – MSC Mar 07 '22 at 02:02
  • When I check on production it's there, when on localhost in development mode, not there. – E L Jun 04 '23 at 03:35

2 Answers2

6

You can check contrast in CSS Overview panel too. And some color combinations, which otherwise would have this "No contrast information available" label when checked with Inspect, do seem to appear there.

certainlyakey
  • 219
  • 3
  • 8
0

In the Google thread, there's a suggestion towards the bottom to press F1 and Restore defaults and reload.

As an alternative, there's a WCAG contract checker here https://contrastchecker.com/

spikey_richie
  • 8,367
  • 2
  • 25
  • 42