Color Contrast is an important issue because Website accessibility is an important issue. Websites must be designed to be accessible to everyone, including disabled people – otherwise, you losing part of your audience – and you are breaking the law. I.e., The Equality Act 2010, which states that you are not allowed to discriminate against disabled people. So, a critical aspect of website accessibility is color contrast. In this blog post, I will explore the role of color contrast in accessible web design and outline tips and strategies to improve color contrast on your website.

What is color contrast?

Color contrast refers to the difference in color between two elements, such as text and its background. It is measured using a ratio, between the text’s color and the background color. The higher the ratio, the better the color contrast. For example, 1:1 is white on white and 21:1 is white on black. Color contrast is essential in web design because it affects the readability and legibility of content. For some general background information, read my introduction to colour and accessibility on LinkedIn.

Why is color contrast important for accessibility?

People with visual impairments, such as color blindness, rely on color contrast to navigate and understand content on websites. If the color contrast is insufficient, they may not be able to distinguish between different elements on the page, making it challenging to complete tasks or access information. Additionally, color contrast is essential for people with cognitive impairments, who may find it difficult to read or understand content with low color contrast.

Accessibility guidelines and laws related to color contrast

Many countries have accessibility laws that require websites to be designed with accessibility in mind. In the UK, the Equality Act 2010 requires businesses to ensure their websites are accessible to people with disabilities. The Web Content Accessibility Guidelines (WCAG) outline the standards for website accessibility, including color contrast. The UK also has British Standard 8878 (BS 8878) is the Web Accessibility Code of Practice developed by the British Standards Institution, which is a standard aiming to introduce website accessibility to non-technical professionals, including.

How to check color contrast

Several tools are available online to check color contrast, such as the WebAIM Contrast Checker and the Contrast Ratio Checker. These tools provide a ratio between the text and background colors, indicating whether the color contrast is sufficient.

Tips for improving color contrast

1. Use high-contrast color schemes: High-contrast color schemes, such as black and white, are easier to read and understand for people with visual impairments. Avoid using low-contrast color schemes, such as light gray text on a white background.
2. Avoid color combinations that are difficult to distinguish: Some color combinations, such as red and green, can be challenging for people with color blindness to distinguish. Use color palettes that are accessible, such as blue and yellow.
3. Use text alternatives for non-text content: Non-text content, such as images and videos, should have text alternatives, such as alt tags, that describe the content. This allows people with visual impairments to understand the content.

Color contrast is an essential aspect of accessible web design. Use higher-contrast color schemes, avoid color combinations that are difficult to distinguish, and provide text alternatives for non-text content. By making your website accessible, you are ensuring that more people can access your content including disabled people.

Get in touch today to chat about how I can help you ensure your website is accessible to a wider audience: Tel: 07810 098 119

Email: webdesign@jimbyrne.co.uk

Use HTML attributes, or CSS to set web page colors, but don’t use a mixture of both.

For example, if you set the background colour in a table cell to black using an HTML attribute (e.g. bgcolor=”#000000″), and used CSS to create contrasting white text (style =”color: #FFFFFF”).

Your page will look fine and you will be happy until you get emails from users surfing with style sheets off (or those using browsers that don’t support style sheets). Those visitors won’t be able to read your text.

I haven’t come across anyone yet who can read black text on a black background.

This very simple tip will help you to check whether the colours you have chosen for your web pages have adequate contrast.

Take a screen shot of one of your web pages, and open it up in an image editing program (e.g., Photoshop). Desaturate the image to remove all colour so that you end up with a greyscale image.

Viewing the page as a set of contrasting grey areas makes it much easier to see whether, for example, there is sufficient contrast between the background colour and text. I was reminded of this tip while reading the Techdis article Colour and Contrast Accessibility Issues: for the design of e-learning materials by EA Draffan and Peter Rainger.

When creating a web form don’t write, ‘the fields with a red dot next to them are compulsory, those with a green dot are optional.’ This statement will be of no use to people who are colour blind, or those using grey-scale monitors, or those using screen readers.

Requiring users to differentiate between colours to access important information can lead to problems. An example would be a navigation button that has red text on a green background, as people who have difficulty differentiating between red and green (the most common kind of colour blindness) will have a hard time trying to navigate the site.

The main colour combinations to avoid for people who are colour blind:

Red/green combinations (memory aid: red berries against green leaves on a tree)

Blue yellow combinations (memory aid: yellow daffodils against a blue sky)

‘The Institute for Dynamic Educational Advancement (IDEA) and Brandeis University’ provide some useful information about colour blindness.

Links

The Institute for Dynamic Educational Advancement (IDEA).

Colour – in terms of accessibility – is one of the areas I find hardest to understand; I can read a sentence like,

‘avoid using colors of similar lightness adjacent to one another, even if they differ in saturation or hue.’ (from https://www.lighthouseguild.org/)

And be as confused after I’ve read it as I was before.

I guess that is because – not having done a course on colour theory – I’m thrown by the jargon. In this weeks tip, I will define the words hue, lightness and saturation, and, having figured out what they mean – try to understand the above tip. Bear in mind that with these definitions I am simplifying as much as I can.

Hue:

This is the easy one – just substitute the word ‘colour’ for the word hue and you have the meaning.

Lightness:

How much light does the colour reflect: black doesn’t reflect much, white reflects lots. Colours thus appear light or dark; how light or dark they are – tells you their ‘lightness’.

Saturation:

The purity of the colour – saturated colours contain no white, grey, black or complementary colours.

Ok – so now I’ll put the tip from the Lighthouse website into words I understand:

Even when using different colours next to one another (e.g. text and a background colour), if they are similarly light or similarly dark there will still be accessibility issues for some users.

Phew – perhaps this ‘colour business’ is not as impenetrable as I thought.

Links

• Lighthouse International