DevTools Tips

Fix color contrast issues using the element tooltip

Categories: Supported by:

There are multiple ways to detect and fix color contrast issues with DevTools, but here is a nice one to keep in mind. It's not straightforward to use and takes a few steps, but makes it very nice to see the resulting contrast ratio as you change the color value.

Thanks to Adam Argyle for sharing this on Twitter.

  1. In the Styles panel, click on the color value you want to change, to focus the field.
  2. Press Ctrl+Shift+C (or Cmd+Shift+C on Mac) to start the inspect tool.
  3. Position your mouse over the element which you are changing the color for. Don't click anywhere, we want to keep the color value field focused, just hover over the element so the element tooltip appears.
  4. Now change the color value with the keyboard and check the contrast ratio in the tooltip as you do so.

Animation of the Elements panel in Microsoft Edge. User clicks on color value, then activates the inspect tool, then hovers over an element on the page, then uses the arrow keys to change the color. We see the element tooltip showing the background and text colors as well as the resulting contrast.

Related tips: