The contrast between several combinations of difference-of-3 shades is slightly below 4.5:1

[Lamecarlate]

Hello!

First, great work, I love these colours, I use them on a personal site and it's gorgeous. On one occasion, I had a contrast error on "emerald-6 on sky-3", and wanted to know if there were more. So I did a test on all combinations between shades with a difference of 3, in all colours.

The twig code I used:

{% set colors=["gray", "rose", "raspberry", "red", "orange", "cinnamon", "amber", "yellow", "lime", "chartreuse", "green", "emerald", "aquamarine", "teal", "cyan", "powder", "sky", "cerulean", "azure", "blue", "indigo", "violet", "purple", "magenta", "pink"] %}
<div class="colors">
  {% for color in colors %}
     {% for i in 1..3 %}
       {% for c in colors if c != color %}
          <div style="background-color: var(--color-{{c}}-{{i}}); color: var(--color-{{color}}-{{i+3}})">
            {{ color ~ "-" ~ (i+3) ~ " on " ~ c ~ "-" ~ i }}
          </div>
       {% endfor %}
    {% endfor %}
  {% endfor %}
</div>

I put that on a page with all the custom properties loaded in CSS, and ran Tanaguru WebExt RGAA 4 (RGAA is the french administration rewriting of WCAG, the rules on colour contrast are the same).

The result:

combination	ratio
gray-4 on azure-1	4.44
gray-6 on sky-3	4.47
gray-6 on cerulean-3	4.48
rose-4 on cyan-1	4.48
rose-4 on powder-1	4.49
rose-4 on sky-1	4.47
rose-4 on cerulean-1	4.48
rose-4 on azure-1	4.37
rose-4 on blue-1	4.49
rose-4 on indigo-1	4.48
rose-4 on violet-1	4.46
rose-6 on sky-3	4.43
rose-6 on cerulean-3	4.44
rose-6 on azure-3	4.47
rose-6 on blue-3	4.49
rose-6 on indigo-3	4.49
raspberry-4 on azure-1	4.40
raspberry-4 on violet-1	4.49
raspberry-6 on yellow-3	4.48
raspberry-6 on lime-3	4.48
raspberry-6 on cyan-3	4.42
raspberry-6 on powder-3	4.45
raspberry-6 on sky-3	4.32
raspberry-6 on cerulean-3	4.34
raspberry-6 on azure-3	4.37
raspberry-6 on blue-3	4.39
raspberry-6 on indigo-3	4.39
red-4 on azure-1	4.42
red-6 on yellow-3	4.46
red-6 on lime-3	4.46
red-6 on chartreuse-3	4.49
red-6 on cyan-3	4.40
red-6 on powder-3	4.43
red-6 on sky-3	4.31
red-6 on cerulean-3	4.32
red-6 on azure-3	4.35
red-6 on blue-3	4.37
red-6 on indigo-3	4.37
orange-4 on sky-1	4.48
orange-4 on cerulean-1	4.49
orange-4 on azure-1	4.38
orange-4 on violet-1	4.47
orange-6 on sky-3	4.42
orange-6 on cerulean-3	4.44
orange-6 on azure-3	4.47
orange-6 on blue-3	4.49
orange-6 on indigo-3	4.49
cinnamon-4 on cyan-1	4.45
cinnamon-4 on powder-1	4.46
cinnamon-4 on sky-1	4.44
cinnamon-4 on cerulean-1	4.45
cinnamon-4 on azure-1	4.34
cinnamon-4 on blue-1	4.45
cinnamon-4 on indigo-1	4.45
cinnamon-4 on violet-1	4.43
cinnamon-6 on sky-3	4.41
cinnamon-6 on cerulean-3	4.42
cinnamon-6 on azure-3	4.45
cinnamon-6 on blue-3	4.47
cinnamon-6 on indigo-3	4.47
amber-4 on azure-1	4.46
amber-6 on cyan-3	4.48
amber-6 on sky-3	4.39
amber-6 on cerulean-3	4.41
amber-6 on azure-3	4.43
amber-6 on blue-3	4.45
amber-6 on indigo-3	4.45
yellow-4 on azure-1	4.48
yellow-6 on sky-3	4.42
yellow-6 on cerulean-3	4.43
yellow-6 on azure-3	4.46
yellow-6 on blue-3	4.48
yellow-6 on indigo-3	4.48
lime-4 on azure-1	4.46
lime-6 on cyan-3	4.48
lime-6 on sky-3	4.38
lime-6 on cerulean-3	4.40
lime-6 on azure-3	4.42
lime-6 on blue-3	4.45
lime-6 on indigo-3	4.45
chartreuse-4 on azure-1	4.46
chartreuse-6 on sky-3	4.48
green-4 on azure-1	4.42
emerald-4 on sky-1	4.49
emerald-4 on azure-1	4.39
emerald-4 on violet-1	4.49
emerald-6 on sky-3	4.49
aquamarine-4 on azure-1	4.42
aquamarine-6 on sky-3	4.47
aquamarine-6 on cerulean-3	4.49
teal-6 on sky-3	4.49
violet-4 on sky-1	4.49
violet-4 on azure-1	4.38
purple-4 on azure-1	4.47
magenta-4 on azure-1	4.44
pink-4 on azure-1	4.49
pink-6 on cyan-3	4.49
pink-6 on sky-3	4.39
pink-6 on cerulean-3	4.41
pink-6 on azure-3	4.44
pink-6 on blue-3	4.46
pink-6 on indigo-3	4.46

It's a lot… the contrast is always really really close to 4.5 so maybe it could be easy to fix (easy but long, I know…).

[matthewhowell]

Thank you so much for your work here. 😬 You are correct, that is a lot and rather embarrassing.

I will take some time to figure out exactly what happened, but my best guess is some combination of: (1) my own insufficient understanding of relative luminance within the library that I used to generate these colors (2) insufficient testing (which was really just my own spot testing, yikes) (3) some kind of regression with the color values as I worked through the different shades (4) erroneous conversion between color values (moving from LCH to hex, for example)

Point 2 (insufficient testing) is quite obvious, this was a mistake that I made. This project should have had tests built in from the start, I apologize for that and will remedy it with a future update.

Thanks again, will leave this open until fixed as it's obviously a relevant issue.

[Lamecarlate]

Oh, no need to be embarrassed! That was not my intention at all. Besides, it's about 100 combinations in about 1900, so approximately 5%, which is not a lot. I'm sorry I said that, because when I posted I didn't calculate the total…

For what it's worth, as I needed the sky-3, I tested two alternatives values for it: #0995ac and #0296b2. For my current needs I will choose between these :)

erroneous conversion between color values (moving from LCH to hex, for example)

Interesting! I used hex because that's what I know, do you want me to test with LCH colors?

Do you want me to test for 7:1 contrast too?

[matthewhowell]

Oh, no worries, not offended! Again, I'm really appreciative that you flagged all of this. I think 100 is still kind of a lot 😊

Re: more testing. I'd say maybe don't spend more of your time on it at the moment, let me get a handle on the causes and see if I can get some automated testing in place so that we no longer have to rely on the generosity of the community 😊

The general difficulty in determining the shades of these colors is that, in order to keep those contrast ratios reliable and get 6 shades per color, there isn't a lot of extra room to lighten/darken individual shades. Or, to put it another way, fixing one contrast ratio problem often causing another, opposite contrast ratio problem.

So, I've got more work to do and will reply here when I have an update. Thanks!

[Lamecarlate]

Duly noted 🙂 Take care!