readme: digital colour contrast accessibility

by Luke Farrugia • 22 September 2020

Read-ME-duel-of-doves-02

Over the past year in my 9 to 5, we've been advocating for the evolution of the brand and the user interface design (UI), aiming to move from a standard look and feel to a sleek and considered design. Although a few refreshes have taken place, the product is over 10 years old and comes with a bunch of history and legacy decisions, that need to be taken into account when thinking about breaking the core systems down. In this re-think, we are focussing on grid systems, typography and scale, iconography and colour, breaking it down to enable us to start again over time, respecting what we have while paving the way for something new. While thinking at this base level, it’s a prime opportunity to factor in accessibility from the ground up to ensure that our platform can be accessed by everyone.

Digital accessibility comes in many forms and extends beyond design, in this piece we will dig into colour contrast accessibility and the tools that we have used to aid us in the journey. We are only at the beginning stages of this re-think but none-the-less, these tools have played a pivotal role in our discovery and decision making. On a side note, a personal mission for myself is to help in finding vibrant accessibility; it would be easy to revert to a black and white website or turn the existing colours into a muddy hue to pass accessibility standards. We are aiming for higher, to reach a rich and vibrant palette that passes AA accessibility standards while also providing a sense of delight to our user base.

Digital accessibility is about ensuring inclusive participation and access to information for everyone. When designing, we often take the ability to access devices, services and products for granted. Thinking that if we can access the content, everybody can, and it can be easy to design for what we want visually rather than our users’ needs. As a designer, we have a responsibility to take into account all users needs, including people with disabilities as it can be hard or impossible for some people to access content if colour accessibility is not taken into account. Time frames, budgets and project scope, often cause us to forget or de-prioritise digital inclusion, yet when thinking about people with disabilities and people with age-ranged impairments this affects over a billion people worldwide and is something that we should always take into account.

Trichromacy-Normal

Through the lens of: Trichromacy-Standard view

Blue-Cone-Monochromacy-Achromatomaly

Through the lens of: Blue-Cone-Monochromacy-Achromatomaly

Green-Blind-Deuteranopia

Through the lens of: Green-Blind-Deuteranopia

 

While there are a lot of disabilities and conditions that can affect the way people use digital products, here are some of the most common types of impairments:

  • Visual impairment, which includes a partial or total inability to see or perceive colour contrasts.
  • Hearing impairment, which involves the ability to hear. 
  • Motor skills and physical disabilities, which includes difficulty in moving body parts, including making precise movements. 
  • Photosensitive seizures, conditions like epilepsy can cause seizures, which are often triggered by flashing lights. 
  • Cognitive disabilities, such as dementia and dyslexia.

In this piece, we are focussing on visual impairment and may tackle the remainder in future posts. As simple as it seems, colour contrast is essential when aiming for a digitally accessible interface. Colour contrast refers to the colours used in the foreground and the background, which can relate to fonts, shapes and imagery. 

accessibility guidelines

Accessibility guidelines consist of many requirements that we can use when designing and developing to create accessible content for a broader audience. These guidelines are extensive and drill deep down into the details. To read up on the full WCAG guidelines, take a look here

aa and aaa standards

Colour contrast ratios are numerical values, used to calculate the difference in the light between the foreground and the background. Within the WCAG, the primary success criteria of accessibility sit at 1.4.3; this value dictates the minimum contrast that is commonly considered accessible. For digital work, the WCAG has determined two levels of accessibility, AA and the more strict AAA.

  • AA requires the contrast for normal text to sit at 4.5:1, with headlines and large text requiring at least 3:1.
  • AAA requires the contrast for normal text to sit at 7:1, with headlines and large text, requiring a minimum of 4.5:1.

Headline or large text are defined as 14 point (typically 18.5px) when bold, or 18 point (typically 24px) or larger for lighter fonts (typography point to pixel conversion are as follows 1pt = 1.333px). For more information, you can read the full WCAG standard here.

contrast tooling

Balancing aesthetic and reaching these standards is not easy but as mentioned above, is needed to ensure we are not marginalising any users. To help in this process there are a variety of tools available and when searching for reliable yet straightforward options, these are the best ones we found to aid in this tedious but rewarding process.

Color-Safe
color safe

We found this tool to be a fantastic starting point, as we didn’t fully understand accessibility at the time and this empowered us to learn. When you land on Color Safe, you are able to set up your canvas and text, which allows you to set your parameters before generating a pool of accessible colours. In flipping the text and background colours we were able to start to generate some interesting results. Although accessible, these colours were not as vibrant as we would have liked, so we took them into the next tool for tweaking. 

Adobe-Color
adobe color

Abobe Color offers an array of community-generated colour palettes that you can access and use. They also have a powerful colour wheel that allows you to select a primary colour and methodically tweak, adjust and play until you arrive at your ideal colour palette. As you edit, Adobe Color offers handy tooltips and suggestions while also providing the ability to explore colour harmony options based on the following tones: analogous, monochromatic, triad, complementary, split complementary, double split complementary, square, compound and shades. We are getting a little too colour geeky here, but the best way to discover is to head in, throw in a primary colour and click through these filters to see the options that will be generated. 

We didn’t use Adobe Color to access accessibility, but we did use it to tweak and refine in order to find that vibrancy mentioned earlier. From there, we moved to the next tool for the accessibly push.

Color-Review
color review

We found and adopted this tool a little later in the game and it made a world of difference. Color Review is a little different to the other colour pairing tools we had tried, as it shows lines on the colour map to help guide you when checking accessibility standards. Other tools generally gave us an answer with no real way forward, causing us to have to go back and forth from tool to tool as we tried different colour combinations. With Color Reviews’ ability to visually display the accessible ratios, this allowed us to plot and adjust colours on the fly, speeding up the process and allowing us to enjoy the tweaking process rather than find it tedious and tiresome. 

Stark
stark

Stark has been a massive time-saver, baked right into Figma and Sketch we have been able to check colours on the fly as we test combinations within our UI. Offering a sleek design, this tool is easy to access and also offers a colour alternative feature when your combination does not meet accessibility standards. Stark has been like an accessibility companion, keeping us honest and on the path to our goal of meeting AA accessibility standards. 

Running through this process and designing with accessibility in the front of mind has totally changed the way we are approaching this re-think. Sure, we are moving slower as it takes time to tweak, refine and check for accessibility standards, but in the long run, it will be worth it. This is because we will end up with a fully considered and scalable system that allows all developers and designers to create fully accessible UI while also empowering flexibility and creativity in the process. Personally, I feel like I have become a better designer in this process and it feels good to know that we are making positive changes for all of our users. 

If you have any questions, comments or would like to chat, feel free to reach out via our duel of doves community.

join us

duel of doves is a curated community, created to encourage thought-provoking discussions through connecting and collaborating with like-minded people. A professional online home away from home, sans the office politics, where we can be ourselves and get sh*t done.

subscribe

Get the duel of dove’s wrap-up sent directly to your inbox.

Follow us on instagram