Accessibility Contrast issues with Dashboard

[Metahari]

Issue Type

• Bug Report / Support Request

Your Environment

(Not entirely applicable in this case, but here it is anyway.)

Vagrant 2.2.5
VirtualBox 6.0.12r133076
ansible 2.8.4
  config file = None
  configured module search path = ['/Users/username/.ansible/plugins/modules', '/usr/share/ansible/plugins/modules']
  ansible python module location = /usr/local/Cellar/ansible/2.8.4/libexec/lib/python3.7/site-packages/ansible

Your OS

• macOS (10.14.6 Mojave)

Full console output

I'm using the WebAim WAVE tool: http://wave.webaim.org/, The 3rd tab at the top of the sidebar report is for contrast.

Google's Lighthouse mentions some contrast issues, but is not specific which parts need help.

Summary

First off, It's obvious that the DrupalVM Dashboard has been given some accessibility attention, which is awesome. Additionally, as a Dashboard, it's clear, well organized, and very helpful when getting things setup.

However, some of the output does not have sufficient contrast:

• Any blue links on the gray backgrounds (the zebra striping in the tables and the header. passing only at AA for large text. Though, the slender font does make it more difficult to read with that contrast even at 21px size and smaller links/text failing Contrast Ratio: 3.93:1
• white text on green for the success button class for the databases and in the dev tools section to open each tool. Contrast Ratio: 2.48:1
• white text on blue for the info button class in the same areas. Contrast Ratio: 2.09:1
• white on orange for warning button class Contrast Ratio: 2.33:1

Starting with Bootstrap gives devs a great boost, but even according to their documentation, does not cover all areas of accessibility, especially for contrast.

---

Color contrast
Most colors that currently make up Bootstrap’s default palette—used throughout the framework for things such as button variations, alert variations, form validation indicators—lead to insufficient color contrast (below the recommended WCAG 2.0 color contrast ratio of 4.5:1) (source)

---

4.5:1 recommendation is for text smaller than 18pt, larger fonts need at least a ratio of 3.0:1

A few small changes to the CSS would make using the DrupalVM dashboard even more pleasant.

Thanks for the consideration,
Stacie

[geerlingguy]

I believe the dashboard is just using default Bootstrap CSS: https://github.com/geerlingguy/drupal-vm/blob/master/provisioning/templates/dashboard.html.j2#L391

I don't have the time right now, but if someone wanted to update the dashboard classes and make it work with a newer version or higher-contrast version of the Bootstrap CSS via CDN, that would be fine by me. I am always a fan of more contrast rather than less, having dealt with visual issues in the past!

[geerlingguy]

Before picture (bootstrap 3.x):

[geerlingguy]

So, I've upgraded to Boostrap 4, and tweaked classes a bit. It probably won't fix all the identified contrast issues, but it does fix a few, and also increases text size a bit. Here's the new version:

I'm going to close this issue as 'partially fixed', just because I don't have the time to work on the colors to meet the higher levels for WCAG at this time. Someone else is free to do so though, and I would welcome a few CSS overrides in the dashboard template to do it!

Thanks again for opening this issue @Metahari, accessibility is something that those of us with fully functional senses take for granted too often :(

[Metahari]

Thanks for taking a look at this!