Your logo colour was chosen for the sign above the door, the letterhead and the company van, not for body text on a white background. Even so, many websites use it unchanged for headings, links and buttons, and that is exactly where it causes trouble. On 83.9 percent of the home pages of the top one million websites, WebAIM found low-contrast text in February 2026, up from 79.1 percent a year earlier (WebAIM Million 2026). That made low contrast the most commonly detected accessibility issue in the study. This article shows how a single brand colour becomes a web palette with clear roles: one colour for text and links, one for surfaces, one for buttons, an accent for lines and highlights, and one for focus. It also covers the WCAG thresholds, a fully calculated example, the places where colour must not be the only signal, and a checklist for your own website.
Why the logo colour alone is not enough
Every year, WebAIM runs an automated check of the home pages of the top one million websites with the WAVE evaluation tool.
In February 2026 the study found 34 distinct instances of low-contrast text per home page on average, 15 percent more than in 2025 (WebAIM Million 2026). On 95.9 percent of home pages the tool detected at least one WCAG 2 failure (WebAIM Million 2026). Because automated tools cannot detect every failure, this is a lower bound rather than the full picture. The HTTP Archive Web Almanac reaches a similar result with a different method: only 31 percent of mobile sites meet the minimum colour contrast requirements (HTTP Archive Web Almanac 2025). How font size and contrast work together on a phone is covered in Mobile usability: a website that is easy to read and use.
There is a simple reason why contrast fails so often. Brand colours are chosen for recognition: a fresh green, a warm orange, a bright blue that stands out on a van from twenty metres away. These mid-light, saturated tones glow as a surface, but as text on white they are often too light. A small business then uses the logo colour for everything: headings, links, the “Request a date” button, the background of a band and the line under the active menu item. Each of these places has a different job and therefore needs a different lightness. You see it most clearly on the home page, where brand colour, main message and button share very little space; what belongs on that first screen of the home page is the subject of a separate article.
The logo is exempt, the text is not
What 4.5:1 means
The contrast ratio compares the relative luminance of two colours. It ranges from 1:1 for two identical colours to 21:1 for black on white (W3C, WCAG 2.2).
For level AA, WCAG 2.2 requires normal text to reach at least 4.5:1 (W3C, WCAG 2.2); large text needs 3:1 (W3C, WCAG 2.2). Text counts as large from 18 point, or 14 point in bold, which is roughly 24 pixels or 18.5 pixels in CSS (W3C, Understanding WCAG 2.2). For the highest level, AAA, the guidelines require 7:1 for normal text (W3C, WCAG 2.2). Controls and graphics needed to understand the content require at least 3:1 against adjacent colours (W3C, WCAG 2.2). How the choice of typeface affects readability, and which fonts pair well, is explained in Choosing website fonts.
The number is not arbitrary. According to the W3C rationale, 4.5:1 compensates for the loss of contrast sensitivity experienced by people with a visual acuity of about 20/40 (W3C, Understanding WCAG 2.2). The W3C describes this acuity as typical for older people at roughly age 80 (W3C, Understanding WCAG 2.2). Level AAA with 7:1 is designed for a visual acuity of about 20/80 (W3C, Understanding WCAG 2.2). Anyone who thinks of this as a small group underestimates the situation. At the end of 2025, a good 7.8 million people in Germany were living with a severe disability (Federal Statistical Office of Germany), and a good third of them, 34 percent, were aged 75 or older (Federal Statistical Office of Germany). For 4 percent of severely disabled people, blindness or a visual impairment was the most severe disability (Federal Statistical Office of Germany). On top of that come all those who are not registered as severely disabled and still see less well: older customers, people with colour vision deficiency, which according to the US National Eye Institute affects about 1 in 12 men (National Eye Institute), and anyone holding a phone in the midday sun.
Scroll table sideways
| Element | Minimum contrast under WCAG 2.2 | Success criterion |
|---|---|---|
| Body text, links, prices, form labels | 4.5:1 at level AA, 7:1 at level AAA | 1.4.3 and 1.4.6 |
| Large text from about 24 pixels or 18.5 pixels bold | 3:1 at level AA, 4.5:1 at level AAA | 1.4.3 and 1.4.6 |
| Input borders, icons, states such as focus or selection | 3:1 against adjacent colours | 1.4.11 |
| Focus indicator | visible at level AA; at level AAA at least as large as a 2 pixel thick outline and 3:1 between focused and unfocused | 2.4.7 and 2.4.13 |
| Logo and brand name | no requirement | exception in 1.4.3 |
| Disabled controls and pure decoration | no requirement | exceptions in 1.4.3 and 1.4.11 |
From one brand colour to a palette with roles
The way out is not to abandon the brand colour but to think of it in shades.
Hue and saturation stay, and the lightness is adjusted to each use: darker for text, very light for surfaces, unchanged where the colour works as a surface, line or large number. The result is a family of colours that clearly belongs to the brand and stays readable everywhere. It helps to name the palette by role rather than by colour name. Once you have decided which colour carries text, which fills buttons and which shows focus, you no longer choose by gut feeling for the next block, and new pages fit the existing ones.
- Text and links: the dark shade of the brand colour that reaches at least 4.5:1 on white. Links in body text also get an underline.
- Surface: a very light shade for bands, cards and notice boxes. Dark text sits on top, and that combination is measured too.
- Button: a dark, saturated shade as the button surface with white text, or a light shade with dark text. What you measure is the label against the button surface.
- Accent: the logo colour itself or a second colour for lines, icons, surfaces and large numbers, in other words wherever it does not have to be read as small text.
- Focus: a colour for the outline around the element that currently has focus, standing out from both the page background and the element itself.
- States: shades for hover, pressed, selected and error, each with its own measurement.
A fully calculated example shows how large the differences are. Suppose a business uses the logo green #17A98D. All ratios in the table are calculated with the WCAG formula and can be reproduced with any contrast checker. Two things stand out. First, the logo green as text on white reaches only 2.96:1, not even enough for large headings; against black, the same colour reaches 7.10:1. A colour is therefore not good or bad, it suits certain backgrounds. Second, a button in logo green with a white label fails, while a dark label in #00312B passes. If you want to keep the logo colour for buttons, change the text colour, not the brand. If you want a white label, use a darker shade of the same colour for the button surface.
Scroll table sideways
| Role | Combination | Ratio | Assessment |
|---|---|---|---|
| Logo colour as text | #17A98D on white | 2.96:1 | fails for body text and for large text |
| Logo colour as surface | Text #00312B on #17A98D | 4.81:1 | passes AA for body text |
| Text and links | #006B5A on white | 6.46:1 | passes AA |
| Button | White on #004D43 | 9.80:1 | passes AA and AAA |
| Light surface | #004D43 on #E6F6F2 | 8.79:1 | passes AA and AAA |
| Gold accent as text | #ACA316 on white | 2.62:1 | too weak for text and controls, decorative surface only |
| Focus ring | #004D43 against white | 9.80:1 | well above 3:1 |
Buttons, links and states
For testing purposes, a button consists of two combinations: the label on the button surface and the button surface on the page background. The label is text and needs 4.5:1.
Whether the surface itself needs 3:1 against the background depends on whether the button is still recognisable as a button without its outline. A light grey box with a light grey border on a white page is easily overlooked in practice; if you reach both values, there is nothing to debate. Links in body text come with a second rule: colour must not be the only visual means of distinguishing an element (W3C, WCAG 2.2). A link that differs from the surrounding text only in hue therefore needs a second cue; according to the W3C, a difference in lightness with a contrast ratio of at least 3:1 to the surrounding text also counts (W3C, Understanding WCAG 2.2). The cue that is easiest to recognise is still an underline. For every button, these states belong on the checklist:
- Default: label against button surface at least 4.5:1
- Hover: the surface may get lighter or darker, but the label stays above 4.5:1
- Focus: a visible outline with a little space around the button that stands out from the background
- Pressed and selected: a cue in addition to colour, such as a tick, an underline or bold text
- Disabled: exempt from the contrast requirement, but with a hint explaining why the button does not respond
- Error: a red border plus a text that names the error
Focus is lost particularly often. 67 percent of sites explicitly remove the browser’s default focus outline in CSS (HTTP Archive Web Almanac 2025). If the site does not replace it with a focus style of its own, people who navigate by keyboard lose the indicator of where they are on the page. At level AA, WCAG requires focus to be visible (W3C, WCAG 2.2); whatever makes a state such as focus recognisable needs at least 3:1 against adjacent colours (W3C, Understanding WCAG 2.2). In the example, a gold focus ring in #ACA316 fails with 2.62:1 on white, while an outline in the dark brand shade #004D43 reaches 9.80:1. Level AAA provides a good benchmark: a focus indicator at least as large as a 2 pixel thick outline around the element, with 3:1 between the focused and unfocused state (W3C, WCAG 2.2). How to keep state changes with motion calm is covered in the article on website animations. In CSS, the palette by role can be captured like this:
/* Palette by role, not by colour name */
:root {
--color-brand: #17a98d; /* logo colour: surface, line, large number only */
--color-text: #006b5a; /* 6.46:1 on white */
--color-button: #004d43; /* white text on top: 9.80:1 */
--color-surface: #e6f6f2; /* #004d43 on top: 8.79:1 */
--color-accent: #aca316; /* not as text on white (2.62:1) */
--color-focus: #004d43; /* 9.80:1 against white */
}
a { color: var(--color-text); text-decoration: underline; text-underline-offset: 0.15em; }
.button { background: var(--color-button); color: #fff; }
.button:hover { background: var(--color-text); } /* white text: 6.46:1 */
:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }Where colour must not be the only signal
The rule from the section on links applies far beyond links.
Under success criterion 1.4.1, colour must not be the only visual means of conveying information, indicating an action, prompting a response or distinguishing an element (W3C, WCAG 2.2). The main reason is colour vision deficiency: the most common type makes it hard to tell red from green (National Eye Institute). A required field marked in red next to a green one, a green dot for “available” and a red one for “fully booked” look the same to some of your customers. On top of that, colour differences blur in greyscale printouts, on dim displays and in bright sunlight. The fix is usually the same: keep the colour and add a second cue, such as text, an icon, a pattern or a shape. How to word error messages and link texts so they make sense without colour is explained in Accessible writing: clear website copy.
Error messages
A red border alone does not say what is wrong. The sentence “Please enter a phone number” below the field does, even without colour.
Required fields
An asterisk with an explanation at the start of the form, or the word “required” in the label, rather than a red label alone.
Links in body text
Keep the underline. A link that is only coloured disappears into the surrounding text for people with colour vision deficiency.
Status and availability
“Available”, “Few places left” or “Fully booked” as a word next to the coloured dot, so availability can be read in greyscale too.
Charts
Lines labelled directly at their end, bars with values, patterns or shapes instead of a pure colour difference between series.
Active menu item
An underline, bold text or a marker at the side shows where you are, not just a different colour.
Text on images, gradients and in dark mode
On a plain background, measuring is easy. It gets harder as soon as text sits on a photo, a gradient or a pattern. There the background changes from letter to letter, and a measurement at a single point says little.
The XICflow documentation recommends checking contrast at the lightest and at the darkest point of a gradient, not just in the middle (XICflow documentation). For photos, a semi-transparent dark overlay between image and text helps by muting the image; the text is then measured against the lightest point of the muted area. If you want to save yourself this work, place the text next to the image rather than on top of it. That has a second advantage: swapping the image cannot suddenly make the text unreadable.
A dark mode doubles the palette. The same colour behaves differently on a dark background: in the example, the text colour #006B5A reaches 6.46:1 on white but only 2.75:1 on a dark card surface in #16181C. The logo green #17A98D, too weak on white, reaches 6.01:1 on the same dark surface. In dark mode, the roles therefore change their shade: text and links become lighter, surfaces darker. About 13 percent of sites use the prefers-color-scheme query, which lets a page respond to the device’s light or dark setting (HTTP Archive Web Almanac 2025). The forced-colors query, which supports the system’s high-contrast settings, is used by 19 percent of mobile pages (HTTP Archive Web Almanac 2025). If you offer a dark mode, measure it like the light one: every role against every background it appears on.
Light grey helper text
How to check your colour combinations
- Note every colour on the website with its hex value: text, links, buttons, surfaces, borders and icons
- Measure every text colour against every background it actually appears on, including tinted bands and cards
- For every combination below 4.5:1, decide: make it darker, use it for large text only, or use it as a surface only
- Tab through the page with the keyboard and check that focus is visible at every point
- View the page in greyscale: whatever can no longer be told apart depends on colour alone
- Check dark mode and text on images or gradients separately
- Record the result as a colour table with roles so that new pages use the same combinations
Legally, contrast is more than a recommendation for many businesses. The German Accessibility Strengthening Act (BFSG) applies, among other things, to e-commerce services provided to consumers after 28 June 2025 (Section 1(3) no. 5 BFSG). Microenterprises that offer or provide services are exempt from the accessibility requirements (Section 3(3) BFSG). Whether that applies to you is covered in the article on the BFSG microenterprise exemption; what the law means for websites overall is set out in the BFSG overview for businesses. Whatever the legal position, a text that some of your customers cannot read works like a text that is missing. A contrast check does not have to be a project; for a small business website, the list above is often enough.
Setting brand colours in XICflow
In XICflow, three roles carry the colours of a website: “Primary colour” for buttons, links and highlights, “Accent colour” for the second colour and gradients, and “Surfaces / text” for backgrounds, borders and body text.
Each base colour produces eleven shades from 50 (very light) to 950 (very dark); hue and saturation come from your colour, and the lightness follows a fixed ramp (XICflow documentation). That is why buttons, borders, backgrounds and hover states stay consistent with each other, even if you change just one colour. A light logo colour does not turn into a text colour by itself, though: if the colour picker shows too little contrast for body text, the documentation recommends using the colour as a surface rather than for text, or choosing a darker base. For dark mode, you can set a separate base colour for each role. The settings are described in the documentation under Brand and design, and the feature set on the features page in the Flow Design section.
For every colour, the colour picker shows the contrast ratios “Aa on white” and “Aa on black” with a rating: AAA from 7.0, AA from 4.5, large text only from 3.0, and “too low” below that (XICflow documentation). Under “Harmonies”, it suggests one complementary colour, two analogous colours, two triad and three tetrad colours derived from the current colour (XICflow documentation); in browsers with an eyedropper function, it picks up a colour directly from the screen, for example from the logo. If you let “Apply colours” derive the palette from an existing website, check the contrast in the colour picker afterwards, because a colour read from a screenshot does not automatically meet the requirements for body text. When you publish, XICflow also checks the colour combinations of the website. If some of them fall short of the readability requirements, the website is still published, and a contrast note points you to “Brand & design”, where you can adjust them. The note does not replace a look at the colour picker, it reminds you of it; text on photos and gradients stays on your own checklist.
The brand stays, the shade changes