It’s safe to say that technology is at the forefront of most anything that we do. It’s a crucial part of our day-to-day lives from paying bills, booking flights and keeping up to date with the latest news. And with the rise of social awareness, it’s more crucial than ever that the technologies we use are accessible to all. But getting to the point of good accessibility isn’t always as simple as it seems!
Breaking Down Accessibility: Technical and Visual
When building websites at Piquant, we break accessibility into two sections: technical and visual. The technical side can sometimes be the easier of the two; developers can go in and make changes to how things work without having to make alterations to a designer’s vision.
The visual side, however, can be a lot trickier to navigate. When working as part of a team, neither developers nor designers work in a vacuum. The relationship is a constant back and forth where the ultimate goal is to produce the best outcome for the client: a website that looks and works best against identified objectives.
Navigating Visual Accessibility Challenges
The Piquant design team are more aware than ever of the importance of accessibility in design, and we can see a shift forwards in approach. One of the biggest challenges for designers moving forwards with accessibility is colour contrast. Colour contrast involves making sure that there is enough contrast between text colour and its background. When designing, there are tools available to test with that will let you know what contrast level you’re at and you can make adjustments if needed. However, this only works when they’re starting with a fresh canvas.
But when you’re working with a client that already has a brand colour palette that has been used for years, it starts to become a much bigger challenge. How do we turn a failing colour story into an accessible one? Piquant were commissioned to redesign a website for a client, using their existing brand. Their brand was one that they had used for years and was incredibly recognisable. However, accessibility testing showed that there were massive issues with colour contrast. Our job was to work with their brand colours to create something more accessible.
Redesigning with Accessibility in Mind
While web accessibility seems like a massive job, getting it right from the beginning can save a lot of time down the line. Accessibility doesn’t have to be the antithesis of aesthetic, they just need to find a way to work together that makes your site available to as many people as possible.
While this initially sounds like a big job, the key is to break down what needs to be done to achieve the desired result.
Here’s a few key areas of interest:
1. Identify the Issues
Understand that not everything needs to be reworked; only the failing areas. There are a myriad of tools that you can use to check your accessibility scores. For an overview of accessibility issues, Google Chrome Lighthouse is a great resource. You’ll be able to see where and why areas of your website are failing.
2. Utilising Black and White
Black and white are opposite ends of the contrast spectrum so utilise them where you can! Because of their neutral nature, they’re not going to clash with predefined brand colours. Lighter brand colours can be used behind black text and darker brand colours can be used behind white text.
3. Work with Secondary Brand Colours
Explore a client’s brand pack to see what other colours can be used in places where there is text on a page. If there are varying shades of a specific colour, test to see which will work together (or with black and white) and use these in areas where text is prominent.
4. Communication with the Client
Communication is key! While you’re not re-branding or completely overhauling their website, there will be some significant visual changes that need to be made, and this can be a bit overwhelming. Explaining the value in the changes is key; having an accessible website is worth a few modifications if you can reach a wider audience. Being able to present various options will also help when communicating with the client, they’ll be able to have a bit more control over the situation.
Summary
While web accessibility seems like a massive job, getting it right from the beginning can save a lot of time down the line. Accessibility doesn’t have to be the antithesis of aesthetic, they just need to find a way to work together that makes your site available to as many people as possible.
