Skip to main content
Community Plugin
View plugin on GitHub
See starters using this

gatsby-plugin-colorblind-filters

Color blindness simulation for Gatsby sites (Demo).

Install

With Yarn:

yarn add gatsby-plugin-colorblind-filters

Or with npm:

npm install --save gatsby-plugin-colorblind-filters

Usage

Add plugin to gatsby-config.js. Only recommended for development environment.

plugins: [
  ...(process.env.NODE_ENV === 'development'
    ? [
        {
          resolve: 'gatsby-plugin-colorblind-filters',
          options: {
            toggleKey: 'p',
            zIndex: 999
          }
        }
      ]
    : [])
]

To activate different color-blindness mode, hold toggleKey (default p) and press 0/1/2/3/4/5/6/7/8 in development. Works best in Chrome.

Inspirations

color-blindness-emulation

License

MIT