HSL Support? ✖ color2.luminance is not a function

[frankstallone]

Does this support HSL? I created a .json file of our SASS variable and running npx a11y-contrast color-palette-3.3.json produces the following:

npx: installed 13 in 1.755s
ℹ Analyzing: color-palette-3.3.json
✖ color2.luminance is not a function

Example of the file:

{
	"primary": {
		"$primary-100": "hsl(186, 100%, 94%)",
		"$primary-200": "hsl(190, 94%, 88%)",
		"$primary-300": "hsl(196, 92%, 81%)",

EDIT: Maybe this is because these color name don't conform to the grades 0 - 100?

[darekkay]

Hi @frankstallone , I cannot reproduce this issue. Can you please post the whole palette file? I would assume that it's either the $primary vs primary difference or the fact that the tool doesn't support 100 steps (#1). But I didn't get any issue with the 3 colors you've posted.

I only get the issue when one of the colors is invalid (like "foo"). I should at least improve the error message here, so the affected color value is being displayed.

[frankstallone]

Okay so I added my EDIT while you replied. I saw your post come up as I was submitting. Yeah this palette was made before reading there was a specific step requirement. I think this is related to your other post. I removed the $'s -- that was left over from converting from SASS.

[darekkay]

While the 100 steps definitely won't work (as in: the tool will not be able to compute the values), I don't think this is the reason for your error message. This message can only happen if a color value is in fact not valid. RGB, HSV, HSL, and CMYK are supported, so there must be some error somewhere in your palette.

For example, this one doesn't throw any error:

{
  "gray": {
    "$gray-100": "hsl(186, 100%, 94%)",
    "$gray-200": "hsl(186, 100%, 94%)",
    "$gray-300": "hsl(186, 100%, 94%)",
    "$gray-400": "hsl(186, 100%, 94%)",
    "$gray-500": "hsl(186, 100%, 94%)",
    "$gray-600": "hsl(186, 100%, 94%)",
    "$gray-700": "hsl(186, 100%, 94%)",
    "$gray-800": "hsl(186, 100%, 94%)",
    "$gray-900": "hsl(186, 100%, 94%)"
  },
  "red": {
    "$red-100": "hsl(186, 100%, 94%)",
    "$red-200": "hsl(186, 100%, 94%)",
    "$red-300": "hsl(186, 100%, 94%)",
    "$red-400": "hsl(186, 100%, 94%)",
    "$red-500": "hsl(186, 100%, 94%)",
    "$red-600": "hsl(186, 100%, 94%)",
    "$red-700": "hsl(186, 100%, 94%)",
    "$red-800": "hsl(186, 100%, 94%)",
    "$red-900": "hsl(186, 100%, 94%)"
  }
}

I will improve the tool to output all invalid colors.

[frankstallone]

Hah, primary-500 had a space at the end of the string. That was the issue.

Is this the expected results because I don't have the correct steps? If so, can I just knock a 0 off mine or do I need to conform to some grade/step standard?

EDIT: If I take out 0's from all I get:

[darekkay]

had a space at the end of the string

Thanks for this hint, I will also trim the color values to prevent such issues in the future.

Is this the expected results because I don't have the correct steps? If so, can I just knock a 0 off mine or do I need to conform to some grade/step standard?

Yes, that's the reason. And yes, you can just remove a 0 from every color, and it should work. Even your 110 and 120 values should work fine in theory. And your results confirm this. What you get are the magic numbers 70, 80 and 90. Because those values are so high for your color palette, they might be not that useful for a generic use. If you're targetting WCAG AA (contrast ratio >= 4.5), every difference of 80(0)+ will be accessible (e.g. gray-100 and gray-900 or gray-200 and gray-1000).

In summary, it doesn't matter whether you're using gray-1, gray-10 or gray-100 for defining your color palette grades (apart from my tool only handling gray-10 at this moment). But because your highest value isn't the absolute maximum (you've extended the palette with even higher values), it will lead to rather high magic numbers. The same problem exists for the Open Color palette.

It also doesn't mean that your color palette is "bad" or "inaccessible" - it just means that the magic number approach doesn't work as well as it does for other palettes.

[frankstallone]

Very interesting, and thank you for elaborating on this. You helped me understand the elements that did not click for me from reading your article. Ultimately, this tool was the best I could find so far, or closest to what I am looking for.

I want something that can look at all the colors in our palette (82) and put together recommendation pairings for each color combination and it's lighter version for text, in alignment with WCAG recommendations. I might find a better way to phrase that, but I think I had in the past seen a tool that does this. Then I can put a demo together in our design system which is created in a Storybook. If you know of such a tool let me know. Thanks again for creating this one!

[darekkay]

You helped me understand the elements that did not click for me from reading your article.

Yes, it's a rather complex topic and it was difficult for me to explain it. I would be happy to improve my blog post if you could point out the places which you've found confusing.

I want something that can look at all the colors in our palette (82) and put together recommendation pairings for each color combination

You mean you would like to pass a color palette and get all valid color combinations for a given contrast ratio? I think colorable should be able to solve this issue. While a11y-contrast focuses on the magic numbers principle, I think it would be a great addition to have your described behavior built-in. I've created #3 for this.

[frankstallone]

I would be happy to improve my blog post if you could point out the places which you've found confusing.

If I can come up with a clearer way of articulating what you've done here I'll let you know. However, I feel as though the topic is just heavy. There is a lot to know, and a lot to consider.

You mean you would like to pass a color palette and get all valid color combinations for a given contrast ratio?

Yes, exactly.

colorable looks like it creates palettes, but I will give it a try. 82 colors is enough for right now, I don't need more hah! That's great if you think it would be a worthy addition to your project. leonardo has a feature that add bulk key colors but from my limited understanding that, too, seems to create color palettes from your keys, instead of comparing. I have learned a lot over the past few days and really do appreciate your time and patience.