Replace yiq contrast by wcag official algorithm

[Lausselloic]

Following @mdo PR for color update : #22836

Many thanks for the color contrast mixin which check the font color according to the background for badges only at time. But yiq is not the official wcag and doesn't give the same result on some colors (e.g with blue #527edb yiq set text color to white where official wcag lum set it to black.

I propose a SCSS adaptation of the HTMLCS JS solution. Need to add a dependency to sass-math-pow.

I hope this solution will be helpfull. Let me know

[Johann-S]

you should update our shrinkwrap because you added a new dependency with npm run maintenance-shrinkwrap

[Lausselloic]

Yes I've seen it. I will update till 1hour

[patrickhlauke]

small request: as the official language for our files is english, could you update the variables to $luminositycolor and $luminositywhite ? merci :)

[Lausselloic]

yes

[patrickhlauke]

actually, to stay consistent with current WCAG wording (though from what I remember there's discussion about it being incorrect), this should be $luminancecolor and $luminancewhite

[patrickhlauke]

sorry, you were quicker than my brain which needed more coffee ;)

[Lausselloic]

No problem I've many coffee :-)

[patrickhlauke]

LGTM but I'm not a SASS expert. @mdo et al, feel free to merge if this looks kosher to you.

[pat270]

Would be nice to have @mixin color-yiq() be a function that returns a value instead of printing a css declaration so we could use it in Sass variables.

[Lausselloic]

yes, that's my final idea, evolve that mixin to create a generic one that return a comparison between two colors. Or add in parameter output colors

[mdo]

Need to add a dependency to sass-math-pow.

Not a fan of the dependency here. Is there another solution we could try? And if this changes what is output on our components, we'll need to revisit more things.

[patrickhlauke]

if this changes what is output on our components, we'll need to revisit more things

I believe functionally the output is the same, just that it flips between light and dark text at a better calculated threshold which matches up with WCAG 2's requirements.

[mdo]

Yeah, I mean visually as much as the compiled code :).

[patrickhlauke]

Visually it'll be the same, except at the point just on the cusp between where light or dark would be better. There, it'll flip at a slightly earlier/later point, so yes for certain background colors it will be visually different.

[Lausselloic]

I understand and agree that adding a sass dependency is not fun. For @mdo the solution could be to Copy/paste source code directly in bootstrap utilities, because I don't think that pow expression will change in the time.
For visual consistence, would be possible to add optionnal input like :
color-yiq($color, $chalenging-color-list, $light-fallback, $dark-fallback) {
Where $color will be the font or background color to check against an ordered color in $chalenging-color-list, and if none are valid then return light or dark fallback ?

for each $color in $chalenging-color-list -> check if ratio is valid, return the first valid color
if none have been return, check if light or dark fallback is better

[razh]

One alternative to the extra dependency would be to use the experimental functions feature in node-sass.

const sass = require('sass')

const functions = {
  pow(base, exponent) {
    const result = Math.pow(base.getValue(), exponent.getValue())
    return new sass.types.Number(result)
  }
}

Would need some additional documentation for ruby-sass and other variants.

[Johann-S]

you should use const instead of var here because you don't change types

[Lausselloic]

Hi, any news about this PR? I can update it if needed

[pierre-hilt]

Hello, do you have news about this issue? We would like to use WCAG contrast for color-yiq function. We tried to play with the treshold, but as it ia not the same function we can't have something perfect.

[Lausselloic]

Hello,

I use it in Boosted (that's why I create this PR) But wonder that one will go into the core soon.

[XhmikosR]

@Lausselloic: can you fetch upstream and rebase?

[MartijnCuppens]

I'm afraid we can't do this. This will make bootstrap not buildable with anything else than node-sass and it will require everyone to adapt their build with this custom config.

[mdo]

@MartijnCuppens Damn, if that's the case, feel free to close this out. Will wait for you to confirm though!