abc.useallfive.com

What is Accessible Brand Colors by Use All Five?

Accessible Brand Colors by Use All Five is a browser-based tool for checking whether a brand's color palette meets common accessibility contrast standards. You enter your brand colors, and it evaluates how those colors pair against each other (and typically against text and background) so you can see which combinations are readable and which fail.

The practical value is in catching problems before they spread. A brand palette often looks fine in a design file but breaks down when a light accent is used for text on white, or when two mid-tone colors sit next to each other. This tool turns those judgment calls into pass/fail signals you can act on.

Who it helps

• Designers choosing text, link and button colors across a system.
• Brand and marketing teams who want to keep a palette recognizable without sacrificing legibility.
• Developers who need a quick check before shipping a component or theme.

How to use it in practice

1. List your core brand colors, including the ones you actually use for text and backgrounds, not just the hero shades.
2. Test the pairings that appear in real interfaces: body text on background, button label on button fill, links on white, and icons on tinted panels.
3. Where a pair fails, adjust lightness rather than abandoning the hue, so the palette still feels like your brand.
4. Record the approved pairings as tokens or documented rules so future work starts from safe combinations.

One caveat: contrast compliance is necessary but not sufficient. Passing ratios do not guarantee a palette works for colorblind users, for very small text, or in dark mode. Treat the results as one input, then verify with real screens and, ideally, with people.

If you want a next step, take your three most-used color pairs and run them through the tool, then note which single color you would darken or lighten to fix the worst failure. That one change often resolves several downstream problems.

How do I check my brand's color palette for ADA compliance?

Use a contrast checker to test each color pairing that carries meaning in your interface: text on backgrounds, icons on buttons, borders on form fields, and focus indicators. ADA compliance for digital content is generally measured against WCAG contrast ratios, so the practical test is whether each pair meets the relevant threshold.

Accessible Brand Colors by Use All Five is built for exactly this task: evaluating a brand palette for ADA compliance. A useful workflow is to enter your palette and let it flag which combinations pass or fail, then keep the passing pairs as your approved combinations.

What to test

• Body text against its background (the strictest, most common failure point)
• Large headings and display type, which have a lower threshold
• Button and link text against their fill
• Icons and graphical elements that convey information
• Focus rings and selected states

Typical thresholds

A concrete scenario

Suppose your brand blue is used for links on a white page. If it passes for large headings but fails for body copy, don't abandon the blue — darken it for text use and keep the original for large type and decorative fills. This preserves brand recognition while making the readable version compliant.

Next step

Run your palette through the tool, note every failing pair, and decide for each one whether to adjust the color, restrict it to large text, or pair it with a different background. Recheck after any change, since small shifts in lightness can move a ratio across the threshold.

What WCAG contrast ratio does this tool require for text and background colors?

The tool at Accessible Brand Colors by Use All Five is built around the standard WCAG contrast thresholds rather than a single fixed ratio: it evaluates a brand palette against the levels used for ADA compliance, which means 4.5:1 for normal body text and 3:1 for large text (roughly 18pt/24px regular or 14pt/18.66px bold) and for non-text elements like UI components and graphical boundaries.

Its practical value is that you supply your actual brand colors and see which text/background pairings pass or fail, so you can decide whether a color needs darkening, lightening, or reserving only for large display type.

A useful next step: before locking a palette, test your darkest and lightest brand colors against each other and against white and black. If your primary color fails 4.5:1 on white, plan a darker text variant for body copy and keep the original for headings, buttons, or decorative fills — this preserves brand recognition while keeping content readable.

Can I test multiple color combinations at once or only one pair at a time?

Only one color pair at a time. Accessible Brand Colors by Accessible Brand Colors by Use All Five is built around checking a single foreground/background combination, so there is no batch or grid mode for testing a whole palette in one pass.

How to work through a palette

• List your brand colors, then decide which pairs actually appear together in the interface: body text on background, link on background, button label on button fill, icon on header bar.
• Test each of those pairs individually and record the result as you go.
• Skip combinations that never occur in practice. Testing all possible pairings of a large palette produces mostly irrelevant results.

Decision criterion

Prioritize pairs used for small text, which has a stricter contrast requirement than large headings or decorative elements. If a pair passes for small text, it will generally be fine for larger text too, so testing the hardest cases first saves time.

Practical next step

Build a simple checklist in a spreadsheet: one row per real-world pair, one column for the result. That gives you a reusable record of which combinations are safe, and you only need to re-test the pairs that change when the palette is updated.

How do I interpret the pass or fail results for my brand colors?

The tool checks each color pairing against WCAG contrast thresholds and labels it pass or fail. Treat those labels as a starting point for legibility, not as a full accessibility verdict on your brand.

What pass and fail actually mean

• Pass means the contrast ratio between that foreground and background meets the WCAG AA threshold for the text size context being evaluated. Normal body text needs a higher ratio than large headings.
• Fail means the ratio is below that threshold, so some readers will struggle to read that combination, especially with low vision or on a glare-heavy screen.
• AA vs AAA: stricter AAA targets exist for normal text. A pairing that passes AA may still fail AAA. If your audience includes many older users or you want maximum legibility, aim higher than the minimum.

Reading the results in practice

1. Group by role, not by color. Separate pairings used for body copy, buttons, links and large display type. A brand color that fails for 14px text may still work fine for a 32px headline.
2. Prioritise the combinations users read most. Body text on your main background matters more than a decorative accent on a hover state.
3. Fix the foreground first. Darkening text or link colors usually preserves brand feel better than changing large background areas.
4. Recheck after every tweak. Contrast is a ratio between two colors, so changing either one changes the result.

Quick comparison

A concrete scenario

Suppose your brand uses a mid-tone teal on white. As a 16px paragraph it may fail, but as a 28px section heading it may pass. The practical move is to keep teal for headings, then define a darker teal specifically for body text and links, so the palette stays recognisable while the reading experience improves.

A useful next step: export the failing pairs as a short list, assign each one a role (body, link, button, heading), and set a target level per role — AA for large type, AAA for anything users read at length.

What should I do if my brand colors fail the accessibility test?

If a brand color combination fails the accessibility test, treat it as a design constraint rather than a verdict on your brand. You usually do not have to abandon your palette; you need to decide where each color is allowed to appear and pair it with something that meets contrast requirements.

First, separate brand identity from interface use. Your logo, packaging and large display graphics are not bound by the same contrast rules as body text and buttons. A color that fails for small text may still be perfectly usable at large sizes or as a decorative accent.

Then fix the functional cases. For text, icons and interactive controls, you have three practical options:

• Darken or lighten the existing hue until it clears the required contrast ratio against its background. This keeps the brand recognizable with the least disruption.
• Add a compliant companion shade — a darker variant of the same hue for text and a lighter tint for backgrounds — and document which is which.
• Change the pairing, not the color. The same brand blue may fail on white but pass on a dark charcoal, or vice versa.

Keep a written rule set. Something like "Brand Blue #1 is for fills and large headings only; Brand Blue #3 is the text-safe variant" prevents the same failure from reappearing in the next redesign.

To test candidate combinations quickly, Accessible Brand Colors by Use All Five evaluates a brand palette against ADA contrast expectations, which is useful for checking a whole set of pairings at once rather than one color at a time. For checking specific text and background pairs against WCAG thresholds, WebAIM maintains a widely used contrast checker.

A useful decision criterion: if a color is essential to recognition, keep it and add a compliant variant; if it is merely decorative, drop it from text-bearing roles entirely. Either way, the goal is a palette with documented, tested pairings rather than a single "accessible" color.