Color combinations that fail WCAG 2 AA 4.5:1 contrast ratio

Doubt that all of these will be tackled, but for reference (following https://github.com/twbs/bootstrap/pull/25123 which at least fixed one of the badly borked ones):

From http://getbootstrap.com/docs/4.0/getting-started/theming/

Blue Foreground: #FFFFFF Background: #007BFF The contrast ratio is: 4.0:1 Text failed at Level AA

Indigo Foreground: #FFFFFF Background: #6610F2 The contrast ratio is: 7.2:1 Text passed at Level AA

Purple Foreground: #FFFFFF Background: #6F42C1 The contrast ratio is: 6.5:1 Text passed at Level AA

Pink Foreground: #FFFFFF Background: #E83E8C The contrast ratio is: 3.8:1 Text failed at Level AA

Red Foreground: #FFFFFF Background: #DC3545 The contrast ratio is: 4.5:1 Text passed at Level AA

Orange Foreground: #212529 Background: #FD7E14 The contrast ratio is: 6.0:1 Text passed at Level AA

Yellow Foreground: #212529 Background: #FFC107 The contrast ratio is: 9.5:1 Text passed at Level AA

Green Foreground: #FFFFFF Background: #28A745 The contrast ratio is: 3.1:1 Text failed at Level AA

Teal Foreground: #FFFFFF Background: #20C997 The contrast ratio is: 2.1:1 Text failed at Level AA

Cyan Foreground: #FFFFFF Background: #17A2B8 The contrast ratio is: 3.0:1 Text failed at Level AA

From http://getbootstrap.com/docs/4.0/utilities/colors/

.text-primary Foreground: #007BFF Background: #FFFFFF The contrast ratio is: 4.0:1 Text failed at Level AA

.text-secondary Foreground: #6C757D Background: #FFFFFF The contrast ratio is: 4.7:1 Text passed at Level AA

.text-success Foreground: #28A745 Background: #FFFFFF The contrast ratio is: 3.1:1 Text failed at Level AA

.text-danger Foreground: #DC3545 Background: #FFFFFF The contrast ratio is: 4.5:1 Text passed at Level AA

.text-warning Foreground: #FFC107 Background: #FFFFFF The contrast ratio is: 1.6:1 Text failed at Level AA

.text-info Foreground: #17A2B8 Background: #FFFFFF The contrast ratio is: 3.0:1 Text failed at Level AA

.text-light Foreground: #F8F9FA Background: #343A40 The contrast ratio is: 10.9:1 Text passed at Level AA

.text-dark Foreground: #343A40 Background: #FFFFFF The contrast ratio is: 11.5:1 Text passed at Level AA

.text-muted Foreground: #6C757D Background: #FFFFFF The contrast ratio is: 4.7:1 Text passed at Level AA

.text-white Foreground: #FFFFFF Background: #343A40 The contrast ratio is: 11.5:1 Text passed at Level AA

.bg-primary Foreground: #FFFFFF Background: #007BFF The contrast ratio is: 4.0:1 Text failed at Level AA

.bg-secondary Foreground: #FFFFFF Background: #6C757D The contrast ratio is: 4.7:1 Text passed at Level AA

.bg-success Foreground: #FFFFFF Background: #28A745 The contrast ratio is: 3.1:1 Text failed at Level AA

.bg-danger Foreground: #FFFFFF Background: #DC3545 The contrast ratio is: 4.5:1 Text passed at Level AA

.bg-warning Foreground: #343A40 Background: #FFC107 The contrast ratio is: 7.1:1 Text passed at Level AA

.bg-info Foreground: #FFFFFF Background: #17A2B8 The contrast ratio is: 3.0:1 Text failed at Level AA

.bg-dark Foreground: #FFFFFF Background: #343A40 The contrast ratio is: 11.5:1 Text passed at Level AA

.bg-white Foreground: #343A40 Background: #FFFFFF The contrast ratio is: 11.5:1 Text passed at Level AA

[patrickhlauke]

(and yes, i did collate that list manually, as i know how to party on a friday night 😉 )

[michaelwayneharris87]

In our extension of Bootstrap, we’ve added functions to lighten or darken colors until they meet minimum contrast, and updated the mixins to use those functions.

I’d love to see an option for $enable-force-accessible-contrast that would automatically generate accessible versions of components if set to true, regardless of what color was passed into the relevant mixins.

If that’s of interest, I’ll share some of our code.