How to Choose Accessible Colors for Your Website

Test your brand color first

Check your main color on white and on black before you design anything with it. The example blue #3366CC reaches 5.36:1 on white, which passes AA for normal text, but only 3.91:1 on black, which is enough for large text only.

Test both directions: the color as text on a light background, and white or black text on top of the color, for example on buttons.

Fix low contrast by changing lightness

You rarely need a different color. Making it a little darker or lighter, while keeping the hue, is usually enough. The suggested fix in the tool does exactly this:

Build a palette from tints and shades

One brand color is not enough for a whole interface. Tints (mixed with white) and shades (mixed with black) of the same hue give you matching backgrounds, borders and hover states. For #3366CC, a 50% tint is #99B3E6 and a 50% shade is #1A3366.

Use light tints for backgrounds and dark shades for text, and check every text and background pair you actually use.

Never rely on color alone

WCAG success criterion 1.4.1, Use of Color (level A), says color must not be the only way to show information. Many people with color vision deficiency cannot tell some colors apart, most often red and green.

Underline links in text, add an icon or a word to error messages, and label chart lines directly instead of using a color legend only.

Checklist

Before you publish, go through these points:

• Body text reaches at least 4.5:1 against its background.
• Large headings reach at least 3:1.
• Input borders, focus outlines and icons reach at least 3:1.
• Links, errors and required fields are marked with more than color.
• Text on images or gradients is checked against the lightest part behind it.