Unfortunately, visual impairments are widespread. It is crucial to ensure that your brand colors meet guidelines for accessibility so everyone can see and understand the information available on your business website. Don’t worry, there are many tools to assist you with this task.

Here, the website support team at Drudesk helps you evaluate your company web color palette for accessibility.

What is web accessibility?

Website accessibility means that the platform is developed in a way to make it possible for all users, especially those with physical disabilities, to access the content and interact with all the elements on the site.

Check out why website accessibility is important for your business.

You can also take a look at this case study on web accessibility for visual impairment.

Why is color contrast important for web accessibility?

Color contrast refers to the mathematical difference between a foreground color (text) and a background color. If the contrast is not high enough, people, especially those with visual impairments, will have difficulties reading the text.

accessible and non-accessible text

The low contrast is 0.0.

The highest contrast is 21.0 (black over white).

Being aware of how people with different visual impairments see and interpret colors can change how you choose your company brand color palette.

Is my company web color palette accessible?

Use these tools to see if your web color palette is accessible:

  • A11Y Color Contrast Accessibility Validator analyses the color contrast according to the WCAG 2.1 Guidelines and displays color contrast issues after the analysis. You can either test your web page or test color pairs to see the results.

A11Y-Color-сontrast-Accessibility-Validator

  • NoCoffee is a visual impairments simulator Chrome plugin that allows you to layer simulations of visual impairments over the web page. It can be helpful in understanding such vision problems, as low acuity, low contrast sensitivity, colorblindness, visual snow, glare, ghosting, cataracts, nystagmus, and obstructed visual field.

NoCoffee Chrome plugin

  • ColorSafe will help you determine color contrast accessibility. All you have to do is to enter a background color and determine the styling of your text. Accessible text colors will be generated in accordance with WCAG Guidelines recommend contrast ratio of 4.5 for small text or 3 for large text which is 24px or 18px bold.

color-safe-color-testing-tool

  • Who Can Use is a tool that evaluates color contrasts selected by you and determines whether the color palette is accessible. This tool brings attention and understanding to how color contrast can affect different people with visual impairments.

who-can-use-color-testing-tool

How to make an accessible color palette?

Follow these Web Content Accessibility Guidelines (WCAG) to make your website more accessible to people with visual impairments.

Level AA

For all text, a contrast of 4.5:1 is required, except for:

  • Large text (24px and larger): a contrast of 3.0:1 is required
  • Bold text of 19px and larger: a contrast of 3.0:1 is required
  • Logotypes: no contrast requirements
  • Decoration text: no contrast requirements

Level AAA

For all text, a contrast of 7.0:1 is required. except:

  • Large text (24px and larger): a contrast of 4.5:1 is required
  • Bold text of 19px and larger: a contrast of 4.5:1 is required
  • Logotypes: no contrast requirements
  • Decoration text: no contrast requirements

How to build a more accessible color scheme?

Here is a case study on how we created a more accessible brand color palette for our clients.

  1. We tested every color pairs in the existing color scheme and found out that only a few pairs meet the 4.5:1 standard.
  2. Our web designers used the existing colors as a starting point as the purpose was not to choose a new web color palette but to adapt the existing one.
  3. We adjusted saturation and brightness values for each color to get a color with the same hue but the accessible level of contrast.

Make your web color palette accessible!

Use the tools mentioned above to test every color pair in your existing brand color palette against the background of your website. Make sure that all the colors meet the 4.5:1 standard. If no, well, you definitely need to choose a more accessible brand color scheme. You can always contact Drudesk web designers to choose the new both appealing and accessible web color palette!

Not sure if your website and your company brand color palette are accessible? Contact Drudesk for the website accessibility audit.

 Get new blog posts by email:
Do you accept our terms and conditions?