InclusiveColors palette editor beta

From Sean Wilson

What is this?

Hi! This is my ongoing attempt at a tool for making custom branded color palettes for web designs and UIs that meet (WCAG) accessibility guidelines. The key features are:

• Instead of only working with a handful of colors, you can easily create a whole palette of swatches with precise control of the shades/tints in each swatch.
• You can see which pairs of colors have WCAG accessibile contrast as you edit them so you can plan which pairs can be used for headings, body text, form fields and so on.
• 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 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 these flaw 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:

• There's a Figma plugin that lets you import the Design Tokens Community Group (DTCG) format.
• .ase format can be imported into Adobe InDesign/Photoshop/Illustrator, Affinity Designer, Procreate, and many other apps.
• .config.js format can be loaded by Tailwind, or you can export a .css files of CSS variables to use directly in style sheets.
• A fallback option 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.

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, 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.

Privacy: This website collects anonymized data to help with making improvements. Tap for more.

This website shares data with the following services:

• Anonymized analytics data is sent to Google Analytics to improve usability and monitor referral traffic.
• Anonymized error reports are sent to Sentry to help fix bugs.
• Mailchimp is used to store the email addresses of users that sign up to the mailing list.