Colour gradients

Building an accessible website: 5 things to get right.

Thursday 11th June 2026

Accessibility can feel like an overwhelming topic. 

The Web Content Accessibility Guidelines (WCAG) has dozens of success criteria, three levels of compliance (A, AA & AAA), and technical language that can make it difficult to know where to start. 
 
There are a few key principles that are easy to keep in mind, however. 

 

Colour contrast 

When colour isn’t a guarantee, contrast is key. It’s what keeps your message visible rather than getting lost in the page. 

To achieve a WCAG AA rating: 

- At least 4.5:1 contrast ratio between text and background for normal-sized text 

- At least 3:1 for large text (18pt or 14pt bold) 

Meeting these minimums is essential to accommodate for users with low vision, colour blindness, and many other visual impairments, but it’s not just a box-ticking exercise. Poor contrast leads to frustration, confusion and, ultimately, lost users or customers. 

Thanks to a wide range of accessibility tools, there’s really no excuse for falling short. Figma even has a built-in contrast checker in the colour picker, making it easier than ever to design inclusively from the start. 

Flashy animations and sleek aesthetics are nothing if not everyone can read, understand and engage with your content. 

 

Keyboard operable 

It’s easy to forget that not everyone interacts with websites using a mouse. For some that is as a preference, but for many it’s out of necessity.  

WCAG requires that all functionality be available using a keyboard alone, which means: 

- Every interactive element must be reachable using Tab 

- Focus indicators must be clear and visible 

- Users must not become trapped in menus, modals, or forms 

Try navigating your own website with just your keyboard; you’ll be surprised at how many issues can slip through. Now imagine being one of your users or customers and experiencing the same issues. 

Achieving these elements isn’t too difficult, but it requires intention. 

 

Language 

You can meet every technical requirement and still exclude users with your words. 

Accessible language means: 

- Writing clearly and concisely 

- Avoiding unnecessary jargon 

- Explaining acronyms 

- Providing helpful, human error messages 

WCAG promotes readable and predictable content because cognitive accessibility matters. 

Complex language creates barriers for: 

- People with cognitive disabilities 

- Non-native speakers 

- Users under stress 

- Anyone scanning quickly 

Simple language makes your brand sound more inclusive, not less intelligent. 

The more a user has to try to reread your content, the more likely they are to give up entirely. 

 

Adapting brand colours 

Despite its importance, accessibility is often not at the forefront of consideration during the branding process, save for some customary contrast checks on some colour combinations. The brand work could be exemplary, but if it’s not accessible it’s excluding part of your audience. 

The good news is you shouldn’t have to abandon your brand entirely to improve its accessibility. Sometimes simply introducing darker and lighter variants, or tweaking specific colour combinations, can be enough to create the contrast that you need.  

These new colours can be introduced to your brand as digital-specific variants, meaning they don’t need to disrupt how your brand is used in other mediums. 

Such changes won’t dilute your brand; they will strengthen and expand the connection to your audience. 

 

Raising your standards 

WCAG outlines 3 different standards for accessibility: A, AA and AAA  

Although the AAA standard may be the most accessible, it’s not necessarily required or realistic for all situations. It involves significant content adjustments and development time. 

Some key changes include: 

- Minimum 7:1 contrast ratio for normal sized text (increased from 4.5:1 for AA) 

- Minimum 4.5:1 contrast ratio for large text (increased from 3:1 for AA) 

- More advanced readability requirements 

- Stricter rules around timing, interruptions and navigation consistency 

The contrast ratios alone put such a limitation on your website’s visuals that it’s not appropriate for a lot of projects.  

However, even if you can’t achieve the complete AAA standard, you can still look to work towards it. Not being able to adapt to AAA contrast ratios doesn’t mean you can’t improve your websites keyboard operability to a AAA standard. It shouldn’t be an all or nothing approach. 

 

There’s a lot to consider when improving your website’s accessibility, but it’s clear how much value it can add to your brand or company.  

Ultimately, however, it requires clear intention (with a little bit of attention) to enhance it.  

If you’d like to talk to us about how we could improve your website’s accessibility, get in touch.