Make buttons easier to read

[tnir]

Bootstrap 5 (5.1.3) would suggest color:#000 for .btn-primary/.btn-primary:hover by default when $primary: #12AEE2; as it violates "WCAG 2.1 text color contrast ratio of 4.5:1" if it is color: #fff.

• https://webaim.org/resources/contrastchecker/?fcolor=FFFFFF&bcolor=12AEE2 (2.56:1) (.btn-primary)
• https://webaim.org/resources/contrastchecker/?fcolor=FFFFFF&bcolor=0F94C0 (3.48:1) (.btn-primary:hover)

Workaround

Specifying $min-contrast-ratio: 2.55 (far from 4.5 in default) in #681 can work around at this moment.

Why

With Bootstrap 5.1's suggestion according to specifying $primary: #12AEE2 (introduced in 8bdc09e as part of #218 and unchanged to date), if we do not have this tweak, we will get:

.btn-primary {
    color: #000;
    background-color: #12AEE2;
    border-color: #12AEE2;
}
.btn-primary:hover {
    color: #000;
    background-color: #36bae6;
    border-color: #2ab6e5;
}

Below is Bootstrap 4.6's calculation (currently in production):

.btn-primary {
    color: #fff;
    background-color: #12AEE2;
    border-color: #12AEE2;
}
.btn-primary:hover {
    color: #fff;
    background-color: #0f93bf;
    border-color: #0e8ab3;
}

Suggestions

.btn-primary {
    color: #fff;
    background-color: #0D7FA5;
    border-color: #0D7FA5;
}
.btn-primary:hover {
    color: #fff;
    background-color: #0A6A8A;
    border-color: <hexhexhex>; // TODO
}

Resources

• Change in the upstream (Bootstrap 5.0): Use WCAG contrast algo twbs/bootstrap#30168
• Similar workaround to one used in Bump Bootstrap from 4.6.1 to 5.1.3 #681: https://stackoverflow.com/questions/65170317/sass-scss-bootstrap-5-color-functions-not-working-well

Original discussion

[...] An alternative option would be be darkening the button background color. Possibly something like e.g. changing #12AEE2 to #0D7FA5 and #0F94C0 to #0A6A8A. (I find this a lot easier to read than if #fff is changed to #000 on .btn-primary, personally.)

Originally posted by @duckinator in #681 (comment)