24

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

Improve this question
3
  • 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
    Commented Jul 5, 2021 at 9:47
  • Still an issue in March 2022, despite this training page from Google: developers.google.com/codelabs/devtools-cvd#3
    – MSC
    Commented Mar 7, 2022 at 2:02
  • When I check on production it's there, when on localhost in development mode, not there.
    – E L
    Commented Jun 4, 2023 at 3:35

2 Answers 2

Reset to default
7

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.

Improve this answer
3
  • 1
    Where is the CSS Overview panel?
    – MattTreichel
    Commented Mar 15, 2022 at 14:22
  • 6
    Click on the three dots button in the Dev tools, then More tools, then CSS overview.
    – certainlyakey
    Commented Mar 15, 2022 at 17:01
  • Oh I see, it seems to be new and experimental, it must have appeared after at least Chrome 94.
    – MattTreichel
    Commented Mar 15, 2022 at 19:46
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/

Improve this answer
1
  • Restore defaults and reload didn't work for me.
    – MSC
    Commented Mar 7, 2022 at 1:54

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .