Skip to content Skip to footer

How to develop an accessible colour scheme.

Illustration of a colour wheel with the different shades in a circle.
Article Content
  • Why, when planning your colour schemes you should use software and browser tools but not be overly dependendent on them and plan ahead.
  • What a colour wheel is and how you can use it to plan and develop colour schemes.
  • What is meant by complementary shades how to to utilise them to ensure you have accessible colour contrast.
  • Why research is an important part of the process in developing a colour scheme, and how you can be inspired by other forms of media.
  • Why you should not leave making your colour cheme accessible to the last minute and why you will always be rewarded by planning ahead.

 If you have read the introduction to why colour contrast is important (read the colour contrast introduction here). You now understand why colour contrast is important to accessibility and how Web Content Accessibility Guidelines (WCAG) sets the standard for the level of contrast required. 

However, the key question is how do you make sure you get it right. The key is in the planning.

Why you shouldn’t rely on online tools

As you will quickly discover, an Aladdin’s cave full of online tools and software will measure your colour contrast for you.

Many will simply allow you to input your colours (either in hex code or RGB). They will then give you your exact contrast ratio and state if it meets the AA or AAA standard, or doesn’t meet any standard at all. Firefox’s web development tools will even let you, on your live website, hover over specific elements and see their grade. There are also validators, such as Wave, which will warn you if your colour contrast is low when they complete their site analysis.

With all of these tools, it is tempting then to fall into the trap of letting all of this software do the hard work for you. However, what may appear to be the easy option can become a long and arduous process if you don’t start from a good place with a well-planned colour scheme.  

Colour wheels and complimentary shades

Colour schemes can be as simple or as complicated as you like. With the scale of different colour schemes and theories, it is easy to get lost. I would therefore start simply, by buying a colour wheel.

These simple cardboard wheels show the full spectrum of colours and shades in a circle with a dial that you can move around. They show visually how colours compare and contrast with each other. They are well labelled and provide detail on how different colour schemes are constructed; as well as all of the technical names for colour groups and schemes.

A useful starting point in the context of colour contrast is to pick two dominant colours that are opposite each other on the colour wheel. (these are called complimentary colours). You could select one for your background and the other for your text. This is called a complimentary colour scheme (read about complimentary colour schemes here). You can then have different shades in between these colours for other parts of the website, i.e., maybe a slightly lighter shade of one of the selected colours for buttons. This more complex colour scheme, is known known as a split complimentary colour scheme (read this article about split complimentary colour schemes).

This is not the only approach you can take, but the important thing is you start to think systematically about how you are using colour. Therefore, when you do then check your colours with validators and tools you will have an overall strategy in place. This will make it easier to adapt and alter colours to meet colour contrast standards. If you have thought everything through carefully, these will likely be slight adjustments to the shade and hue of colours used, rather than a complete redesign.

The value of research

The last piece of advice when it comes to developing a colour scheme is to look at the design of others.

This may seem obvious, but when overwhelmed with all of the learning in web development, it’s easy to get tunnel vision. Many designers are experts in using colour and developing creative colour schemes which are still accessible.  There are numerous sites of inspiration for colour schemes, such as graphic design, photography or even nature. There is no harm in gaining good ideas from what you observe around you.

Useful Tip

Any website, which is related to public service, or is likely to follow accessibility regulations closely is a good source of inspiration. Check out, the UK government website or the BBC both have a high standard for accessibility. (visit the UK Gov website here and the BBC website here). Dig into their code using your browser tools and read any design documentation they produce to give you a clear idea of how they created their colour schemes.

Final advice

The more time you invest in the planning process for your use of colour, the more likely you will produce accessible websites with good levels of colour contrast.

Online tools and checkers are incredibly useful and are an essential part of the validation process. However, if you leave it all to the last minute and rely on them too heavily to fix everything, you will get into difficulty. The last thing you want is to be in the position where you are frantically throwing colours at a contrast checker, trying to get them to be WCAG compliant.

Developing a colour scheme with appropriate colour contrast is a key part of this process of accessible design. It, therefore, needs to be respected with time and planning. If you do this, you will reap the rewards.

Grab your colour wheel and get started!  

Leave a Reply

Your email address will not be published. Required fields are marked *