How to Create an Accessible Website Color Palette

Accessible color design is one of the highest-leverage improvements you can make to a digital product. Over 300 million people have some form of color vision deficiency. Billions more read on screens in adverse lighting. Getting color accessibility right serves a large, often invisible audience, and increasingly it is a legal requirement, not just a best practice.

Understanding WCAG Contrast Requirements

The Web Content Accessibility Guidelines (WCAG) 2.1 define minimum contrast ratios between text and its background. These ratios are calculated using relative luminance, measure of how much light each color appears to emit.

• WCAG AA Normal text: 4.5:1 minimum contrast ratio
• WCAG AA Large text (18pt+ regular, 14pt+ bold): 3:1 minimum
• WCAG AA UI components: 3:1 minimum
• WCAG AAA Normal text: 7:1 minimum contrast ratio

WCAG AA is the legal standard referenced by ADA, EN 301 549, AODA, and most national accessibility legislation. WCAG AAA is recommended for highly readable content (news, documentation, long-form text).

Building a WCAG-Compliant Palette from Scratch

Start with your brand primary color. Before anything else, check whether it passes WCAG AA when used as text on a white background. If it does not, you have two options: use a darker variant of the color for text applications, or use the vivid brand color only for large elements (buttons, borders, decorative elements) and a darker variant for text.

A systematic approach: generate the full tint-shade scale for your brand primary using the Tints & Shades Generator. Then check each value against white and black with the Contrast Checker. Note which values pass 4.5:1 against white (usable as text on white backgrounds) and which pass 4.5:1 against black (usable as text on dark backgrounds). Use these findings to define your text color tokens.

Color Blindness Accessibility

Contrast ratio compliance ensures text is readable, but does not address the separate issue of color coding and meaning encoding. Color blind users cannot distinguish certain color pairs, most commonly red from green (affecting about 8% of men). If your design uses color as the only way to communicate a distinction, it fails for these users.

The fix is redundant coding: pair every color-encoded meaning with a second channel, shape, icon, label, or pattern. A green success message with a checkmark icon and the word "Success" communicates three ways; a colorblind user misses the green but understands the icon and text.

Practical Color Accessibility Checklist

• Body text achieves ≥ 4.5:1 against page background
• Large headings achieve ≥ 3:1 against their background
• Interactive element borders achieve ≥ 3:1 against surrounding background
• Focus indicators are clearly visible (≥ 3:1 contrast)
• Error, success, and warning states include non-color indicators (icon or text)
• Chart data series are distinguishable under protanopia and deuteranopia simulation
• All meaningful images have descriptive alt text