Building your website’s color palette

The palette is the few colors of your site and the role of each. Well set, it makes your business recognizable at first glance and makes everything readable. Badly set, it washes out the text: in 2026, 83.9% of the homepages of the million most visited sites contained text with too little contrast, the most common accessibility flaw in the study (WebAIM, 2026).

Here is how to build it, and the few measurements that make it readable for everyone.

Few colors, each with a role

A website palette comes down to four roles:

• the background: off-white, cream, or on the contrary very dark;
• the text: almost black on a light background, almost white on a dark one;
• the accent: a single bright color, for what can be clicked;
• the neutrals: one or two grays, warm or cool, for rules, section backgrounds and discreet notes.

Start from what already exists: the sign, the storefront, the logo, the materials of the place. A bakery can draw its palette from the crust and the flour; a physiotherapy practice, from the light wood and the green of its façade; a photographer, from a deep black that leaves all the room to the images.

Write down each color with its code and its role, and stick to it. A site where each section invents a shade ends up saying nothing.

Text contrast: 4.5:1

Contrast is measured as a ratio between the luminance of the two colors, from 1:1 (two identical colors) to 21:1 (black on white). WCAG criterion 1.4.3 (level AA) requires:

• at least 4.5:1 for body text;
• at least 3:1 for large text, from about 24 pixels, or 18.5 pixels in bold.

The threshold is strict: a ratio of 4.47:1 fails (W3C). The figure of 4.5 compensates for the loss of contrast sensitivity of a visual acuity of about 20/40, common around age 80. So it notably protects your older customers.

Logos, purely decorative text and disabled buttons are exempt from the rule. A brand guideline, however, doesn’t exempt you.

The classic trap is light gray on white, so elegant on a mockup. An example, calculated with the WCAG formula:

To check, no need to calculate: in Chrome, the color picker in the developer tools shows the ratio and says whether it reaches level AA, and Lighthouse lists the page’s texts that are too pale (Chrome for Developers).

What isn’t text: 3:1

WCAG criterion 1.4.11 (level AA) extends the rule to what lets people use the page. It requires at least 3:1 against adjacent colors for:

• the border of a form field: a light gray #AAAAAA border on white, at 2.3:1, fails;
• an icon that works on its own as a button, such as the phone or a menu’s arrow;
• the focus indicator, the outline showing where you are when navigating with the keyboard;
• the meaningful parts of a chart, such as the lines or the slices of a pie.

A button that carries readable text doesn’t need a contrasting border: the text is enough to spot it. Hover isn’t subject to the ratio.

Never color alone

About one man in twelve has trouble seeing certain colors (National Eye Institute, 2025). So WCAG criterion 1.4.1 (level A, the first) requires that no information rely on color alone. The RGAA, the French standard, makes it its criterion 3.1. A few common cases:

• Links within a paragraph. Keep them underlined. Without underlining, the W3C’s technique G183 requires at least 3:1 between the link and the surrounding text.
• Required fields. A red label isn’t enough: add the word “required”, or an asterisk explained at the top of the form.
• Open or closed. A green or red dot next to the opening hours must be backed by the word.
• The recommended plan in a pricing table: flag it with a written note, in addition to its color.

A simple test: switch the page to grayscale, with a filter on your computer or an edited screenshot. Anything that becomes ambiguous relies on color.

One accent color, reserved

The accent signals what acts: the call-to-action button, links, focus. If it also colors the headings, the icons and the section backgrounds, nothing stands out anymore, and visitors no longer know where to click. Reserve it, and it will guide the eye to your call-to-action button.

Check it in both its uses:

1. As a button background, with the button’s text on top: at least 4.5:1 between the two. The orange #FF8C00, unreadable as text on white, gives 9:1 with black text laid on it.
2. As text, for links: 4.5:1 against the page background. Bright, light hues, yellow, orange, apple green, often fail there; darken them for links and keep the bright version for buttons.

Finally, think of the states: the hovered, pressed and focused button must stay readable in each.

Text on a photo or a video

A headline laid on an image is subject to the same 4.5:1 rule, or 3:1 when large. The difficulty comes from the image, made of a thousand shades. The W3C measures contrast against what lies directly behind the letters: for a white headline, the lightest area of the image serves as a quick test (failure F83).

Four ways to get there, inspired by the W3C’s technique G18:

• choose an image with a calm area where the text goes: a sky, a wall, a shadow;
• lay a scrim that darkens or lightens the image behind the text;
• surround the letters with a halo or a thin contrasting outline;
• put the text on a band of solid color.

With a video background, every frame of the film counts. Test on the lightest passage for a white headline, the darkest for a black one, and on the poster, the still image shown before the film. A texture such as film grain dresses the image; the contrast comes from the scrim or the band.

In short: four roles, one accent color reserved for what can be clicked, 4.5:1 for text and 3:1 for controls. Back up any information carried by color, and test text laid on an image on its most difficult part.