Not all colours are created equal. But colours are an incredibly important part of successful branding.
Effective branding is the best way to make your business stand out, attract customers, and let everyone know exactly who you are and what you do. It’s a way to build your business and contribute to lasting growth.
And colour makes a brand not only more noticeable, but significantly more appealing.
Along with all of these considerations is the factor of accessibility. Choosing your website’s colour palette carefully ensures that your business and your content is available to everyone.
Everyone has their favorite colours and others that they really shy away from. Taking typical standards into account when designing a brand can draw in your audience, whether they’re established customers or brand new ones.
As a matter of fact, colour can work to increase the recognisability of a brand by up to 80%.
So it isn’t surprising that colour choice is an important consideration in designing a website.
Along with branding, visibility is a big deciding factor behind choosing a colour palette. After all, the most brand-appropriate colour in the world won’t do much good if it doesn’t stand out enough to be seen.
Background, culture and nationality, personal feelings and associations, and disabilities like colour blindness can all factor into a person’s individual reaction to any given colour.
Readability is an especially important factor for a business website. A bright yellow background with spring green print will definitely be “visible,” but not in the way that you want!
And it will make it almost impossible for the content to be read and understood.
Including accessibility features in your website design gives you the widest audience possible.
Of course, we’re not completely on our own when it comes to judging what colours to use, and how they should be employed.
In the interests of making website content, including business websites and branding content, as accessible as possible to as many internet users as possible, there are sites like Web Accessibility In Mind, or WebAIM which is a third party accessibility expert who offers a variety of tools and information to designers.
The site also provides research-based parameters in both colour and contrast for optimum accessibility for business websites. With outlines for everything from linking to sizing, WebAIM’s Web Colour Accessibility Guidelines (WCAG) are a great way to check and double check your design for top accessibility.
The WCAG breaks down its guidelines in a few different ways. The site includes parameters for contrast, lightness, and saturation. No colours are actually prohibited, via the WCAG. Primarily the concern is contrast, making sure that the elements on the website are visible and accessible.
So within the guidelines, there is a lot of room for good brand design.
Both text and images have a minimum recommended contrast of 4.5:1, with some variation for large-scale images and text. Large text is defined as at least 18 point, or 14 point if the text is bold. Because larger text is easier to read, the minimum contrast is 3:1.
These minimum requirements also extend beyond text to include portions of graphics that are necessary to understand the function of the graphic, as well as links and user interface components.
Exceptions include components that are currently inactive, since we usually expect that a button or feature that is low-contrast (such as light gray on gray) is not currently meant to be used.
It’s also notable that features which are out of the control of the designer, such as automatic or default functions on a given browser, are not subject to the WCAG ratings system.
Interestingly, the WCAG do not have contrast ratio requirements for logo design elements. While a designer should consider accessibility even in this area, and create a logo that is easy to read and understand, it’s more likely that the logo design will already be in place before the website content is developed.
That’s part of why accessibility deserves our attention as a building block of design. To truly be effective, it needs to be considered along the entire design journey, not just as a note at the end of creating the website.
So with all these factors to consider, how can graphic designers and branding entrepreneurs put together an accessible colour palette that works along with their brand?
Let’s take a look at some more tools that can help.
WebAIM’s Colour Contrast Checker
WebAIM’s colour contrast checker is probably the first stop on the path to colour accessibility on your website.
As WebAIM is the organization which has developed the WCAG to begin with, they’re best suited to help with ensuring the accessibility of your site. Not only can you input your background colour to check for contrast and accessibility, they also provide guidelines as to the ratio and spacing of your text.
Colour Safe
Colour Safe is a WCAG compatible site that allows you to input text and your chosen background colour. This tool allows for a variety of different font sizes and typeface families, and generates an accessible colour palette based on your choices combined with the WCAG.
Accessible Colours
This site Accessible Colours works along the same lines as Colour Safe, and uses the WCAG to ensure best accessibility. With your input of colour choices, it gives you a pass or fail rating on your site’s accessibility. If you end up with a fail, it offers related colour suggestions that fall within the ratio parameters of the WCAG.
Of course, it isn’t all just about the colours that you choose. In fact, WebAIM notes that truly accessible design can’t just be based on colour alone.
The WCAG dictates that accessible website design should include borders, graphics, italicized or bolded text, and underlining in order to emphasize the necessary information on the site.
This is largely because of the varied range in colour-related disabilities. Really, relatively few of us will actually see a given colour exactly the same way. And even if we don’t technically have a disability, the variation in perception is often significant.
And, of course, technology doesn’t always help with that. You may think that your carefully designed logo is a warm and sunny goldenrod. But as viewed on a customer’s computer, it may just look bright yellow, and it could show up as pale green on another customer’s smartphone.
Colours are, simply put, not always as true as we would like them to be. And that can have a big impact on accessibility.
It’s also a fact that there are so many variable factors in design that it’s impossible to make allowances for all of them.
The exact nature of a visual disability, the display settings of the screen, how close the person is to the screen, or even whether they’re having a good or a bad day all play a part in how they perceive what’s in front of them.
But that’s not necessarily a bad thing. Perhaps what we see isn’t always what was intended by the designer, but it isn’t always a change for the worse!
Ultimately, though no designer or brand expert can account for each and every individual’s perception of a colour — or of a brand, for that matter — what counts is the willingness to try.
Using best practices in accessible design, from the font choice to the colour to the size and spacing, all contribute to the positive perception of a brand. After all, everyone likes to feel that they are being considered, and that brands have their best interests at heart.
While there’s no guarantee that your audience will see exactly the colour that you want them to see, they should be able to see the effort that you’ve put in to create something that is accessible to everyone. That’s makes for exactly the type of good will that helps a brand to thrive and grow.
Not everyone enjoys confrontation. I certainly don’t. Even if you’re fine with confrontation you ideally don’t want to confront your client about the number of revisions they’re making or the additional work they’re adding to the scope of the project. Excessive revisions and scope creep can sometimes cause a little friction. Revisions If you’re working […]
