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

Activity

1. mdo commented on Dec 29, 2017

   

   mdo

   on Dec 29, 2017

   Member

   More actions

   Are you using a Chrome extension for this?
2. patrickhlauke commented on Dec 29, 2017

   

   patrickhlauke

   on Dec 29, 2017

   MemberAuthor

   More actions

   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)
3. patrickhlauke commented on Dec 29, 2017

   

   patrickhlauke

   on Dec 29, 2017

   MemberAuthor

   More actions

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

   😄React with 😄2Reacted by German Bobadilla and itzsrikanth

   🎉React with 🎉7Reacted by Mark Otto, Herst, KhoPhi, Aubrey, Gaël Poupard, Jônathas Souza and Jiří Barouš

   ❤️React with ❤️1Reacted by alpadev
4. knoobie commented on Dec 31, 2017

   

   knoobie

   on Dec 31, 2017

   More actions

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

   added

   cssSass sources or compiled CSSSass sources or compiled CSS

   v4v4, the frozen docs on gh-pagesv4, the frozen docs on gh-pages

   on Jan 4, 2018
6. AlessandroVecchi commented on Mar 19, 2018

   

   AlessandroVecchi

   on Mar 19, 2018

   More actions

   I suggest:
   Blue #0069D9
   Pink #C53577
   Green #1E7D34
   Teal #148060
   Cyan #117A8A
7. michaelwayneharris87 commented on Mar 20, 2019

   

   michaelwayneharris87

   on Mar 20, 2019

   More actions

   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.

   ❤️React with ❤️4Reacted by Knoobie, Paul Hansen, Ján Hamrák and Meshach Jackson
8. XhmikosR commented on Mar 21, 2019

   

   XhmikosR

   on Mar 21, 2019

   Member

   More actions

   @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.
9. michaelwayneharris87 commented on Mar 21, 2019

   

   michaelwayneharris87

   on Mar 21, 2019

   Last edited by michaelwayneharris87

   More actions

   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.

   🎉React with 🎉1Reacted by Knoobie
10. michaelwayneharris87 commented on Mar 21, 2019

    

    michaelwayneharris87

    on Mar 21, 2019

    Last edited by michaelwayneharris87

    More actions

    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.
11. XhmikosR commented on Mar 21, 2019

    

    XhmikosR

    on Mar 21, 2019

    Member

    More actions

    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.
12. michaelwayneharris87 commented on Mar 22, 2019

    

    michaelwayneharris87

    on Mar 22, 2019

    More actions

    I'd love to help in any way I can — this has been a big sticking point for us, so if you would find any of the work we've done to be helpful, we'd be happy to share it back.
13. XhmikosR commented on Mar 22, 2019

    

    XhmikosR

    on Mar 22, 2019

    Member

    More actions

    I added this in my short-term TODO for v5, so hopefully I'll start a PR by next week. I'm gonna ping you there, thanks.
14. evilaliv3 commented on Oct 20, 2019

    

    evilaliv3

    on Oct 20, 2019

    More actions

    Is there any small css for fixing bootstrap4 in relation to do this?

    @michaelwayneharris87: is you code public? we would love to use it within the GlobaLeaks for better usability of the app and be able to reach any possible whistleblower!
15. XhmikosR commented on Oct 20, 2019

    

    XhmikosR

    on Oct 20, 2019

    Member

    More actions

    You can backport the related v5 patch which is only for blue and pink though. I don't think the other colors will change because the difference is pretty huge.
16. michaelwayneharris87 commented on Oct 20, 2019

    

    michaelwayneharris87

    on Oct 20, 2019

    More actions

    @evilaliv I based my code on https://medium.com/dev-channel/using-sass-to-automatically-pick-text-colors-4ba7645d2796, so it should be easy to adapt from there.

    I've also recently been experimenting with https://github.com/hsluv/hsluv-sass, which seems like a more sophisticated way of doing things (though I haven't implemented it)
17. MartijnCuppens

    added

    accessibilityKeyboard, screen readers, contrast, ARIAKeyboard, screen readers, contrast, ARIA

    on Jan 15, 2020
18. xi commented on Feb 26, 2020

    

    xi

    on Feb 26, 2020

    Contributor

    More actions

    I can pitch in with yet another library that does contrast calculation: https://github.com/xi/sass-planifolia/ (supports alpha channels, automatic shading/tinting, warning on insufficient contrast, …). I guess you wouldn''t want to depend on it, but I would be happy to implement the relevant subset in bootstrap itself (e.g. as a relplacement for color-yiq).

    Then again, many frontend people I have met don't really like it when colors are selected or even adapted automatically. Maybe the better approach is to set colors explicitly and then run automatic checks on the result.
19. XhmikosR commented on Nov 15, 2020

    

    XhmikosR

    on Nov 15, 2020

    Member

    More actions

    @patrickhlauke @ffoodd @mdo didn't we address this in v5?
20. patrickhlauke commented on Nov 15, 2020

    

    patrickhlauke

    on Nov 15, 2020

    MemberAuthor

    More actions

    I think most of these are now resolved. I have a few stragglers left over that I recently filed separately #32053 #31360

    this can be closed now I think
21. patrickhlauke

    closed this as completedon Nov 15, 2020
22. aaronbauman commented on Apr 23, 2021

    

    aaronbauman

    on Apr 23, 2021

    More actions

    Sorry if I'm misunderstanding how the process works or what was addressed here, but I'm still running into issues with colors failing minimum 4.5 contrast.

    Specifically, the first example in this post, $blue #007BFF , persists into version 4.6.0 and is failing all my a11y tests.
    Are these hex values locked for 4.x?
    Do I need to move to 5.x to address?

    Thanks in advance for your guidance
23. patrickhlauke commented on Apr 23, 2021

    

    patrickhlauke

    on Apr 23, 2021

    MemberAuthor

    More actions

    Yes sorry, should have been clearer when closing - a lot of the combos were fairly "locked" for v4, and it would have been too much of a breaking change. We opted to focus on v5 for the full fixes.

    👍React with 👍1Reacted by Aaron Bauman