25

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
  • 6,865

2 Answers2

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.

certainlyakey
  • 228
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
  • 9,575