Calculate contrast contrast based on WCAG - Githubissues

johannesjo / angular-material-css-vars

Little library to use css variables with @angular/material

https://johannesjo.github.io/angular-material-css-vars/

MIT License

194 stars 32 forks source link

Calculate contrast contrast based on WCAG #180

Closed json-derulo closed 2 hours ago

json-derulo commented 3 hours ago

:ghost: Brief Description

There are some edge cases with the automatic color contrast, where not the best contrast color is chosen.

:pancakes: Affected version

latest

Reproduction

For example, use the hex code #6475AA

:police_car: Expected behavior

Contrast color white is chosen

:heavy_plus_sign: Additional context

According to the WCAG guidelines, the luminance is calculated with the following formula:

L = 0.2126 * R + 0.7152 * G + 0.0722 * B

The rgb value of the given hex code is the following: rgb(100, 117, 170)

The formula returns a luminance of 117.2124. This luminance is closer to black, thus white should be chosen as a contrast color.

json-derulo commented 2 hours ago

Actually everything is working as expected, the color library returns the correct luminance. The RGB values need to be converted to RsRGB, GsRGB and GsRGB values first.