Comment by seanwilson

Comment by seanwilson 20 hours ago

8 replies

View on Hacker News

I'm working on a tool for creating custom color palettes for web designs that pass WCAG contrast requirements:

https://www.inclusivecolors.com/

- You can precisely tweak every shade/tint so you can incorporate your own brand colors. No AI or auto generation!

- It helps you build palettes that have simple to follow color contrast guarantees by design e.g. all grade 600 colors have 4.5:1 WCAG contrast (for body text) against all grade 50 colors, such as red-600 vs gray-50, or green-600 vs gray-50.

- There's export options for plain CSS, Tailwind, Figma, and Adobe.

- It uses HSLuv for the color picker, which makes it easier to explore accessible color combinations because only the lightness slider impacts the WCAG contrast. A lot of design tools still use HSL, where the WCAG contrast goes everywhere when you change any slider which makes finding contrasting colors much harder.

- Check out the included example open source palettes and what their hue, saturation and lightness curves look like to get some hints on designing your own palettes.

It's probably more for advanced users right now but I'm hoping to simplify it and add more handholding later.

Really open to any feedback, feature requests, and discussing challenges people have with creating accessible designs. :)

gforce_de 9 hours ago

wow! can you please include the example for Okabe-Ito (Masataka Okabe, Kei Ito): https://jfly.uni-koeln.de/color/#pallet

  COLOR='#000000' # Okabe-Ito: 1 black
  COLOR='#e69f00' # Okabe-Ito: 2 orange
  COLOR='#56b4e9' # Okabe-Ito: 3 skyblue
  COLOR='#009e73' # Okabe-Ito: 4 bluish-green
  COLOR='#f0e442' # Okabe-Ito: 5 yellow
  COLOR='#0072b2' # Okabe-Ito: 6 blue/darkerblue
  COLOR='#d55e00' # Okabe-Ito: 7 vermilion/red
  COLOR='#cc79a7' # Okabe-Ito: 8 reddish-purple
Reply View 1 reply
  • seanwilson 6 hours ago

    Cool! Here's a quick link for now with those colors:

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

    I've sorted the colors by luminance/lightness and added a gray swatch for comparison so can explore which color pairs pass WCAG contrast checks.

    I haven't really gotten into colorblind safe colors like this yet where the colors mostly differ by hue and not luminance. Colorblind and non-colorblind people should be able to tell colors apart based on luminance difference i.e. luminance contrast. Hue perception is impacted by the several different kinds of color blindness so it's much trickier to find a set of colors that everyone can tell apart. This relates to the WCAG recommendation you don't rely on hue (contrast) to convey essential information (https://www.w3.org/WAI/WCAG21/Understanding/use-of-color.htm...).

    The gray swatch above could be called colorblind safe for example because as long as you pick color pairs with enough luminance contrast between them, colorblind and non-colorblind people should be able to tell them apart. You could even vary the hue and saturation of each shade to make it really colorful, as a long as you don't change the luminance values the WCAG contrast between pairings should still pass.

    Reply View 0 replies
zahlman 19 hours ago

Great concept. I look forward to the Show HN.

Reply View 0 replies
exasperaited 19 hours ago

I get that you say it is for advanced users, but I think a "how to use this" link with a video in it that explained a few things would probably open it up to a lot more users.

There's so much more to do with tools like this, and I'm really glad to see it.

Reply View 4 replies
  • jonwinstanley 8 hours ago

    Yes, I liked the description of what it does, but at first glance am not sure what to do with the interface.

    Reply View 2 replies
    • seanwilson 7 hours ago

      The general idea is:

      - Drag the hue and saturation curves to customise the tints/shades of a color. Look at the UI mockup as you do this to make sure the tints/shades look good together.

      - The color pairings used in the UI mockup all initially pass WCAG contrast checks but this can break if you tweak the lightness curve of a color. The mockup will show warning outlines if this happens. Click on a warning and it'll tell you which color pairs need to have their lightness values moved further apart to fix it.

      - Once you're happy, use the export menu to use your colors in your CSS or Figma designs. You can use the mockup as a guide for which color pairs are accessible for body text, headings, button outlines and so on.

      Does that make more sense? You really need to be on desktop as well because the mobile UI is more of a demo.

      Reply View 1 reply
  • seanwilson 19 hours ago

    Thanks for the feedback! Yeah, I appreciate there's a lot of background here around color palette design, UI design, color spaces, and accessibility so I likely need something like a video or tutorial. Another route is to have the tool start in a less freeform mode that handholds you through the process more.

    Reply View 0 replies