Color accessibility for brands

An accessible color palette is a set of brand colors with clear rules for which text, button, link, status and focus colors may sit on which background, each pairing measured against WCAG 2.2. I audit your existing brand palette, measure every pairing, and extend it with tonal scales that keep your hues. You get a list of approved pairings, UI states, a dark mode, design tokens and a usage guide. Your logo colors stay; the decision on every change is yours.

This page is for you if one of these describes your situation:

• An accessibility check flags low contrast on your website or online shop, and the failing colors come straight from your brand book.
• You are a brand or design agency, and a client’s tender or EU customer asks for WCAG 2.2 AA. You need a palette that passes without losing the brand.
• Your design system needs tokens for light and dark mode, and nobody has measured which combinations are actually allowed.
• Your error and success messages are red and green text only, and you are not sure everyone can tell them apart.

• Body text: enter your text color and background in the WebAIM Contrast Checker. Below 4.5:1, normal-size text fails WCAG AA.
• Buttons: check the label color on your main button color. White on a bright orange, teal or yellow often lands near 2:1.
• Focus: press Tab on your website. If you cannot see where you are, or the ring is a pale tint, keyboard users cannot either.
• Status: switch your phone to grayscale and open a form with an error. If the error looks like any other text, it relies on color alone.

Read on for the technical detail. Below: which WCAG criteria concern a palette, a measured before-and-after example on a fictional coffee brand with every file downloadable, and the rules in the EU and the US. To skip ahead, send your brand book or color list and I will tell you which pairings fail.

A palette is accessible when every combination your brand actually uses meets its WCAG threshold, and when no information depends on color alone. Single colors are never “accessible” on their own; only pairings are.

WCAG 2.2 measures contrast as a ratio between the relative luminance of two colors, from 1:1 to 21:1. Success criterion 1.4.3 (Level AA) asks for 4.5:1 for normal text and 3:1 for large text (about 24 px, or about 18.7 px bold). 1.4.6 (Level AAA) raises this to 7:1 and 4.5:1. AA is the level laws and tenders usually cite; I mark which pairings also reach AAA.

Non-text contrast, 1.4.11 (AA), asks for 3:1 for the visual parts needed to recognize a control or its state: an input border, a checkbox, the edge of a button that has no text label, a focus ring, the meaningful parts of an icon. A pale grey border on white is the typical failure.

Use of Color, 1.4.1 (Level A), says color must not be the only way to convey information. A red message and a green message that differ only in hue fail, however good their contrast. An icon and a word such as “Error:” fix that; the palette then only has to support them.

Focus Appearance, 2.4.13 (AAA, new in WCAG 2.2), asks for a focus indicator of sufficient size with 3:1 contrast between focused and unfocused states. A palette can supply the colors and the ring definition; only the implemented page can prove the size. 2.4.11, Focus Not Obscured, is often confused with this: it is about sticky headers and overlays covering the focused element, a layout matter that no palette can solve.

This is a measured worked example on a fictional brand, not client work. I invented “Örnek Kahve Co.” and its brand-book palette with typical brand-book choices, measured it, rebuilt it, and checked the result with independent tools. Every figure, report and file below is labelled “Fictional example brand”.

• Before palette: white #FFFFFF, cream #FFF8F0, primary orange #F28C28, secondary teal #2EC4B6, accent yellow #FFD166, grey text #A0A0A0, espresso #4A3428, status red #E74C3C and green #2ECC71 (no icons), pale focus ring #CDEFEB.
• Color maths: WCAG 2.x ratio from sRGB relative luminance; tonal scales in OKLCH (coloraide 8.13), hue kept, lightness solved for a fixed contrast target against white.
• Color vision simulation: the matrices of Machado, Oliveira and Fernandes (2009), severity 1.0, applied in linear sRGB.
• APCA: cross-checked against npm apca-w3 0.1.9 and reported as information only. APCA is not a WCAG 2.2 requirement.
• Typeface in figures and guide: Inter (SIL Open Font License 1.1).

The brand book prescribed 14 uses (body text, button labels, links, messages, focus ring, borders). One of the 14 met its threshold: espresso on yellow, 8.03:1.

The remaining four (body text on cream, accent headings, button edge, input border) failed too; all 14 are in the measurements file. In typical vision, the red and green status colors differ strongly (CIEDE2000 72.35). Under simulated deuteranopia that difference drops to 11.64.

For each hue I built an 11-step scale in OKLCH and picked the steps that pass for each role. The brand orange, teal, yellow and cream stay unchanged for the logo, illustration and large fills. Text on brand orange or yellow uses a dark neutral (6.48:1 and 11.03:1).

The honest part: a CIEDE2000 difference of about 2 is just noticeable. Shifts of 18 to 29 are clearly visible. The hue stays, the lightness does not: the button orange becomes a deeper amber-brown. Whether that is still your brand is a brand decision, and it is yours. In a client job, you see these numbers and swatches before anything is final.

• Hover and pressed: orange-700 (6.22:1 with white) and orange-800 (8.84:1).
• Focus: a 3 px outer ring in teal-800 plus a 2 px white inner ring. Outer ring against the page 8.83:1, against cream 8.38:1; the white inner ring against the orange button 4.86:1.
• Disabled: label at 2.17:1 (light) and 1.80:1 (dark), reported for information. Inactive components are exempt from 1.4.3.
• Status messages: now carry an icon and the words “Hata:” or “Tamam:” (the example brand’s interface is Turkish), so color is no longer the only cue.
• Dark mode: its own set of approved pairings, all re-measured; in dark mode the action color resolves to #ed8c33.

For the status colors, the search kept only error and success candidates that reach 4.5:1 on white and cream, then chose the pair with the largest minimum difference across the three simulations.

The gain comes from moving success to a bluish green. The lightness ratio between the two is about the same as before (1.81:1 against 1.82:1), so color remains a secondary cue. The icon and the word carry the meaning.

And a number is not a brand decision. ΔE2000 tells you how far a color moved; whether it still feels like your brand is for you to judge.

You receive a measured palette, the rules for using it, and the same palette as files your designers and developers can load.

• A contrast matrix of your current palette (before) and of the extended one (after), as HTML and CSV.
• Tonal scales built from your hues, with the measured ratio of every step.
• A list of approved pairings for light and, if you need it, dark mode, with UI states and focus ring.
• Design tokens: CSS custom properties, W3C DTCG JSON, Tailwind config, Adobe ASE swatches, Figma variables JSON.
• A usage guide as HTML and PDF, and a findings report that lists every color shift (ΔE2000) and what the checks cannot see.

You send your brand colors first; the price is fixed before any work starts.

1. Send your brand book or color list. A PDF of the brand guidelines, your CSS, or a screenshot of the key screens is enough. I tell you which pairings fail and by how much.
2. You receive a scope and a fixed price, including the modes and token formats you need.
3. I do the work. You receive a preview of the palette and guide, marked as such, with the contrast report and every proposed color shift for your approval.
4. Your approval releases the final files: tokens, guide, matrices and findings report.

I price each job after seeing the material. Effort depends on the number of colors and roles, whether you need a dark mode, and which token formats your tools use; an existing design system with named tokens is quicker than a brand book with loose hex codes. You get a fixed price before work starts, with no hourly meter.

Low-contrast text is the failure found most often in WebAIM’s yearly scan of one million home pages, and since 28 June 2025 the European Accessibility Act makes WCAG-level accessibility a legal matter for many consumer-facing websites and online shops in the EU. What that means for your company is a legal question; this page covers the technical side.

Legal note: this page covers the technical side. Whether a law applies to your company is for your legal adviser to confirm.

• EU private sector: the European Accessibility Act, Directive (EU) 2019/882, applies from 28 June 2025 to the products and services it lists, including e-commerce. Microenterprises providing services are exempt.
• The standard: EN 301 549 V3.2.1, cited by Implementing Decision (EU) 2021/1339, applies the WCAG 2.1 success criteria, including 1.4.1, 1.4.3 and 1.4.11. I work to WCAG 2.2, which contains all of them.
• EU public sector: the Web Accessibility Directive (EU) 2016/2102 covers public bodies’ websites and apps, against the same standard.
• United States: the ADA Title II rule covers state and local government web content at WCAG 2.1 AA. After the April 2026 extension, the deadlines are 26 April 2027 (50,000 people or more) and 26 April 2028 (smaller entities).

A palette fixed at the token level fixes every page that uses it. That is usually cheaper than correcting contrast one page at a time.

Your logo and brand colors stay for logo, illustration and large fills. Text, link, button and status roles get darker steps of the same hue, and those shifts are clearly visible (CIEDE2000 18 to 29 in the example). You see every shift before approving, and the brand decision is yours.

Because it does not need to. In the example, 17 of 45 pairs pass AA text after the rework; the rest are combinations nobody should use for text. The approved-pairings list, 27 of 27 passing in light and dark mode, is what your team works from.

I calculate APCA values and include them for information, because they say more about thin and small type. WCAG 2.2 uses the contrast ratio, and that is what laws and tenders cite today. The palette is built to pass WCAG 2.x.

The files follow the published formats, and in the example their structure was checked with independent tools: Style Dictionary builds the CSS, an independent parser reads the ASE, and the Figma file is a variables REST API payload. They were not imported into Figma or an Adobe app, and Figma’s variables API needs an Enterprise plan. I tell you what to expect for your tool before you approve.

No. It is a published model of full dichromacy, not a test with people. That is why status messages get an icon and a word: then the meaning no longer depends on telling two colors apart.

It removes one common class of failures, if the tokens are applied as specified. Focus order, a focus ring hidden by a sticky header, forms, alt text and keyboard use are separate topics. An accessibility audit of the implemented site is separate work.

• Multilingual PDF accessibility (PDF/UA)
• Accessible charts and infographics
• Accessible Word and PowerPoint
• Accessible HTML email
• Accessible Excel
• Alt text writing
• VPAT and accessibility conformance report
• Accessible EPUB

A brand book, a list of hex codes, or a screenshot of your main page. You get back a straight account of which pairings fail, by how much, and how far each color would have to move.

Ali Karabüyük · Tekirdağ, Türkiye · working remotely with clients worldwide · document and image production since 2004, professional practice since 2008.