Follow BS #30168 (WCAG algo + update master)

[ffoodd]

Note: Please remember that both in Bootstrap & Boosted, in v4 or v5, the color-yiq() function is white-first, meaning if the color contrast ratio with white is sufficient, function returns white — and only returns black otherwise.

Test

I'm using a single SCSS file to check color-yiq() results.

// Configuration
@import "functions";
@import "variables";
@import "mixins";
@import "utilities";

@each $color, $value in $colors {
  .yiq-#{$color} {
    color: color-yiq($value);
  }
}

Results

Color	v4-dev	PR	v5-dev	Contrast finder
#0d6efd	#000	#fff	#fff	#fff
#6610f2	#fff	#fff	#fff	#fff
#6f42c1	#fff	#fff	#fff	#fff
#d63384	#000	#fff	#000	#fff
#dc3545	#000	#fff	#000	#fff
#fd7e14	#fff	#000	#000	#000
#ffc107	#000	#000	#000	#000
#28a745	#000	#000	#000	#000
#20c997	#000	#000	#000	#000
#17a2b8	#000	#000	#000	#000
#fff	#000	#000	#000	#000
#6c757d	#fff	#fff	#fff	#fff
#343a40	#fff	#fff	#fff	#fff

FYI Colour Contrast Analyzer gives the same result than Contrast-Finder.

[Lausselloic]

good idea to manage values as static!

[ffoodd]

good idea to manage values as static!

Props to @ysds in Bootstrap's team, and in Material (already used this years ago…).

[Lausselloic]

ok