Comment by seanwilson
1 day ago
A tool for creating custom Tailwind-style color palettes for web and UI design that pass WCAG contrast requirements:
https://www.inclusivecolors.com/
The interface is optimized to let you quickly explore and tweak multiple tints/shades at once so you can customize all colors exactly how you want e.g. try dragging vertically through the saturation curve in one motion to edit all the tints/shades at once, or shift whole curves horizontally by dragging between the dots on a curve.
It uses the HSLuv color space, where (unlike say HSL) the WCAG contrast stays the same when you change the hue and saturation sliders. This makes it much easier to explore accessible colors choices as you know only changes to the lightness slider will impact the contrast. You can also switch from the WCAG2 contrast checker to using APCA, which is meant to correct for inaccuracies in WCAG2, such as it being too forgiving for dark mode color combos.
Note the mobile version is more of a preview and the desktop version has more features.
I probably need to add something like a tutorial as there's a lot going on, but I've added more hints and tooltips recently. Open to feedback on what's initially confusing and what changes might help!
I passed this on to some accessibility folks at a couple conferences in the last month - everyone was impressed :)
That's awesome, thanks!
I'd also keen to hear from people who are interested in accessibility but don't know much about it too. I've tried to explain the WCAG contrast rules in the simplest way I can (interactively, via the live mockup example on the right and contrast indicator icons that appear on the left) but there's quite a lot to cover.
bookmarked! Cool work!