Color contrast tweaks for V4 #19693
Color contrast tweaks for V4 #19693
Conversation
#70787D makes this pass 4.5:1 contrast ratio against white at least
Improves contrast of active breadcrumb (using new darker #70787D) to at least 4.2:1, which passes nominally for large text (though currently breadcrumb text is not exactly "large")
Nudges it past 3:1 (counting it as "large text") and past 4.5:1 when hovered/focused
This at least pushes them over the 3:1 contrast ratio for large text (though admittedly "warning" looks very muddy)
No quite 4.5:1 ratio yet, but a shade more contrasty
|
Visual examples of the changes (compared to http://v4-alpha.getbootstrap.com/ - hence the difference in font, which is not related to this particular PR but to a previously merged change in the font stack). All examples are before/after (left/right or top/bottom) |
|
The tweak to the secondary button would also address the concern (against white background anyway) of the secondary outline variant from #17286 |
|
CC: @mdo |
|
A suggestion: The U.S. Web Design Standards for government websites have addressed this and other concerns in regards to accessibility (because due to Section 508 they HAVE to address this). They have a github repository as well and have done a LOT of the footwork. Check it out for inspiration? |
|
Seems like they do not really affect |
|
@mdo mind having a look at the big composite image #19693 (comment) and giving your thoughts on these proposed tweaks? would love to see at least some improvements to the out-of-the-box color contrast on some of the items make it into BS at some point... |
|
Superseding this with #21199, which tackles most of this minus the brand color changes. I'll swing back around to those at a later time to give them a bit more love—not super happy with where those values ended up. |
A series of (hopefully non-controversial) tweaks to some common color contrast issues that V4 inherited from V3.
Some of these tweaks aim for the full 4.5:1 color contrast ratio recommended by WCAG 2.0, while others (notably the success, info and warning tweaks) go for the slightly more relaxed 3:1 (which is really for large text, so still not ideal in all situations...but a slightly more achievable goal, particularly for vibrant colors).
Not all possible combinations have been tried out, but most tweaks seem to move towards a more positive result judging purely by the documentation examples.