InclusiveColors accessible palette creator (beta!)

From Sean Wilson

What is this?

Hi! This is my ongoing attempt at a tool for making custom branded color palettes for web and UI design that are built from the ground up to meet WCAG contrast accessibility guidelines. The key features are:

• 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 in advance which foreground colors (for headings, body text, form fields and so on) should contrast on which background colors, so you can avoid running into surprise low contrast issues later when designing.
• 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 brightness 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 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 can be intimidating and are difficult to apply without practice so don't be hard on yourself if it takes some time to internalize. The official WCAG text especially can be difficult to follow.

What's APCA contrast checking?

Unfortunately, WCAG 2 contrast checks have known flaws that aren't widely known in the design and development community:

• 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 about 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.

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.