Modern desk setup with a computer displaying a colorful wheel of paint swatches, surrounded by plants, books, and a bowl of apples.

How to Use Web Accessible Colors on Your Website

Using accessible colors on web pages matters enormously. They make pages beautiful and clear to navigate for people with color blindness, low vision and dyslexia. But how do you pick accessible colors?

Let’s start off by talking about these conditions a bit.

A Little About Vision Conditions

The most common type of color blindness is red-green color vision deficiency. There are 4 types: Deuteranomaly, Protanomaly, Protanopia and Deuteranopia. With the last two, people can’t distinguish between red and green at all. Less common is blue-yellow color vision deficiency. There are 2 types: Tritanomaly and Tritanopia. Tritanopia is the more serious one – people can’t tell the difference between blue and green, purple and red, and yellow and pink. It also makes colors look less bright. The rarest type of color blindness is achromatopsia, where you can’t see color at all.

Conditions that can cause low vision include Age-related Macular Degeneration (AMD), Glaucoma, Cataracts and Diabetic Retinopathy. This is how someone with glaucoma might see a web page. People with low vision can’t make out words if there is insufficient contrast between the text and the background.

Dyslexia is a learning difficulty which makes it hard to read, write and spell. It affects 5-10% of people globally. People with dyslexia prefer sufficient contrast in foreground and background colors, but pure black text on a white background can be harder for them to read. Background pictures and patterns can also affect readability.


Use of Color for Websites

Color alone should not be the only way to indicate meaning on a web page. This is specified in WCAG Success Criterion 1.4.1 Use of Color. Let’s look at ways to fail this criterion, and then ways to pass it.

Here’s a table of students’ exam results showing the name and subjects where a pass is indicated by green text and a failure is indicated by red text. People with red-green color blindness will not be able to tell them apart.

Instead, include the words pass or fail after the subjects, or by using a check mark or a cross to indicate success or failure.

Another example of a Use of Color failure is creating links which cannot be told apart from the text because they are a similar color to the body text. 

The simplest way to fix this problem is to underline or use bold text on the links. It’s not enough to underline or embolden them on hover or focus; this would still fail the success criterion.

A final example: Adding a colored border around an input field to indicate that an error has been made also fails the Use of Color success criterion. It’s not obvious to a colorblind user that the error is there. 

You can ensure that this success criterion is passed by adding text next to the form field that says, for example, “Error: Please fill in this field”.

Color Contrast for Websites

The other main consideration with using color is to use an appropriate level of color contrast. This is specified by success criterion 1.4.3 Contrast (Minimum). This sets a minimum color contrast ratio of 4.5:1 for normal text and 3:1 for large text. WCAG doesn’t mention a minimum font size, though 16px is widely used. Large text can be defined as 18pt (24px) or 14pt bold (18.5px).

There has been a trend in web design to use light gray text against a white background, but this fails the color contrast specification. You can still sometimes see this in form placeholders, website footers and terms and conditions pages.

Colors are commonly specified online by hex codes, which are 6 digit codes following a pound sign. The highest color contrast possible is black on white or #000000 on #FFFFFF. Remember though that for dyslexic users, this combination can cause words to ‘dance’ on the page, so is better avoided.

You are better off using a dark gray color against an off-white background to cater for this user group.

For text on gradient backgrounds, you need to check that the text color will work across all the colors in the gradient. 

Another thing to be mindful of is using text on image backgrounds. It’s quite easy to fail on color contrast. If you’re going to overlay text on an image, it may be better to give it a solid color background.

If you use WordPress, you can set text and background colors in the block editor sidebar. If you choose a combination with poor contrast, the editor puts in a little note to warn you.

How Can We Ensure That We Use an Accessible Color Scheme?

First, it helps to have a color picker to select colors from. You’ll find one at htmlcolorcodes.com. (Avoid automatic accessibility overlay tools!)

On WordPress, you can find themes on WordPress.org which meet color contrast standards. You do so by searching the theme directory for the accessibility-ready tag. For newer block themes that have style variations, note that the default style will have been tested to meet the colour contrast standards, but other style variations may not meet them.

The Accessible color palette generator from Venngage is one tool you can use. This generates a color palette from a single color. Add the hex code that you want to use for the basis of your palette and use the Generate button to build an accessible color scheme. 

Another tool you can use is the Accessible color palette builder on GitHub. It allows you to input up to 6 colors and out of those, it shows you which color combinations are accessible and which are not. The contrast ratios are visible if you hover over the combination on a desktop.

Now you know how to use color accessibly! Remember – accessible sites can still be beautiful sites. Better yet, if more people can comfortably use them, they can be effective sites, too.