Website Accessibility FAQs: Color contrast and color choice

1. Who am I helping when I follow color contrast guidelines?

You are helping people with color blindness (roughly 8% of men), people with low vision (cataracts, glaucoma), and anyone using their phone outside in bright sunlight.

2. What is the required contrast ratio?

WCAG 2.1 Level AA requires a contrast ratio between the text color and its background color:

  • Normal Text (<18pt): 4.5:1 ratio.

  • Large Text ($\ge$18pt or $\ge$14pt Bold): 3:1 ratio.

Tip: As an editor, stick to the brand color palette provided in the editor. Web services has vetted these color combinations on buttons and headings to ensure constrast and brand compliance. Do not pick your own "special colors".

3. Can I use color to convey meaning?

No. You cannot rely on color alone to convey crucial information.

Example:

❌ Bad: The required fields are marked in <span style="color:red">red</span>. (A colorblind user cannot tell which are red).

✅ Good: The required fields are marked with an asterisk (*).

Print Article