Websites and social media tend to be the most popular touchpoints of an organisation’s brand, but we regularly come across brand guidelines that won’t work well on screen. Why is this happening?

Branding is often commissioned as a siloed operation, with guidelines created by a brand specialist being ‘thrown over the wall’ to be turned into a website by a digital agency. This means that the design team working on the brand often won’t have had the chance to user test what they have created. In short, digital isn’t being thought about in much depth at the point of conception.

There can also be a feeling among brand designers that making things accessible will mean compromising on aesthetics. It’s true that there are rules to observe, but taking these into account upfront means that you’ll be producing a rulebook that’s robust. Failing to bake accessibility in from the start can either result in products that don’t work for their audiences or in branding that is watered down — some of the essence gets ‘lost in translation’ if adjustments need to be retrofitted further down the line.

Here are some elements to consider that will make your branding more accessible:

Colour

A colour palette is the cornerstone of most brands. Running the colours through a contrast checker like Contrast Grid will test whether they’ll hold up for screen use. It might also be worth considering offering alternative colours for specific audiences — for example, users on the autism spectrum may find it easier to process information when the colour palette is subdued. Colour blind people can also be under catered for — a significant constituency estimated as 1 in 12 men, 1 in 200 women.

Logos

Logos need to be robust enough to hold up on small screens and possibly as avatars and favicons (the small icon that serves as branding for your website) — a set of artworks for different sizes and applications can be developed.

Typography

This starts with specifying fonts and type sizes that work well on screen. While the overall look of a font will convey the tone of your organisation, consideration should also be given to how legible and readable it will be to your intended audience(s). For example, a single storey ‘a’ may be more recognisable for readers with a lower reading age, while its double storey variant will be easier to differentiate from an ‘o’ for users with low vision.

Tone of voice

If you’re including guidance on language we’d always advocate keeping things straightforward and simple. Overly technical language can be a barrier to entry for those who aren’t familiar with the subject, have low literacy, or have English as a second language. Around 10% of the UK population has some degree of dyslexia according to the British Dyslexia Association.

Using jargon and difficult language can even slow things down for audiences close to the subject. Choosing common words and simple sentence structures can have a big impact on reading speed. Writing in a way that can be easily understood is a strong signal that you care about your users and you value their time — it’s not just about allowing for those with specific needs, but making it easier for all.

Test and iterate

The components of a brand will often not have been rigorously tested at the point of guideline creation. Guidelines rarely explore digital applications in much detail, so be prepared to make adjustments to your brand as it is rolled out and put in front of real users.

This list is by no means exhaustive. You can find links that go into a lot more detail below.

If you’re planning a rebrand, keeping accessible design front of mind will ensure that you reach the widest possible audience and that your new look doesn’t get diluted in translation when it starts being rolled out in the real world. Accessibility shouldn’t be seen as a niche concern, it makes things work better for everyone.

Some further reading

We recently shared accessibility as one of the things that charity and public sector websites tend to do better than their commercial counterparts. This starts with the brand and the mindset of the organisation; to embrace inclusive design as their approach rather than accessibility as an add-on.

As you’d expect GOV.UK have some handy resources:
– An Accessibility Reading List
– Content writing guide

The a11y project: A community-driven effort to make digital accessibility easier

Readability guidelines from Sarah Winters of Content Design London: https://readabilityguidelines.co.uk/

Inclusive language also avoids being centred on a male, white or binary gendered experience. Shopify has some of the most developed digital guidelines on accessible and inclusive language.

More on what makes a typeface accessible:
https://medium.com/the-readability-group/a-guide-to-understanding-what-makes-a-typeface-accessible-and-how-to-make-informed-decisions-9e5c0b9040a0

Microsoft’s inclusive design principles:
https://www.microsoft.com/design/inclusive/