Colour Accessibility in Web Design

Accessibility is important for any website’s design. It allows the most possible people to access your business online. A key part of that is ensuring everything in your web design is clearly visible. Along with contrast and size, you also need to consider colour blindness for accessiblility in web design. If a web design doesn’t consider different levels of colour vision, certain elements of the site will become indistinguishable or even invisible. That creates a frustrating experience, and users will leave. We’ll explain why colour blindness matters for web design and some of the best practices for ensuring an accessible contrast on your website.

The Kinds of Colour Blindness or Colour Vision Deficiency

Colour blindness is often used as the general term for all colour vision deficiencies, but there are different kinds. The most common type that affects 8% of all males is “red-green” colour blindness. This is usually either from deuteranomaly or protanomaly and refers to their inability to see reds and greens as vividly. However, there are other less common types of colour blindness to also consider in your web design. There is blue-yellow colour vision deficiency, where blue and yellow are less visible. The other is monochromacy, where someone sees no colour at all and instead views the world in grayscale (black, grey, and white). An ideal web design should be accessible to all of types of colour blindness.

How Colour Blindness Affects Sight or Visual Acuity

Skipping over the details of the biology, when someone has red-green colour blindness, they see greens and reds less strongly than those with normal colour vision. Most can still tell the difference between a red object and a green one, but each colour will be less vibrant. The difficulty comes in colours that have red and green in them. That is why someone with red-green colour blindness has difficulty differentiating purples from blues. They see less of the purple’s red, turning it blue. This is also something to consider in your web design. For example, if your design includes orange and neon green items next to each other, it will be difficult for someone with red-green colour vision deficiency to differentiate them. This is because they see the yellow in each colour more than the red and green. Depending on the strength of the deficiency, even something yellow will be difficult to pick out from the other two.

How to Accommodate Colour Blindness in Web Design

To be sure that everyone can see everything on your website, you need to be sure that even someone who can’t see colours can still differentiate text, images, or buttons. There are various techniques for colour accessibility, but here are some of the most essential for web design:

Don’t Rely Exclusively on Colour

One of the staple practices in accessible visual design is to not use colour as the only differentiator. Those with colour deficiencies can still see shapes and other visual markers. For example, hyperlinked text shouldn’t just be blue or another colour. It should also be underlined to be recognizable to any level of colour vision. Bars in a graph with patterns inside along with colours are always distinguishable. This is the same design choice behind coloured tiles in a board game also having certain shapes.

High Contrast Colours

Use colours that have high contrast to keep them distinguishable. For example, Rosewood’s web design primarily uses white and blue. No matter the kind of colour blindness, these can’t be confused. You can run a basic contrast test between two colours with a tool provided by Web Accessibility in Mind. The plug-in tota11y will check your entire website for various visual accessibility concerns, including contrast.

Keep it Bright

Colour vision deficiencies have a harder time differentiating darker colours. Using brighter colours will help them stay visually distinguishable.

Not All Complementary Colours Contrast Equally

Choosing two colours on the opposites of the colour spectrum, such as black and white, can typically provide good contrast. However, that isn’t true for all kinds of vision. Blue and yellow are complementary colours with a high contrast value, but they are less distinguishable to those with blue-yellow colour blindness. That is why blue and orange are often used instead. The red in the orange helps it stand out from the blue.

Using Greyscale

Designing a site in greyscale (grey, white, and black) will ensure its visible to all colour vision deficiencies. However, your branding may include pops of colour. In this case, various web tools and screen filters built into MacOS and Windows will allow you to look at your site in greyscale. This simulates an extreme monochromatic experience and can help you see whether some colours in your web design might be confusing.

Web Design Everyone Can See

If you have full colour vision, it can be easy to forget not everyone sees the rainbow as vibrant as you. However, accessibility is a critical part of web design used to create a website that accommodates everyone’s abilities. An accessible website creates a welcoming digital space. If you make sure every part of your web design stands out, your business will too. If you want to be sure your web design accommodates different colour vision deficiencies, contact Rosewood’s web design team. They’ll make sure your colours shine.