Accessibility issues to watch out for in Bootstrap 4

Bootstrap 4 is very thoroughly built to meet digital accessibility standards. For the most part, things are semantically correct, relative units where there should be relative units, classes to hide things depending on if you still need screenreaders to see them, etc.

Bootstrap 4 accessibility documentation
https://v4-alpha.getbootstrap.com/getting-started/accessibility/

There are just a few things that seem to have been overlooked?

UPDATE: I haven’t looked at this since July 2017, so it’s super possible a great much of this has been addressed. So jot that down.

Color Contrast

The most obvious accessibility issue with Bootstrap 4 is color contrast, and there are many, most of them linked to the main color palette.

WebAim color contrast checking tool:
http://webaim.org/resources/contrastchecker/

Success, Info, Warning, Danger

The colors associated with the classes .text-success.text-info.text-warning, and text-danger all fail the minimal color contrast against a white background. Bummer. https://v4-alpha.getbootstrap.com/utilities/colors/

Success: green #5cb85c

#5cb85c has a failing contrast ratio of 2.48:1 with #ffffff

Info: a light blue #5bc0de

#5bc0de has a failing contrast ratio of 2.09:1 with #ffffff

Warning: yellow #f0ad4e

FYI, nothing recognized as yellow will ever go with white and I am very sorry, that’s life. If you darken this color until it passes you now have brown.

#f0ad4e has a failing contrast ratio of 1.95:1 with #FFFFFF

Danger: a red #d9534f

#d9534f has a failing contrast ratio of 3:96:1 with #ffffff

This all applies to these colors used with the .bg- helper classes: .bg-info.bg-warning.bg-danger.

And .button- https://v4-alpha.getbootstrap.com/components/buttons/

And .badge- https://v4-alpha.getbootstrap.com/components/badge/

And .card- https://v4-alpha.getbootstrap.com/components/card/

And .table- https://v4-alpha.getbootstrap.com/content/tables

Additional Note: You might want to also watch out for these colors used with Bootstrap 4’s frequently used background greys. For example, the basic link blue #0275d8 works on white, but not on one of their medium greys #eceeef. Look out for the light grey #f7f7f7 as well.

Breadcrumb

Links in the Breadcrumb component do not have sufficient contrast either.

#0275d8 vs #eceeef has a contrast of only 3.98:1

Accordion

The Bootstrap 4 Accordion component also uses that same link color against that same background color. #0275d8 vs #eceeef

(Otherwise the Accordion is nicely done.)

Honestly, I’m a little surprised with Bootstrap 4 on this. Color contrast is one of the easiest things to evaluate and one of the easiest things to fix.

Navbar

In some of the color options for the Bootstrap 4 Navbar component, you’ll find some links don’t have sufficient contrast with the background.

In .navbar-light.bg-faded the .nav-link elements are black with an alpha transparency that comes out to around #808080 which fails against the background #f7f7f7. The .disabled version of .nav-link is even lighter, so that will fail as well.

There .navbar-text element has the same issue — it’s too light.

Watch out for the .btn-outline- color helper classes as well — some of them like .btn-outline-success and .btn-outline-secondary don’t pass.

Tables

.table-striped creates a text/background color combination that doesn’t quite check out.

Carousel

There are a lot of reasons to avoid carousels, but that’s a different topic. Bootstrap 4’s Carousel component has an accessibility gap you might want to take note of.

Play/Pause: There is no built-in component to play/pause an automatically rotating carousel.

A good resource on accessible carousels (if you can’t talk your client out of using one).

W3C Web Accessibility Initiative | Carousel Concepts
https://www.w3.org/WAI/tutorials/carousels/

Overall, for a carousel, this one is nice. It’s semantically solid and keyboard navigable, so cool.


I’m a little surprised Bootstrap 4 has so many color contrast issues, since it’s a relatively easy thing to check for. Overriding Bootstrap 4 styling can be a real pain, so it’d be nice to see these things sorted out before beta.

In the meantime, embrace digital accessibility as the Right Thing To Do, consider it part of your web development workflow, and always keep trying to make the internet better.