Comment by seanwilson | Hacker News Reader

Comment by seanwilson | Hacker News Reader

I'm still working on a tool to create custom accessible Tailwind-style CSS color palettes for web and UI designs:

https://www.inclusivecolors.com/

Example with colors from HN to play with (the grays used for links and main body background, orange from the navbar, green from newbie usernames):

https://www.inclusivecolors.com/?style_dictionary=eyJjb2xvci...

The main features are it shows if your colors meet WCAG accessible contrast on a live UI mockup, you get quick and precise control over every color grade in a swatch (via editing HSL curves) instead of these being auto/AI generated, and it helps you create a full palette of tints/shades for each color rather just a handful of colors.

The idea here is to design your tints/shades upfront with accessible contrast in mind so you don't run into problems later. Most brand style guides I see only have around 5 brand colors, and when you need more tints/shades later to implement actual UIs and landing pages, you get into a conflict where you can't find contrasting colors to introduce that match the brand.

I've had interesting feedback about different workflows designers have so far. It's tricky to make a single tool that fits everyones workflow but I might end up with multiple modes e.g. easy but more opinionated, and more freeform but for advanced users.

I admit it has a learning curve at the moment but I'm not sure how simple you can make it without giving up control. I think once you get it though, you'll realise it's much easier to make a custom accessible palette than you thought.

Very cool project. I don't use tailwind but I have been thinking that the color palette part is great. Love that you can export it all to a big list of CSS variables.

Thanks! To clarify, it's aimed at more than just Tailwind, but Tailwind popularized the color naming like red-500, blue-100, green-900 etc. so I went with that convention.

You can use the CSS export in regular CSS projects directly e.g. via `color: var(--red-900)`, or something like `--bs-danger: var(--red-500)` for Bootstrap projects with semantic naming. The same export format works for Tailwind too because since version 4, Tailwind is mostly configured via CSS variables now.

I probably need to make this more obvious, but if all your swatches have the linked/shared lightness option set, you can pick lightnesses where all grade 500 colors contrast against all grade 100 colors, all grade 600 colors contrast against all grade 200 colors etc. so when you're picking colors in CSS, you know by design which colors will contrast without having to go check them.

Looks awesome! I'm using tailwind in my open source project and Ive been really struggling with accessible colors, inclusivecolors sounds like itll be perfect for me

> Ive been really struggling with accessible colors

Thanks, feel free to message me if you want some tips!

Most accessibility/WCAG guides say things like "Tip #1: Choose accessible colors", but they don't go into any detail about how you pick sets of colors that contrast, like text/background/border colors for buttons on different backgrounds, as if it's trivial. It's actually really tricky and can feel impossible in some scenarios until you internalize the basic rules and constraints.

I usually see people saying the opposite, that it's easy to pick accessible colors, when it's often not, especially when you have existing branding to stick to.

Reply on news.ycombinator.com