One of the most commonly asked questions in accessibility is how to make your existing color palette into an accessible one. Here are some easy tricks to make your colors into accessible versions.
Think about what colors you want to contrast with
In general, when working with colors, you don’t want to try to contrast two bright colors with each other. The result is rather painful to most people. Instead, you want to contrast with a dark or light color. These can include shades such as pale pink with a black or almost black color.
Avoid using colors too far apart on the color wheel. Using a pale pink with a very dark red can provide sufficient contrast and complementing colors. As a general guide, don’t use colors which are more than 60 degrees from each other on the color wheel together.
Using a pale pink with a dark green on the other hand can result in people experiencing after images. An after image is when an image has too much contrast and even after someone stops looking at the image they continue to see it. It’s rather unpleasant and we should avoid creating this situation for our website visitors.
Additionally, try to avoid using blue with black. While you can technically get enough contrast, the human eye perceives these colors as being very close to each other. If you do want to use blue with black, try to achieve a contrast ratio of more than 10:1.
Converting bright and neon colors
People don’t enjoy reading text in bright or neon colors. People don’t really enjoy staring into brightly colored lights in general. And people really don’t enjoy reading text on a neon background. So there’s a simple trick to make your bright colors easy to read.
Step 1: Convert to HSL
The first step in the process is to convert from RGB (red, green, blue) to HSL (hue, saturation, lightness) color spectrum. Once in HSL, take your saturation to 50% or less.
Step 2: Adjust lightness
If you want sufficient contrast with black or dark colors, then adjust the lightness value to 65% or higher.
If you want sufficient contrast with white or light colors, then adjust the lightness value to 35% or lower.
Colors will now have a contrast ratio of 5:1 or greater. If you are looking for WCAG (Web Content Accessibility Guidelines) 2.1 level AAA contrast ratio of 7:1, then you may need to set your lightness values to 75% or higher for contrast with dark colors. For contrast with light colors, set the lightness to 25% or lower.
Step 3: Convert back to RGB
That’s it! Now just convert your color back to RGB for use on your website.
Be nice to people with your colors
As a general rule, you want people to be able to read and enjoy your website. Many people will leave a website if the colors or color combinations are painful. So be nice to your visitors, adjust your colors in HSL, and make your website more inviting.