In many ways, the web is becoming increasingly accessible. At last count, it was estimated that almost 60 percent of the global population were active internet users. Much of that’s been driven by the smartphone, social media and other advances in technology that have opened up a world of digital content, communication and experiences to people everywhere. Today, the way we view and absorb content are continuously evolving and diversifying, faster than ever before. That brings new and exciting possibilities but also fresh challenges. How can we ensure everyone, including people with disabilities, can access, enjoy and benefit from all the content we create? Accessibility in design is a topic that’s never been more important to marketers and businesses. Let’s look at exactly why that is.
More colours, more challenges
For many people, digital experiences are now more vivid than ever. With new screen technologies, a wider colour gamut and the introduction of web styling upgrades, the creative options available to designers and developers is as great as it has ever been.
This means we can push the boundaries of what we thought was possible even further. As exciting as this can be – especially for brands who are looking to gain an edge in the digital space – it can come at a price for customers with a disability. For example, colour blindness affects an estimated 300 million people worldwide – almost as many people as there are in the USA. Our design choices don’t just impact on aesthetics and the average user experience – they can be the difference between some users being able to read and interact with our content at all.
Standard accessibility guidelines
In design, executions rest on visual strategies and rules to help guide people through content. So, if we’re looking to encourage inclusive design, these executions should comply to certain standards to help people with colour blindness to navigate content.
The best source for these standards is the World Wide Web Consortium (WC3). They produce a comprehensive overview of Web Content Accessibility Guidelines (WCAG) which cover a whole range of standards for people with different disabilities. They include guidelines to ensure that content covers their 4 areas of accessibility; perceivable, operable, understandable and robust.
Understanding the guidelines
The WCAG is always being updated as accessibility regulations are redefined over time. In a digital world, there are three levels of compliance to be met:
Level A (minimum compliance) – Necessary for all websites that require accessibility. The criteria are:
- Navigable with a keyboard
- No keyboard traps
- Non-text content alternatives
- Video captions
- Meaning is not conveyed through shape, size, colour etc. alone
Level AA (acceptable compliance) – The aim for most websites. Standards include:
- Colour contrast is at least 4.5:1
- Alt text or a similar solution used for images that convey meaning
- Navigation elements are consistent throughout the site
- Form fields have accurate labels
- Status updates can be conveyed through a screen reader
- Headings are used in logical order
Level AAA (optimal compliance) – Ensures that websites are accessible to everyone. Some of the guidelines:
- Sign language interpretation for audio or video content is available
- Colour contrast is at least 7:1 in most instances
- Timing is not an essential part of any activity
- Context-sensitive help is available
Accessibility in action
Achieving Level AAA compliance can be tricky and is often a requirement for sites that have commitments for everyday services and important engagements, such as banking or government areas which provide essential access for everyone. A good example of a site that’s been designed with accessibility in mind is the UK government’s GOV.UK. In their own words:
‘The GOV.UK Design System team wants as many people as possible to be able to use this website. For example, that means you should be able to:
- Change colours, contrast levels and fonts
- Zoom in up to 300% without the text spilling off the screen
- Navigate most of the website using just a keyboard
- Navigate most of the website using speech recognition software
- Listen to most of the website using a screen reader (including the most recent versions of JAWS, NVDA and VoiceOver)’
Furthermore, they state that ‘the team has also made the website text as simple as possible to understand.’ As any copywriter will tell you, that’s not only important for accessibility but a general principle for any content you create.
Our own experiences
At Fifty Five and Five, we’ve encountered the challenges of accessibility in design first-hand. For instance, during work on a recent project, we discovered that a client suffers from a type of colour blindness. This made the accessibility of our designs a significant talking point. While exploring initial concepts, some key discussions revolved around colour and contrast of the content, and these were crucial in making sure our solution was accessible. When we discuss colour in particular, we have to accept that colour will appear different from person to person, and the thing that helps people distinguish content is the contrast between the colours chosen.
What do I mean by that? Let’s look at some examples of how colour can be used in different ways.
The difference colour choices can make
We’ll look at some calls-to-action (CTAs) – which manifest in web pages as ‘buttons’ to be clicked by the user, taking them into different areas of the site, launching contact forms, and so on.
Although this CTA example may look fine if you aren’t affected by colour blindness, the colours here do not meet accessibility guidelines. That’s because the blue used within the button does not pass AA-level compliance for graphical objects against white backgrounds. Th same also applies for the white text on the blue button.
This example is an improvement on the first, as the dark blue text now has enough contrast to meet readability guidelines. But, as a whole, the CTA is still not visible on white, so would still be hard to distinguish as a CTA and would still fail AA and AAA compliance for graphical objects.
This execution is a good example of accessibility compliance. Each colour now has enough contrast against the background it sits on and passes AA and AAA compliance. Although there are other rules around CTAs such as hover states, we must make sure that our static version is visually available as these are the primary drivers for navigation. This is a great example of perceivability versus readability. The first CTA option would be ‘perceived’ as easier to read and packs more of a punch using a brighter colour. Whereas the last CTA option is a good example of great readability as it passes accessibility compliance fully.
Always striving for accessibility in design
As our professional and personal lives become increasingly reliant on a digital world, accessibility will only become more important to people and businesses all over the world. That’s why agencies like Fifty Five and Five – and designers like me – are evermore focused on creating holistic solutions by achieving the kinds of standards I’ve detailed here. Not every business should tune everything to AAA compliance overnight, but even small steps like colour contrast changes are a way of showing we’re starting to bring a focus to an often forgotten part of design. Keeping all this in mind, upholding accessibility standards and best practice can help guide us to a more inclusive digital world.