Why some spectrum colors are showing "wrong" value? (Colors version 6.0)

[ylazy]

According to:
https://www.w3.org/WAI/GL/wiki/Relative_luminance
https://www.w3.org/TR/WCAG21/#dfn-contrast-ratio

In my test, the most spectrum colors are showing correct value, but some of them are not.

For example:

gray500, light color theme, contrast with gray100 (#F8F8F8): 2.98
showing color result: #909090
my test color result: #A4A4A4

gray600, light color theme, contrast with gray100 (#F8F8F8): 4.85
showing color result: #6D6D6D
my test color result: #838383

gray700, dark color theme, contrast with gray100 (#323232): 8.46
showing color result: #D1D1D1
my test color result: #D2D2D2

gray700, darkest color theme, contrast with gray100 (#1D1D1D): 11.01
showing color result: #D0D0D0
my test color result: #D1D1D1

gray50, dark color theme, contrast with gray100 (#323232): -1.31
showing color result: #1D1D1D
my test color result: #161616

gray50, darkest color theme, contrast with gray100 (#1D1D1D): -1.26
showing color result: #000000
my test color result: #030303

---

Bellow is the way I got the test results:

Example 1:

gray500, light color theme, contrast with gray100 (#F8F8F8): 2.98
showing color result: #909090
my test color result: #A4A4A4

Because of it's the light color theme and contrast ratio > 0, the target color we want to get is darker than the base color (#F8F8F8)
So we need to invert these colors:
gray100 (#F8F8F8) inverted = #070707
L2 (relative luminance of gray100 inverted) = 0.002124688884841862
L2 (relative luminance of the target color inverted) = 0.10533157287682875
the target color inverted = #5B5B5B
the target color = #A4A4A4

Example 2:

gray700, dark color theme, contrast with gray100 (#323232): 8.46
showing color result: #D1D1D1
my test color result: #D2D2D2

L2 (relative luminance of gray100) = 0.031896033073011525
L1 (relative luminance of the target color) = 0.6428404397976775
the target color = #D2D2D2

I have spend much time but could not find where the problem is.
Any ideas are welcome!
Thank you!

[snowystinger]

Hey, thanks for all that info. Which components or what situations are you running into contrast issues?

[ylazy]

I'm trying to replicate spectrum colors generation, to generate some custom colors to use in my own custom components on my desktop app.
For example, I need to generate some colors between gray100 and gray200, which I called gray125, gray150, and gray175, to build a ggChrome-like tabBar component, like this:

I created a function to return a gray color base on a known gray color and contrast ratio, but the result is slightly different compared with the spectrum color palette.
By the way, I still haven't figured out how spectrum generates a color (like Celery500) from the contrast to gray100.
And I'm also building a UI Framework that implements Spectrum UI, not javascript. So I need to understand as much as possible about Spectrum UI, including how Spectrum generates colors.

[devongovett]

I'm sure @NateBaldwinDesign knows more details, but I believe we use https://leonardocolor.io to generate the spectrum colors.

[ylazy]

Thank you for the link!

[NateBaldwinDesign]

@ylazy the method you're using to identify colors of a particular contrast ratio is a bit unusual and the colors you propose do not meet the specified target ratios. For example:

gray500, light color theme, contrast with gray100 (#F8F8F8): 2.98
showing color result: #909090
my test color result: #A4A4A4

Because of it's the light color theme and contrast ratio > 0, the target color we want to get is darker than the base color (#F8F8F8)
So we need to invert these colors:
gray100 (#F8F8F8) inverted = #070707
L2 (relative luminance of gray100 inverted) = 0.002124688884841862
L2 (relative luminance of the target color inverted) = 0.10533157287682875
the target color inverted = #5B5B5B
the target color = #A4A4A4

Inverting colors is not necessary and a bit puzzling. Your resulting target color for gray-500 in light theme is incorrect, as it does not meet the specified target contrast ratio of 2.98 (#a4a4a4 : #f8f8f8 = 2.34:1).

As @devongovett shared, LeonardoColor.io would be the tool to reference. It offers an npm module so you can generate these colors in your codebase, or within the web interface if you prefer.