From 1b8bf5b56c77a60aab4c228aada7565f77db17ce Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ga=C3=ABl=20Poupard?= Date: Fri, 27 Mar 2020 16:37:59 +0100 Subject: [PATCH] feat(color-contrast): ensure we return a contrasted enough color (light-first), the most contrasted one otherwise --- scss/_functions.scss | 35 +++++++++++++++++++++++++++++++++-- 1 file changed, 33 insertions(+), 2 deletions(-) diff --git a/scss/_functions.scss b/scss/_functions.scss index d93e33916f..36108896a3 100644 --- a/scss/_functions.scss +++ b/scss/_functions.scss @@ -97,12 +97,43 @@ $_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003 .0033 .0037 .004 .0044 .0048 .0052 .0056 .006 .0065 .007 .0075 .008 .0086 .0091 .0097 .0103 .011 .0116 .0123 .013 .0137 .0144 .0152 .016 .0168 .0176 .0185 .0194 .0203 .0212 .0222 .0232 .0242 .0252 .0262 .0273 .0284 .0296 .0307 .0319 .0331 .0343 .0356 .0369 .0382 .0395 .0409 .0423 .0437 .0452 .0467 .0482 .0497 .0513 .0529 .0545 .0561 .0578 .0595 .0612 .063 .0648 .0666 .0685 .0704 .0723 .0742 .0762 .0782 .0802 .0823 .0844 .0865 .0887 .0908 .0931 .0953 .0976 .0999 .1022 .1046 .107 .1095 .1119 .1144 .117 .1195 .1221 .1248 .1274 .1301 .1329 .1356 .1384 .1413 .1441 .147 .15 .1529 .1559 .159 .162 .1651 .1683 .1714 .1746 .1779 .1812 .1845 .1878 .1912 .1946 .1981 .2016 .2051 .2086 .2122 .2159 .2195 .2232 .227 .2307 .2346 .2384 .2423 .2462 .2502 .2542 .2582 .2623 .2664 .2705 .2747 .2789 .2831 .2874 .2918 .2961 .3005 .305 .3095 .314 .3185 .3231 .3278 .3325 .3372 .3419 .3467 .3515 .3564 .3613 .3663 .3712 .3763 .3813 .3864 .3916 .3968 .402 .4072 .4125 .4179 .4233 .4287 .4342 .4397 .4452 .4508 .4564 .4621 .4678 .4735 .4793 .4851 .491 .4969 .5029 .5089 .5149 .521 .5271 .5333 .5395 .5457 .552 .5583 .5647 .5711 .5776 .5841 .5906 .5972 .6038 .6105 .6172 .624 .6308 .6376 .6445 .6514 .6584 .6654 .6724 .6795 .6867 .6939 .7011 .7084 .7157 .7231 .7305 .7379 .7454 .7529 .7605 .7682 .7758 .7835 .7913 .7991 .807 .8148 .8228 .8308 .8388 .8469 .855 .8632 .8714 .8796 .8879 .8963 .9047 .9131 .9216 .9301 .9387 .9473 .956 .9647 .9734 .9823 .9911 1; @function color-contrast($background, $color-contrast-dark: $color-contrast-dark, $color-contrast-light: $color-contrast-light) { + $foregrounds: $color-contrast-light, $color-contrast-dark, $white, $black; + $contrast-ratios: (); + + @each $color in $foregrounds { + $contrast-ratio: contrast-ratio($background, $color); + @if $contrast-ratio > $min-contrast-ratio { + @return $color; + } @else { + $contrast-ratios: map-merge(($contrast-ratio: $color), $contrast-ratios); + } + } + + @warn "Found no color leading to #{$min-contrast-ratio}:1 contrast ratio against #{$background}…"; + + @return most-contrasted($contrast-ratios); +} + +@function contrast-ratio($background, $foreground: $color-contrast-light) { $l1: luminance($background); - $l2: luminance(opaque($background, $color-contrast-light)); + $l2: luminance(opaque($background, $foreground)); $contrast: if($l1 > $l2, ($l1 + .05) / ($l2 + .05), ($l2 + .05) / ($l1 + .05)); - @return if($contrast < $min-contrast-ratio, $color-contrast-dark, $color-contrast-light); + @return $contrast; +} + +// Returns the most contrasted color in a map of insufficiently contrasted colors +@function most-contrasted($contrast-ratios) { + $ratios: (); + + @each $ratio, $color in $contrast-ratios { + $ratios: append($ratios, $ratio); + } + + $highest-ratio: max($ratios...); + + @return map-get($contrast-ratios, $highest-ratio); } // Return WCAG2.0 relative luminance