Making Bootstrap a Little More Accessible

Rhiana Heath
Tweet
Colorful boots behind a cage door

Photo: MICKOFLEEDS

Bootstrap and Color Accessibility

Like many front-end developers, I work with Bootstrap often. Sometimes I might need it for a quick proof of concept. Other times I may inherit a larger project which has Bootstrap entrenched in the Web Application. It’s versatility and success has meant that you start to see it everywhere — it is clearly a very useful and popular tool.

However, when I was tasked with making a Bootstrap-based Web Application accessible, I ran into a few problems.

As Bootstrap is mainly used for design I evaluated how accessible their base design was for people with visual impairments in terms of the colors.

But first a quick recap.

What Is Bootstrap?

Bootstrap site

Bootstrap is a popular tool for creating front-end websites and web-applications. It contains HTML, CSS, and optional JavaScript extensions which can be added to your website to style and add functionality.

It is estimated that as many as 4.7 million websites, or 1.79% of all websites, use Bootstrap. It is also the number one project on Github with developers encouraged to contribute to the source code.

Bootstrap is quick to set-up, ships with copious documentation and easy-to-follow instructions on how to use their front-end framework. The Bootstrap team are continually releasing new versions and updates, and in their they have promoted several accessibility-focussed features in their most recent version release (3).

But how accessible is Bootstrap really? Before we can tackle that, I think we need to define what we mean by ‘accessible’.

What Does Accessibility Mean?

Accessibility has recently gained a lot more momentum as awareness of accessibility issues has steadily grown in the programming community. It is the practice of ensuring your website or web-application can be easily used by people with disabilities.

This can include many different types of impairments with a wide range of severity, however the main four types of disability referred in the Web Content Accessibility Guidelines (WCAG) are:

  1. Visual impairments
  2. Hearing impairments
  3. Motor impairments
  4. Intellectual disabilities

POUR Accessibility Principles

Today there are four principles to consider when developing accessible content for the web. They are referred to by the acronym ‘POUR‘: Perceivable, Operable, Understandable and Robust.

Color choices comes under the ‘Perceivable’ column for Web Accessibility. That is, the content on the website should be easy to see. In particular, text and images should be easy to discern against their background with a high color contrast ratio.

So How Can You Tell If the Colors Are Accessible?

People with visual impairments of various degrees may view your website in a number of different ways. Some may need to have the screen zoomed in, some may need to have the color settings changed to high contrast and others will also require the help of a screen reader or Braille reader.

Color blindness types

Photo: entirelysubjective

Additionally, nearly 10% of males will have some type of color blindness, having difficulty with certain color combinations.

There are two ways I tested this. Firstly I tested for the color contrast ratio, and then I tested how the site performed under a high-contrast setting. This way you can ensure that no content will be lost on your site if people are viewing it in a different way.

Color Contrast Ratio Test

The first test I performed was to put the colors of the text and background into a color contrast checker. It then calculates if it meets the 4.5:1 color contrast ratio for accessibility. Some checkers can also calculate what it would like like for different levels of color blindness, and if it has enough contrast for that as well.

From the Bootstrap site I tested their links, progress bars, navigation bars and their alerts to see if they were a high enough ratio for accessibility. Taking into account their font-size and font-weights as per the contrast guidelines in the table below.

Text Normal Bold Ratio AA Ratio AAA
Small < 24px < 19px 4.5:1 7:1
Large > 24px > 19px 3:1 4.5:1

For example when testing their very common Bootstrap Blue color used in links, progress bars and navigation bars. When these were put into the checker below shows that this scheme meets the requirements only if the text is of large size. However the text shown is 14px and normal font-weight, which is classified as small so does not pass this requirement.

a {
  color: #428bca;
  text-decoration: none;
}

a {
  color: #3277b3;
  text-decoration: none;
}

results of bootstrap blue color contrast test

They have made some progress, for example the alerts in their previous version 2, the ratios varied from 3.3:1 to 3.9:1, just below the minimum of 4.5:1. Which would be required as this text is 14px, so classified as small text. In the new version 3, with a very slight change, all ratios are now above 4.5:1.

With this little change they were able to comply with guidelines, without having to compromise the design. This was after someone noticed it and raised an issue on their GitHub repository requesting them to address this.

showing differences between version 2 and 3 of bootstrap alerts

I have spent a lot of time then going through and manually changing the colors in Web Applications so they meet this requirement. Alternatively the font-size and weight could be changed so it is classified as large text. I forked the Bootstrap Repository and updated their code with the changes I made. This can be downloaded and used instead of the standard one or used as a reference point as you may want to make your own which suit your scheme and also meet the color contrast ratio requirements.

High Contrast Settings

The second way I tested was by viewing the site with high contrast settings. Generally what this means is inverting the colors, so instead of black text on a white background, you have white text on a black background which can be easier to see for people with partial blindness.

In Chrome there is a plugin to view pages in high contrast. Both Windows and Mac’s have a high contrast mode in their desktop settings, which will show the entire screen in high contrast. In Firefox this involves going into the settings, preferences, content and colors, changing the text to white, the background to black then un-ticking the ìallow pagesî.

screenshot of firefox settings

The high contrast test yielded some varying results. This is a common test during an accessibility audit. The most unforgiving combination seems to be Firefox in Windows, so most of my testing was using this browser/operating system as it is also a very popular combination for people with visual impairments to use.

However testing in as many combinations of browsers and operating systems as possible is ideal as they all render slightly differently.

One of the major problems I found was that bootstrap buttons either have very faint text under high contrast or none at all (with Firefox in Windows). I found this was due to the ìbackground-colorî property in CSS.

.btn-default {
  color: #333;
  background-color: #fff;
  border-color: #ccc;
}

Once the background-color was removed completely it was much easier to see under high contrast, see below.

Another area where this was affected were text inputs. The same sort of principal applied, they have a white background-color by default.

input {
	background-color: #fff;
}

Which means under high contrast you cannot make out the text you are typing. However after you remove this one line of CSS the visibility significantly improves in this mode with no visual difference for sighted users.

comparison of bootstrap inputs before and after

However this introduces a new problem: how to maintain the color for sighted users, however not using background-color in order to have it display in high-contrast settings.

In Bootstrap 2 I found this was no problem as there were other CSS properties to control the look of the button, so removing the background-color had no visual impact to sighted users — a ‘win-win’ there.

In the custom GitHub repository mentioned, I’ve removed the background-color and replaced it with the CSS used in previous versions, slightly modified to meet the color contrast ratio and are also now visible in high contrast.

Keep in mind, I only noticed this issue in Firefox. When checking this with high contrast in Chrome for example these buttons and inputs displayed fine. One thing that didn’t though were Bootstraps inverted navbars. Ordinarily they look like this below.

comparison of bootstrap navbar before and after

However in high contrast mode in Chrome it becomes unreadable.

This is due largely to the color contrast ratio between the links and background not being high enough, making it disappears in this mode. The background would need to be darker or the links lighter. However even then it is difficult to see with this tool, so perhaps it’s wiser to avoid just this color combination if possible.

So, Should I Use Bootstrap?

Bootstrap has added a lot of features to the codebase to assist screen reader users. However in terms of pure color palette choices, most components were tested, and unfortunately not many of them passed the color contrast ratio tests or high-contrast readability settings.

3 Tips

  1. Keep using Bootstrap in your website or application — but keep it’s accessibility blind-spots in mind.
  2. Always upgrade to newer versions whenever possible as they do keep incrementally improving.
  3. Feel free to use or reference the modified Bootstrap CSS file on GitHub instead of the standard one. Paypal also provides an accessibility plug-in for bootstrap which handles a lot of issues with keyboard accessibility for people with motor impairments.

If you find anything else, please take a moment to raise an issue with Bootstrap on their GitHub page, definitely submit code which would address the problem. Otherwise perhaps look into using a front-end framework that has accessibility features already included.

While they’re aren’t many out there yet Accessible Template offer one and their site is an fantastic example best accessibility practices.

Free Chapter! HTML5 & CSS3 for the Real World

Get a free chapter of SitePoint's new book, the second edition of our popular HTML5 & CSS3 for the Real World and receive updates on our latest offers.

  • Frederik Krautwald

    This was a really cool read. Many things I wasn’t aware of. Thanks!

  • http://radgroupz.co.cc Rahul Shukla

    Nice Article

  • davethecipo

    Click on “Commits”, then “Color changes for accessibility”. You’ll see the old lines highlighted in red and the new ones in green.