If you have been around web development in recent years, you have inevitably heard of the Bootstrap framework and, even if not, have used sites, projects, and probably seen its influence on the Internet landscape without knowing quite what it was. Its UI notification colors and arrangements, especially, if nothing else, have been used  — or, like me, “borrowed” (with credit, of course) at times — by thousands if not millions of sites and have become part of everyday usability practices for many people.

.alert-success {
color: #3c763d;
background-color: #dff0d8;
border-color: #d6e9c6;
}
.alert-info {
color: #31708f;
background-color: #d9edf7;
border-color: #bce8f1;
}
.alert-warning {
color: #8a6d3b;
background-color: #fcf8e3;
border-color: #faebcc;
}

Yet, if you work on projects which are wholly or in part government-funded and demand greater accessibility requirements, you will quickly find that the default colors within Bootstrap aren’t enough. While their alerts do match up with the 4.5:1 color contrast ratio required to match the WCAG 2.0 1.4.3 (Minimum) Contrast Level AA requirements for non-link text, they do not meet the next highest AAA level. To meet a successful usage for Level AAA, the color contrast ratio must be 7:1 between background and foreground colors.

In order to work toward this goal of 7:1 (or greater) for non-link text, there are various sites and tools which will provide quick visual reference and color contrast calculation. ColorSafe.co provides both feedback and a selection of color palettes. The Color Contrast Checker as part of the Web Accessibility in Mind (AIM) project is among other great tools offered. Contrast Ratio, a fork-able project on GitHub, is another which can be used for private and offline usage.

For my own work, I have aimed for the highest ratio possible without totally disrupting the color contrast arrangement ( >= 10). Using both the “warning” and “info” alerts as a basis, I came up with the following:

color: #551700;
background-color: #FEEFB3;

color: #1C2833;
background-color: #BDE5F8;


In both cases, and as part of on-going work toward greater user accessibility and WCAG alignment, I was able to tweak the colors in a development build and also saw immediate changes in awareness of the sections during some informal A/B testing conducted using the Bootstrap defaults and these new versions as well.