What are Accessible Color Palettes?

What is an accessible color palette?

An accessible color palette is a set of colors chosen so that text, icons and interface parts have enough contrast against their backgrounds, and so that color is never the only way to convey meaning. People with low vision, color blindness or a washed-out screen can then read and operate the page. WCAG sets the minimum contrast ratios that a palette has to meet.

The WCAG contrast rules

• Normal text (SC 1.4.3, level AA): at least 4.5:1 against its background.
• Large text (SC 1.4.3): at least 3:1. Large means 18 point or larger, or 14 point bold or larger, about 24px and 18.5px in CSS.
• UI components and graphics (SC 1.4.11, level AA): at least 3:1 against adjacent colors, for example a button border, a focus ring or a chart line needed to understand the data.
• Enhanced contrast (SC 1.4.6, level AAA): 7:1 for normal text and 4.5:1 for large text.
• Use of color (SC 1.4.1, level A): color cannot be the only visual means of conveying information, such as an error or a selected state.

Disabled controls, pure decoration and logotypes are exempt. Details are on the W3C pages for 1.4.3 and 1.4.11. See WCAG for the full standard.

How the ratio is calculated

The contrast ratio is (L1 + 0.05) / (L2 + 0.05), where L1 is the relative luminance of the lighter color and L2 of the darker one. Relative luminance is 0.2126 R + 0.7152 G + 0.0722 B after each sRGB channel is linearized. Ratios run from 1:1 to 21:1. WCAG says computed values must not be rounded, so 4.499:1 fails the 4.5:1 threshold.

Worked examples on a white background

Notice how a one-step change from #767676 to #777777 flips the result. For UI parts, #949494 gives 3.03:1 on white and passes the 3:1 rule, while #959595 gives 2.995:1 and fails.

Common mistakes

• Light grey placeholder and helper text that looks fine on your monitor but misses 4.5:1.
• Checking the brand color on white only. Hover, disabled-looking, dark mode and text on images are separate combinations.
• Text over a photo or gradient with no overlay, so contrast changes along the text.
• Showing errors or chart series in red and green alone, with no icon, label or pattern (SC 1.4.1).
• Forgetting borders, icons and focus indicators, which fall under 1.4.11, not 1.4.3.

Testing a palette

Check each text and background pair with a contrast checker, then verify the rendered page, since CSS opacity and overlays change the real colors. Automated scans flag many contrast failures, but text on images and gradients usually needs a manual look. Our guide to website accessibility testing tools compares options, and page speed monitoring tracks the Lighthouse accessibility score over time so a color change that breaks contrast shows up. Related reading: accessible images, assistive technology and automated accessibility testing.

FAQ

What contrast ratio do I need for body text?

At least 4.5:1 for WCAG AA (success criterion 1.4.3). Large text needs 3:1. Level AAA asks for 7:1 for normal text.

Does the 3:1 rule apply to buttons and icons?

Yes. Success criterion 1.4.11 requires 3:1 against adjacent colors for the parts of a control needed to identify it and its states, and for graphics needed to understand content. Text inside a button follows the text rule.

Is a logo exempt from contrast rules?

Logotypes and brand names are exempt from 1.4.3, but a logo that works as a control, or a low-contrast version chosen by the author instead of required by brand guidelines, is not.

Can I use color alone to show an error?

No. Under SC 1.4.1 you need another cue such as text, an icon or a pattern, because some users cannot tell the colors apart.

Do I need to test dark mode separately?

Yes. Every foreground and background pair that can appear on screen has its own ratio, so a dark theme needs its own check.