Skip to main content

Grayscale Accessibilty Test

Sep 08, 2020 • 1 min • TIL #16

It’s important that color is not used as the only visual means of conveying information.

Add this class to your CSS to switch to grayscale mode and check if your user interface is still comprehensible and visual elements distinguishable.

.a11y-grayscale {
  filter: grayscale(100%) !important;
<html class="a11y-gray" lang="en" />