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:
- check if
$color-contrast-light
crosses the threshold; if so, return it; - if not, check if
$color-contrast-dark
does; if so, return it; - if not, check if white crosses the threshold; if so, return
#fff
; - 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/