The Most Accessible Colors

I love named CSS colors. They feel more human than a set of hex values. Some of them, like Rebecca Purple, actually tell a story. Additionally, they are mentally accessible. You can read a CSS color name and get an idea for what it looks like without some sort of color preview tool. That’s not possible with hex values unless you have memorized them.

Recently, I discovered https://cloudflare.design/color/, which allows you to generate accessible color schemes either from a set of presets, or by submitting your own values. Accessible in this sense means that the contrast between the two colors is high enough that it meets WCAG Level AA standards.

Yesterday, I combined the two into a Github repo, and then subsequently published the repo as an NPM package.

At its most basic, this is an array of named CSS pairs that meet WCAG AA standards:

It’s easy to use in your JS projects, and gives you the ability to pick color pairs named for humans that are accessible to humans. Check it out!