Find color contrast | Can I DevTools?

Can I DevTools?

It is like @CanIUse but for the browser devtools, created & curated by @pankajparashar. Get weekly tips & tricks for your favorite browser devtools by subscribing to the newsletter!

Ads via Carbon

Accessibility

Find color contrast

Can I find the contrast ratio of a color?

Last Modified

less than a minute ago

Authors

@pankajparashar

@kilianvalkhof

Test Live

via BrowserStack

Newsletter

EDGE

Notes

Inspect element > In the Styles pane, click the color square next to the color property. This will open the color panel.
Expand the "Contrast Ratio" section to see more details whether the color value meets the W3C recommendation.
Use the "reload" icon next to AA/AAA to use the suggested color to fix the low color contrast ratio.

References (0)