InclusiveColors accessible palette creator (beta!)

Sean Wilson

What is this?

Hi! This a tool for making custom branded color palettes for web and UI design that are built from the ground up to meet accessible contrast requirements for WCAG, ADA and Section 508. Key features:

• Instead of only working with a handful of colors, you can create a whole palette of swatches at the same time so you can see if they look good together.
• Precise control of every shades/tints in each swatch rather than being limited by autogenerated colors.
• See which color pairs contrast as you edit so you can create a palette with built-in WCAG accessibility. This way you can plan ahead which foreground colors for headings, body text, form fields and so on should contrast on which background colors. You can then create designs with your colors more quickly and with less hassle because you'll already know which color pairs have accessible contrast.
• Lots of export options for palettes so you can import colors into Tailwind, CSS projects, Adobe InDesign/Illustrator/Photoshop, Procreate, Affinity Designer and more.

What color picker is being used? It's HSL?

The tool uses HSLuv for the color picker. HSLuv has the awesome property that modifying the hue and saturation won't impact how bright a color is. This is known as "perceptual uniformity" and makes HSLuv great for exploring accessible color combinations because when the brightness of a color stays the same, so does the color's (WCAG) contrast against other colors.

Most design tools use HSL color pickers which make it more difficult than it should be to pick contrasting colors. With HSL, varying the hue or saturation sliders counterintuitively also changes the lightness and therefore the contrast of the colors, when you might expect only the the lightness slider would do this. HSLuv fixes this confusing behaviour so you can focus on exploring accessible color choices.

Where's the AI features? And autogenerated colors?

There's none! Besides giving you a base to start from, I don't think it's practical to autogenerate all the tints/shades of a branded color palette and have it look just right. Here's a related note from the creators of Tailwind :

If you're wondering how we automatically generated the 50-950 shades of each color, bad news — color is complicated and to get the absolute best results we picked all of Tailwind's default colors by hand, meticulously balancing them by eye and testing them in real designs to make sure we were happy with them.

This tool tries to make picking and tweaking the colors you want intuitive and quick enough that you won't want to give up control to autogeneration magic.

How do I design color palettes? How many colors do I need?

The article from Refactoring UI on Building Your Color Palette is a great introduction on building color palettes for web UIs from the ground up and why you usually end up needing multiple shades of several colors:

In practice, you want 8-10 shades [of grey] to choose from ... Most sites need one, maybe two colors that are used for primary actions, emphasizing navigation elements ... every site needs a few accent colors for communicating different things to the user. For example, you might want to use an eye-grabbing color like yellow, pink, or teal to highlight a new feature ... You might also need colors to emphasize different semantic states, like red for confirming a destructive action ... yellow for a warning message ... or green to highlight a positive trend ... All in, it's not uncommon to need as many as ten different colors with 5-10 shades each for a complex UI.

How to learn more about WCAG accessible color contrast?

Contrast and Color Accessibility from WebAIM is a good straightforward introduction to WCAG accessible color usage. I don't see this mentioned often, but I think accessibility guidelines are intimidating and difficult to apply without practice, where the official WCAG text is especially difficult to follow. So don't be hard on yourself if it takes some time to get your head around it!

What's APCA contrast checking?

Unfortunately, WCAG 2 contrast checks have flaws (that are well known amoung WCAG experts, but not within design and development communities):

• False positives: WCAG says certain colors contrast when they actually don't so it recommends color choices that are hard to read, especially for dark mode palettes.
• False negatives: WCAG says certain colors don't contrast when they actually do, which artificially limits your color choices.
• Minimal guidance on font choice/size/weight: WCAG doesn't take enough into account that contrast goes down rapidily for lighter fonts and smaller text.

APCA is a more accurate way to measure contrast that addresses the above flaws in WCAG 2 and some version of APCA may feature in the next major version of WCAG ("APCA™ is the candidate contrast method for WCAG 3, and is currently in public beta. WCAG 3 is still in development and subject to changes prior to adoption.").

The ACPA contrast guidelines are more complex to get your head around but they more accurately reflect how contrast requirements depend on the type of content being read, such as body text, labels, small headings, large headings, and copyright notices. Read more in Why APCA as a New Contrast Method? and there's also an APCA discussion forum to learn more about applying APCA and give feedback.

What tools can I use these palettes with?

Take a look in the "Export" menu to find file format options that will work will other apps and tools. For example:

• To import into Figma, you can export your palette to Design Tokens Community Group (DTCG) format then import this into Figma via this Figma plugin. There's likely alternative Figma plugins that will accept .css and .ase export formats but DTCG format is the recommended approach right now.
• To import into Adobe InDesign/Photoshop/Illustrator, Affinity Designer, Procreate, and many other apps, use the .ase export format.
• A fallback option for design apps is to export an .svg or .png image of your palette, import that into your design app, and grab colors from the image with an eyedropper tool.
• To use with Tailwind, export to .config.js for use with your Tailwind configuration file.
• You can export a .css file of CSS variables to use directly in style sheets.

Can I get this as a plugin for Figma or another design tool?

Maybe! Fill out the feature request form to let me know which app and why this would be helpful to you.

Can you link hue/saturation curves or use presets?

I've had a few requests about linking or using preset hue and saturation curves between swatches but I don't think this would help much. If you look at the example palettes, you'll find the hue and saturation curves for red, green, blue and so on are all fairly unique from each other and don't match typical smooth easing curves. This is partly because color spaces aren't arranged with this in mind, where you wouldn't expect e.g. a saturation curve for red to look right for blue or other colors, or for it to be a perfect curve or straight line.

The editor does have an option though to link lightness curves between swatches because this makes sense within the HSLuv color space, where two colors with the same lightness but different hue/saturation should have the same perceived brightness.

What else have you made?

Take a look my other app, Checkbot: SEO checker, a Chrome extension that bulk checks your web pages for SEO, speed, and security best practices. It has 80K users and a 4.9 star rating.