How to build an accessible brand color palette

An accessible color palette is a set of colors whose text and background pairs reach the WCAG contrast minimums. WCAG never rates a color on its own. It measures the contrast ratio between two colors, a number from 1:1 to 21:1 that compares the brightness of the lighter color with the darker one (W3C's definition). So one blue can pass as a large heading on white and fail as small text on white, and building a palette means deciding what each color is allowed to do.

Against a white background, a color has to be fairly dark to carry small text. Solving W3C's formula for white, a color reaches 4.5:1 only if its relative luminance (its brightness on a scale from 0 to 1) is 0.183 or less, and mid-gray #808080 is already down at 3.94:1. Ratios on this page are cut off at two decimals, never rounded up. The WebAIM Million report for 2026 found low contrast text on 83.9% of home pages, up from 79.1% in 2025.

For the formula and how to test a live page, see our color contrast guide.

What each color in the palette has to do

WCAG sets a different minimum for each job a color does. The table lists the ones a palette has to cover at Level AA, the level these numbers belong to.

Our pages on 1.4.3 Contrast (Minimum) and 1.4.11 Non-text Contrast explain each criterion. Three points matter for palette work:

• The ratios are thresholds. W3C says computed values should not be rounded, so 4.499:1 does not meet 4.5:1.
• A labeled control needs no border. W3C says that when visible text or a sufficiently contrasting icon identifies a control, a border is not required. The 3:1 applies where a border or fill is the only thing that shows the control is there.
• Level AAA is optional. 1.4.6 Contrast (Enhanced) asks for 7:1 for normal text. It is a stretch target, not a requirement at AA. See our page on conformance levels.

This guide is general information, not legal advice. Which WCAG version and level apply to you depends on where you operate; our overview of accessibility laws worldwide is a starting point.

Why brand colors fail on white, and what to do about it

The table below measures three vivid example colors on white. The last two columns show fixes that keep the brand color: a darker shade of the same hue for text, or dark text on the bright color.

The shades in the fourth column are the nearest colors of the same hue that reach 4.5:1 on white, computed by GotAlt. The lighter or more vivid the starting color, the further the passing shade moves from it: the yellow becomes a brownish gold.

The ratio does not care which of the two colors is the text. White text on a fill of the first blue is the same 3.86:1 pair, so a white button label on that blue fails at normal size. Switching the label to #111111 gives 4.88:1 and leaves the brand color alone. There are three ways to keep a brand color that fails as small text:

1. Use it exactly where the minimum is lower or absent. That means large text, 3:1 cues and graphics (if the color reaches 3:1, which the coral and yellow do not), decoration and the logo.
2. Add a darker shade of the same hue for small text and links.
3. Swap the label color. Dark text on a bright fill works, as with yellow and #111111 at 12.27:1.

What brand guidelines cannot do is exempt the text. W3C says that beyond logos, text with too little contrast because of corporate identity or brand guidelines is not exempted from 1.4.3. If a guideline forbids a darker shade, the guideline needs a text shade added to it.

How to build the palette, step by step

1. List the jobs first. Write down every place color appears: body text, headings, links, buttons, field borders, icons, chart series, backgrounds, focus rings, error and success messages, and a dark theme if you have one. Each job sets a minimum from the first table.
2. Start with the neutrals. Gray #767676 on white is 4.54:1, so it can carry normal text, but on a #F2F2F2 card it falls to 4.05:1 and fails. A light #CCCCCC border is 1.60:1 on white. Where a border is the only thing showing that a field is there, it needs 3:1, and #949494 is 3.03:1. For each job, pick the lightest gray that passes and note what it was measured against.
3. Choose the brand color and build a shade scale from it. A shade scale is a row of lighter and darker steps of one hue, often numbered 50 to 950. Because the ratio depends on brightness, a scale lets you decide ahead which step does which job: pale steps for backgrounds, the brand color's own step for large text and 3:1 cues, a dark step for small text and links. The palette generator builds one from your color and keeps that color exactly.
4. Measure every pair on its real background. A text color is only as good as the color it sits on. #2274E0 is 4.52:1 on white but 4.01:1 on a pale blue #EAF2FD card, which fails at normal size. List each text color against each background it appears on, mark the pairs that pass, and let the design system offer only those. The generator's contrast matrix does this for up to five colors.
5. Treat status colors as a separate job. Red error text on white needs 4.5:1 like any text. Bright yellow text is far below it (pure yellow #FFFF00 is 1.07:1 on white), so use dark text on a yellow fill instead. Do not rely on color alone either: W3C's note on 1.4.1 Use of Color lists errors shown only in red and required fields marked only by color as examples, and shows a second cue, such as an icon or text, as the fix.
6. Make dark mode its own set of pairs. No color reaches 4.5:1 on both white and #111111: it needs a relative luminance of 0.183 or less on white and 0.200 or more on #111111. A color that carries text needs one shade for light surfaces and another for dark ones. The blue above is 3.86:1 on white and 4.88:1 on #111111, so it works as text in a dark theme and needs a darker step on white. Our dark mode accessibility guide covers the rest.
7. Check chart and data colors separately. The marks that carry a chart's meaning need 3:1 against the colors next to them under 1.4.11. W3C's pie chart examples fail when the contrast between slices is below 3:1 and pass when the slices have enough contrast around and between them, for example with a darker border. Visible labels and values that carry the same information also work. See designing for color blindness.
8. Record roles, not hues. Name colors for what they do, such as text, text-muted, surface, border and on-brand, and store each approved pair with its ratio. Define them once as CSS custom properties or design tokens, so that fixing one value fixes every use.

Contrast and telling colors apart

The ratio is built from brightness, not hue. W3C explains that for people with color vision deficiency, hue and saturation have minimal or no effect on legibility, so the calculation is built so that hue is not a key factor.

A text-on-background ratio does not tell you whether two palette colors can be told apart from each other. Chart series, status colors and selected versus unselected tabs are pairs where two hues can share almost the same brightness and look alike to some people. The W3C note on 1.4.1 says that colors differing in both hue and lightness count as an additional distinction when their contrast ratio reaches 3:1, and that where people must identify one particular color, an additional visual indicator is needed whatever the ratio. So make such pairs differ in lightness, or add a label, icon or pattern. Our guide to use of color for links covers the same rule for links inside text.

A simulator approximates how a palette looks with color vision deficiency. It is one check, not a substitute for asking the people who use your product.

Logos and brand guidelines

Text that is part of a logo or brand name has no contrast requirement under 1.4.3, and W3C says logos are exempt from 1.4.11, on the assumption that brand guidelines require stricter color choices. W3C's notes on 1.4.3 and 1.4.11 set limits on the exemption:

• Where a logo acts as a control, such as a link to the home page, W3C recommends a logo variant with sufficient contrast if the guidelines allow it, or an equivalent control that meets the minimum.
• A logo dimmed by the author's choice, for example until hover, is not exempt.
• An exempt logo that is a control still needs a focus indicator that contrasts.

Everything else made of brand colors, such as headings, button labels, icons and links, has to meet the minimum for its job. Put the text shades and the approved pairs into the brand guidelines. Related: the large text exception and focus indicators.

Check it yourself

Measure the palette before the colors reach code, then measure the page.

• Accessible color palette generator. Enter one to five brand colors. It builds a 50 to 950 shade scale for each, measures every text and background pair on your light and dark backgrounds, finds the nearest shade that reaches 4.5:1 and exports CSS custom properties, a Tailwind CSS 4 theme block and design tokens. It runs in your browser, so your colors are never uploaded.
• Color contrast checker. Takes one text color and one background, shows the exact ratio against the AA and AAA thresholds and suggests the nearest passing color with the hue kept.
• Color blindness simulator. Shows an image, such as a chart or a screenshot of your palette in use, or a pair of colors, as they may look with protan, deutan or tritan color vision and in lightness only.

These tools measure the colors you give them, as pairs. They do not see your live page. To measure the colors a page actually paints, use the accessibility bookmarklet, and for text over a photo use the image contrast checker. Scan my site for free runs rule-based checks on up to 3 pages; it reads your HTML, so it does not measure painted color. What we check explains why.