When designing a website, there are many different factors to keep in mind. While you want your website to be visually appealing, functionality is equally, if not more, important. After all, there’s no point in having a beautiful website if no one can read the content to understand what your company does.
Several principles dictate the use of colour in web design. Some of these relate to general colour theory whilst others are designed to improve accessibility for those with a visual disability. A web design company will tell you that understanding these principles and implementing them appropriately is a critical step toward design success.
Online accessibility
Historically, the internet has not been a particularly accessible place. In fact, there are countless websites out there containing important information that just can’t be accessed by people with disabilities.
As a virtual space, the internet should be accommodating to everyone. In the past few years, those who provide web development services and disability advocates have been working hard to make this a reality. The Web Accessibility Initiative does a great job at providing important ‘strategies, standards, resources, to make the Web accessible to people with disabilities.’ As per their description, web accessibility ‘means that websites, tools, and technologies are designed and developed so that people with disabilities can use them.’
Disabilities in this context can refer to anyone with an auditory, cognitive, neurological, physical, speech, or visual impediment. However, the WAI also points out that web accessibility standards benefit all people, including the elderly, those with a ‘temporary disability’ (like a broken arm), or those in a situation where accessing online content isn’t easy — like if you’re on public transport and trying to watch a video but don’t have any headphones.
Everyone can benefit from improved digital accessibility.
Accessibility and colour
Colour is a fantastic tool for conveying emotion and establishing a brand. The internet without colour would be a pretty sad and boring place indeed.
However, not all colour combinations look good together. Even if they do look good, they may not be conducive to a positive visual experience, particularly for those with a visual disability. Fortunately, once you get the hang of colour guidelines, adhering to them is a fairly simple task and certainly won’t interfere with your creative process.
By definition, contrast refers to the arrangement of opposite elements and effects. Contrast has always been an important element of design. Our eyes respond well to contrast; it creates focus and can naturally delineate between different elements on the page.
Colour contrast can be achieved by following simple colour theory rules. The colour wheel is a tool used by many designers to help develop colour palettes. Hues that sit opposite each other on the wheel are known as ‘complementary colours’ — blue and orange, for instance, oppose one another and create great contrast. The basic primary colours of red, yellow, and blue are also good options and are what’s known as a triadic set.
If colour theory isn’t exactly your forte, there are plenty of tools out there that can do the hard work for you, like WebAIM or the Colour Contrast Analyser from Vision Australia. Ask your web development services team for additional recommendations if you’re interested.
It’s important to remember that for maximum accessibility, the contrasting colour theory needs to be applied throughout your website. This includes headings, body text, graphics, forms, pop-ups, and more.
Other accessibility considerations
Once you’ve mastered colour theory, don’t stop there. There are a number of other accessibility principles you can apply to the process of web design and development to ensure your site is welcoming to all.
Some of the most common and impactful include:
- Alt-text: If you’ve ever seen someone on Instagram include a description of the posted photo in their caption, you know what alt-text is. Alt-text enables someone with a visual disability to understand the importance and context of a graphic. It’s sort of like a caption, but with more direct and detailed information, which will be read by their screen reader. All images on your website should include alt-text.
- Use headings properly: By this, we don’t mean simply increase the size of your font or put it in bold. Use the H1, H2, and H3 HTML tags to organise and structure your content. A screen reader can use this code to help someone with a visual disability better understand page hierarchy.
- Think about video: There are plenty of tools you can use to help those with a visual or auditory disability understand what’s happening in a video. Captions, recorded narration, and transcripts are a must-have on any website.
Before working with a web design company, ask about their approach to accessibility. Look for examples of previous work they have done and run their websites through accessibility testers to see what the results are. By prioritising accessibility, you will be showing your clients that you really care about their user-experience, which can only lead to an increase in leads and conversions.