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

Categories

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
CSS
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.

Hello, I’m Andy and I’ll help you build fast, accessible websites & design systems.

I’m a freelance CSS and design systems consultant, based in the UK. I specialise in design systems and creative web design, such as landing pages and campaign work.

I’m currently helping Google by refactoring the CSS and creating a design system for web.dev, but I have availability for projects such as small websites, landing pages and consultancy. I will have full availability for larger projects in January 2022.

Hire me