Chrome’s Web Inspector now has a built in contrast ratio analysis

A neat new Chrome feature recently released in DevTools is their built-in contrast ratio check.

The two ticks next to 7.59 means that this element meets the enhanced recommended contrast ratio (AAA). If it only had one checkmark, that would mean it met the minimum recommended contrast ratio (AA).

Click Show More to expand the Contrast Ratio section. The white line in the Colour Spectrum box represents the boundary between colours that meet the recommended contrast ratio, and those that don’t. For example, since the grey colour I’ve chosen meets recommendations, that means that all of the colours below the white line also meet recommendations. Very cool.

About This Site

Currently Senior UX Designer at Charities Aid Foundation (CAF), one of the UK’s largest charities. I’m passionate about all things design and  thrive in a fast paced, collaborative, agile environment.