Skip to content
GitLab

Use black and white as color-contrast fallback colors

Merged Administrator requested to merge feature/4.5-contrast-ratio into master

Created by: ffoodd

While trying to fix a few things related to #29315 I tried to increase the ratio against white threshold used in color-contrast() to 4.5.

This led to unexpected results, as I didn't totally understood what was going on this function: basically, we only test contrast against white, and if it fails to cross the threshold we use a dark foreground color instead.

This doesn't ensure that our dark foreground color will cross the threshold, neither than its contrast ratio with background will be better than white…

$indigo-300 in "Theming" is a good example where #fff doesn't meet 4.5:1 ratio required by WCAG 2 (giving only 4.06:1) but our $color-contrast-dark neither (defined as #212529 in _variables.scss, giving less than white: 3.8:1). FYI in that specific case, using #000 instead of #212529 makes it to 4.5:1.

Depending on the minimum contrast ratio defined, we'll always fail to meet 4.5 and increasing this $min-contrast-ratio would in fact lead to more insufficient contrasts everywhere — since white wouldn't match, we'd fallback to a worst value…).

I'd recommend the following:

  1. check if $color-contrast-light crosses the threshold; if so, return it;
  2. if not, check if $color-contrast-dark does; if so, return it;
  3. if not, check if white crosses the threshold; if so, return #fff;
  4. if not, check if black crosses the threshold; if so, return it.

If none of those lead to sufficient contrast ratio… Well, I don't know!

@twbs/css-review @patrickhlauke any opinion on this?

Preview: https://deploy-preview-30468--twbs-bootstrap.netlify.com/