Drupal 8’s Accessibility Advantage: Colour Contrast & Low Vision
Many of the accessibility changes that have been made in Drupal 8 are pretty subtle. Most people probably won't realize that there is a deeper blue in the header and probably won't care. There have been a lot of little changes in Drupal 8 though to improve colour contrast.
Many contributors to Drupal 8 Core check to see that Drupal adheres to accessibility standards. Colour Contrast is one of those standards. The Colour Contrast Guidelines are provided to assist those who are color blind or have low vision.
For most users, this may only affect them when they step outside with their mobile phone and try to see their screen in the sun. However, the number of people with low vision are considerably higher than the number of people who are blind. Now, lets say you're working on a project with Paul who has difficulty reading without high contrast. You may never know that he has any trouble with her eyesite because she has an invisible disability.
Colour Blindess is pretty common. More than 8% of men have some form of color blindness. Most people have heard about red–green color blindness and yet many are still programming websites to convey errors only through colour.
In order to assist Paula, the WCAG 2.0 (1) level AA requires a contrast ratio of 4.5:1 for normal text and 3:1 for large text (14 point and bold or larger, or 18 point or larger) to follow colour contrast guidelines.
With Drupal 8, the community is looking to meet the contrast guidelines, and will continuously update Drupal 8 Core to achieve that goal. A couple examples of issues that were resolved recently by the community were “error.svg doesn't have sufficient color contrast” and “Increase contrast on inline form error text”. Each issue occurred due to the discovery of a failure in colour contrast. The Drupal community then discussed and resolved the issue.
If you would like to ensure your website meet contrast guidelines, there are many analysers available to use for free, including the simple one webaim.org. It is much easier to evaluate color contrast of a whole site using either a Mozilla Extension or a Chrome Plugin (note that the chrome plugin is better for evaluating gradients but takes longer to run).
When you do find that there is a color contrast problem, what do you do? Fortunately, there's a great project hosted on Github that will give you some suggestions.
About The Author
Mike Gifford is the founder of OpenConcept Consulting Inc, which he started in 1999. Since then, he has been particularly active in developing and extending open source content management systems to allow people to get closer to their content. Before starting OpenConcept, Mike had worked for a number of national NGOs including Oxfam Canada and Friends of the Earth.