contrast-wcag does not always select the color with the highest contrast

[neil-russell]

Describe the bug contrast-wcag only considers luminance and not the contrast of the colors it is choosing between. For some colors this results in choosing the contrasting color that does not meet WCAG requirements when the other option does.

To reproduce Steps to reproduce the behavior: For example, for the color #00bce7 with luminance for 42% and the default light (white) and dark (black) values contrast-wcag will return white. The contrast of white and #00bce7 is only 2.25 where the contrast of #00bce7 and black is 9.35.

Expected behavior Calculate the contrast for both options (https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests) and select the color with the highest contrast ratio.

I did a comparison of the current calculation vs using the contrast and it results in a different contrast color for 40% of the RGB space with the default light and dark colors. For 20% of the RGB space the contrast improves from less than 3 to more than 7. One option to minimize the impact of this change would be to only change the current behavior when it results in significant improvement in the contrast.

Affected package (please remove the unneeded items)

• theme-default

Affected suites (please remove the unneeded items)

• Kendo UI for jQuery
• Kendo UI for Angular
• Kendo UI for React
• Kendo UI for Vue
• Telerik UI for Blazor

Affected browsers (please remove the unneeded items)

• All

Build system information (please remove the unneeded items)

• Not Applicable

Additional context I'll just add that I haven't found a good workaround for this issue except to override every variable set using contrast-wcaq and override the css for the variables I can't set. If there is another option I've missed please let me know.

[joneff]

I should note that contrast-wcag is biased by design and we'll rename it to k-contrast-color-legacy... "Biased by design", because our salmon pink is contrasted against black and not white...

Instead, you should use k-contrast-color from @progress/kendo-theme-core, which works fine and also accepts min-ratio, which is 7 by default.

[neil-russell]

Thanks, I didn't notice that before, the default theme includes an older version of the colors functions that doesn't include that function. k-contrast-color does produce the result I'm looking for.

Is the plan to replace the usage of contrast-wcag with k-contrast-color throughout the themes? That would solve this issue, any timeframe?

[joneff]

Is the plan to replace the usage of contrast-wcag with k-contrast-color throughout the themes? That would solve this issue, any timeframe?

Indeed that's the idea. We are targeting 2023 R1 in all themes. Only the default theme will be a bit ... harder, but I am sure we can find a way.

I am leaving this task open, until we merge the PR.

[joneff]

4168 deals with consolidating all functions in a single place and renaming contrast-wcag to k-contrast-legacy. That PR and a couple of more improvements should resolve the contrast issues for all themes, but default.

[joneff]

The remaining artifacts:

• [ ] move dialog theme color map to variables to resolve contrast issues
• [ ] move appbar theme color map to variables to resolve contrast issues
• [ ] move avatar theme color map to variables to resolve contrast issues
• [ ] move badge theme color map to variables to resolve contrast issues
• [ ] move bottom nav theme color map to variables to resolve contrast issues
• [ ] move button theme color map to variables to resolve contrast issues
• [ ] move chip color map to variables to resolve contrast issues
• [ ] move fab color map to variables to resolve contrast issues
• [ ] extract variable for inverse appointment in scheduler to resolve contrast issues
• [ ] extract window theme color map to variables to resolve contrast issues

While that may sound like a lot, it's not that much. If you look at #4222, which deals with nouvelle theme utilizing our color system, we solve the issue by first generating the colors in the variables definition and then reusing it, instead of on the fly.