Use grayscale filter to see where you are relying too much on colour

If you set the following on your html, you will be able to see which elements you rely too much on colour to convey state:

Code language
html {
  filter: grayscale(1);

It’s not a great idea to rely on colour for state because many people struggle to see the difference in colours. Instead, try using iconography and descriptive, helpful text labels.


If you liked this post, you might like these ones, too

  1. Two simple methods to vertically and horizontally center content with CSS

  2. Create a JSON feed with 11ty

    🔥 A handy quick tip.

  3. Create a semantic breakout button to make an entire element clickable


Become a supporter by joining the Piccalilli Membership

For as little a $5 per month, you can get access to a private, friendly community, get a weekly newsletter and help to make as much content free as possible around here. If you join the $10 per month supporters club, you get access to premium tutorials and free access to mini courses!

Become a member

Sign up for updates

Stay up to date with updates from Piccalilli. You’ll get alerted as soon as any new content gets published. You’ll also get updates on upcoming courses and membership features! You can unsubscribe at any time, too.