Menu icon Foundation
Global color pick-contrast

Hello, I am having trouble with the $global-color-pick-contrast-tolerance.

Basically i really don't know how to call it in - I always seem to have trouble with the sass functions and mixins - i understand how they work but not really how to use them.

So I have a nave bar and I wang the links to change from black to white depending on what colour is behind them.

 

Attached are my failed attempts. Any help would be great.

 

Global-color pick-contrastSassfunctions

Hello, I am having trouble with the $global-color-pick-contrast-tolerance.

Basically i really don't know how to call it in - I always seem to have trouble with the sass functions and mixins - i understand how they work but not really how to use them.

So I have a nave bar and I wang the links to change from black to white depending on what colour is behind them.

 

Attached are my failed attempts. Any help would be great.

 

Tom Clark about 2 months ago

I don’t want to think about the emotional energy and time I’ve spent here.

Osman Gormus almost 2 years ago

Hey Dan,

I'd just check the function `color-pick-contrast()` for its usage. You can find it in `util/_color.scss` file.

 

I copied its documentation:

/// Checks the luminance of `$base`, and returns the color from `$colors` (list of colors) that has the most contrast.
///
/// @param {Color} $base - Color to check luminance.
/// @param {List} $colors [($white, $black)] - Colors to compare.
/// @param {Number} $tolerance [$global-color-pick-contrast-tolerance] - Contrast tolerance.
///
/// @returns {Color} the color from `$colors` (list of colors) that has the most contrast.

 

Seems like in your case all you need is providing the `$base` value which is actually the background color of the selector.

`$colors` argument already defaults to `$black` and `$white` colors.

... and lastly you can either change `$global-color-pick-contrast-tolerance` value in your global variables file `_settings.scss` or only in selector style.

 

Try these:

color: color-pick-contrast($your-choice-of-background-color);

// or set all params; $base, $colors, $tolerance)
color: color-pick-contrast($your-choice-of-background-color, ($white, $black), 0.1);

 

At the end, `color` would get a value from the color list ($white or $black) depending on contrast comparison.