elbrewster / grayscale-template

Grayscale Template

This vite app spinup is designed to help style a SPA experience with sighted accessibility in mind. The goal is to keep all styling elements at a contrast of 4 or higher to their adjacent or neighboring elements.

Hopefully this tool will make the dev experience simpler, since it can keep contrast concerns separate from hue choices, making these decisions more granular and less-interdependent. Once the lights and darks are chosen and in place, a palette can easily be applied by swapping the correctly-weighted color with its hue-less counterpart.

Example Photos

The problem:

When set to a monochomatic view, the text is not legible:

(Example of color switch) Swap this gray for this blue of the same value:

Some Current Views

Helpful Stuff

eyedropper Chrome extension RGB to grayscale tool Wikipedia on Grayscale Wikipedia on Color Contrast hsl sliders

Other Accessibility Links

skipnav Note: on first page load hit tab to see link to skip main content