/dev tips

(69) Inspect animations with the animation inspector jQuery Event Listeners Support (71)

Chrome DevTools: See the contrast between your text colour and background colour

3 Sep 2015
See the contrast between your text colour and background colour

This is the 70th tip! Help grow this project by sharing with your web developer friends.

A nice move for accessibility.

Just to clarify, the feature to pay attention to is the horizontal curved white line across the colour spectrum.

On the colour spectrum, the contrast line shows the regions where the color does and does not meet a minimum contrast ratio. The line is drawn on the threshold between low contrast and an acceptable contrast. As you change the hue or opacity, the contrast line updates in real time.

The contrast in question is between the text colour (through the color property) and the background colour (through the background-color property).

Warning: This is an experimental and in-development feature part of Canary! Things are likely to change. Some experimental features are removed.

Sign up to receive a developer tip, in the form of a gif, in your inbox each week.