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

[patrickhlauke]

Doubt that all of these will be tackled, but for reference (following #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

[mdo]

Are you using a Chrome extension for this?

[patrickhlauke]

https://developer.paciellogroup.com/resources/contrastanalyser/ on windows (note: when using color picker, rather than entering hex values directly, CCA - at least on Win - doesn't account for color management / profiles, meaning that picking from Chrome gets false results)

[patrickhlauke]

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

[knoobie]

@patrickhlauke I would recommend you http://khan.github.io/tota11y/ - it's super easy to use and really efficient for finding contrast problems.

[AlessandroVecchi]

I suggest:
Blue #0069D9
Pink #C53577
Green #1E7D34
Teal #148060
Cyan #117A8A

[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.

[XhmikosR]

@michaelwayneharris87: I'm definitely interested. BTW we were recently discussing how to proceed with this because it's clearly an issue.

My main concern is that we can't know of all the combinations the users might use, so we need to make the assumption that everything will have a white background color.

[michaelwayneharris87]

I'm pressed for time at the moment, but I'll try to write something longer this weekend.

This function is doing a lot of the work for us:

/**
 * Incrementally darkens or lightens a color to  meet color contrast requirements
 */
@function find-contrasting-color($color, $base: $body-bg, $minimum-contrast-ratio: 7) {
  $output-color: $color;
  $color-mix: choose-contrast-color($base); // returns white or black
  $contrast-ratio: contrast($output-color, $base); // custom function to calculate contrast ratio

  @while $contrast-ratio < $minimum-contrast-ratio {
    $output-color: mix($color-mix, $output-color, 1%);
    $contrast-ratio: contrast($output-color, $base);
  }

  @return $output-color;
}

We've written our own alert mixin like so:

@mixin custom-alert-variant($color) {
  $bg-color: color-level($color, $alert-bg-level);
  $txt-color: find-contrasting-color($color, $bg-color, 4.5);
  $border-color: find-contrasting-color($color, $bg-color, 3);

  @include gradient-bg($bg-color);
  color: $txt-color;
  border-color: $border-color;

  hr {
    border-top-color: $border-color;
  }

  .alert-link {
    color: $txt-color;
  }
}

This should force all of the alert variants to be accessible no matter what color is picked in the theme. Out of the box, the .alert-light styles don't have enough contrast. Here's the output for the out of the box theme value for .alert-light using our mixin instead:

.alert-light {
  background-color: #fefefe;
  color: #757576;
  border-color: #949495; }
  .alert-light hr {
    border-top-color: #949495; }
  .alert-light .alert-link {
    color: #757576; }

We're expecting to have a lot of our developers throwing God knows what colors into the theme, so this the basic approach for how we're trying to protect them from themselves.

[michaelwayneharris87]

You could imagine something really elaborate like looping through every permutation of .bg-#{$color} .text-#{$color} and calculating an accessible version. We're wrestling with whether it's actually worth the trouble to do that; I have a gut reaction to worry that that kind of thing might be too much.

It's probably more feasible to filter to pass some basic rules through some kind of accessibility function like this:

body {
color: find-contrasting-color($body-color, $body-bg, 4.5) // we don't trust your ability to pick variables at all whatsoever, not even for your default font color
}

As I suggested above, it's really easy to go overboard with this approach, and we're kind of overwhelmed at the opportunities to apply it. But applying it in a few places may provide the framework with some value.

[XhmikosR]

I think for the time being I'll do this manually. I just need to automate the checks somehow, and perhaps have all components in one page for testing this if needed manually.

But I think I'll just set up some tool for this. Any suggestions welcome. And if the changes are not huge, we can probably backport it to v4.