Most website color schemes are chosen the wrong way round. Someone opens a palette generator, finds a combination they like, and then tries to make the logo fit. The result is a site that looks fine on its own and slightly off next to everything else the business already uses.
If you have a logo, most of the color decision has been made. The work is not choosing colors. It is expanding the ones you have into a system that works on screen, reads clearly, and passes accessibility checks before design begins.
This guide walks through how we build a website color scheme for a client, starting from their existing logo: extract the colors, build shades, test every text and background combination, assign each color a job, and only then open the design tool. It is written for business owners and marketing leads planning a new site or a redesign, not for designers.
Why the logo comes first
Your logo is the one visual element that already appears everywhere: email signatures, invoices, proposals, social profiles, signage. When the website uses the same colors, visitors experience one business. When it doesn't, they experience a website and, separately, a company.
That consistency matters for trust. According to a Venngage guide to accessible colors (updated August 2026), 93% of consumers cite color as the primary factor influencing purchasing decisions. Whether or not that figure holds in your sector, the direction is clear: color is one of the first things a visitor registers, and a mismatch is noticed before it is understood.
There is a practical reason too. A logo has usually been through more scrutiny than any other brand asset. Starting from it means starting from decisions that have already been approved.
Step 1: extract the colors you already have
Open the logo file, ideally the vector version, and record every color it uses as a hex code (the six-character code such as #5B4B8A that defines a color precisely). Most logos have between one and three. Note which is dominant and which are supporting.
If the logo is a single color, that is fine. You will build the rest of the scheme from it. If the logo has four or more colors, you will need to choose one or two to lead. A website that gives equal weight to five colors has no hierarchy.
At this stage, also note what the logo colors are not. If the logo is a bright orange, that orange is unlikely to work as body text or as a button background with white text. Knowing this early prevents a common argument later.
Step 2: build shades before you build pages
A single brand color is not enough to build a website. You need lighter and darker versions for backgrounds, hover states, borders, and text, and you need a set of neutrals for everything that is not brand-colored.
A framework we find useful comes from Kyle Van Deusen at The Admin Bar, in his practical color framework (May 2024). He organizes a website palette into three families based on the classic 60-30-10 design principle:
- Base (around 60% of the page): neutrals for backgrounds, body text, borders, and shadows. He defines a scale from base-0 (white) to base-900 (near black) in steps of 100, which gives 11 values to work with.
- Brand (around 30%): the main logo color and one alternate, used for icons, links, section backgrounds, and navigation highlights.
- Action (around 10%): one accent color reserved for the primary call to action, so it stands out because nothing else uses it.
The numbers are a guide, not a rule. The point is that most of a page should be neutral, so the brand color has somewhere to stand out.
For each brand color, create a range of tints (mixed with white) and shades (mixed with black or a darker hue), from near white to near black. Tools such as the Venngage accessible color palette generator will produce these from a single hex code and flag which ones support black or white text. Aim for five to nine steps per color. More than that and nobody uses them.
Neutrals deserve the same care. Pure black text on pure white is harsh on screens. A dark gray (base-800 or base-900) on an off-white (base-100) reads more comfortably and still passes every contrast test.
Step 3: test every text and background combination
This is the step most projects skip, and it is the one that saves the most time. It is also where most websites fail. In a non-techie's guide to accessible color combinations (June 2024), Simon Miner of Pedal Point Solutions notes that 81% of the homepages tested in the 2024 WebAIM Million report had at least one instance of low-contrast text, making it the most common accessibility issue on the web.
Low contrast is not a niche problem. Miner lists who it affects: people with low vision or color blindness, older adults whose eyesight has changed, people with cognitive disabilities who benefit from clear, distinct text, and anyone reading a phone in sunlight. That last group includes every one of your visitors at some point.
Before any page is designed, lay out every color in the palette against every other color and check which combinations are readable.
The Web Content Accessibility Guidelines (WCAG) define contrast as a ratio between text and background. The thresholds at the AA level, which is what the European Accessibility Act references for most businesses, are:
- 4.5:1 for standard text
- 3:1 for large text (roughly 24px regular or 19px bold and above)
- 3:1 for interface components such as button borders, form fields, and icons
AAA, the stricter level, asks for 7:1 for standard text. Few business websites need AAA throughout, but it is a reasonable target for body text.
The fastest way to see the whole picture is a contrast matrix. The Accessible Color Matrix by Atul Varma is a free tool that takes your list of hex codes and shows every pairing in a grid, marking which ones pass for text. In a few minutes you have a map of what works: which brand shades can carry white text, which backgrounds can carry dark text, and which combinations should not meet.
If you only need to find one readable text color for a given background, the Color Safe tool that Miner walks through does that well: enter the background hex code and the font size, and it returns a swatch of text colors that pass. As he points out, smaller font sizes yield fewer options, because large text is allowed a lower ratio.
Record the passing combinations. This list becomes the rule book for the design phase. If a combination is not on it, it does not appear on the site.
Two exceptions are worth knowing. Logos themselves are exempt from the contrast requirement, so a low-contrast logo does not fail the site. And purely decorative text, such as a faint watermark word behind a section, is also exempt. Everything a visitor is expected to read is not.
Step 4: give every color a job
A palette with tested combinations still needs rules. Decide, and write down, what each color is for:
- Page background: base-0 or base-100
- Body text: base-800
- Headings: base-900 or a dark brand shade that passes 4.5:1
- Links: a brand shade that passes 4.5:1 on the page background, underlined
- Primary button: the action color, with text that passes 4.5:1 on it
- Secondary button: brand color outline, brand color text
- Section backgrounds: a light brand tint, with body text checked against it
- Borders and dividers: base-200 or base-300
This is where the logo-first approach pays off. The brand color goes where it is seen but not read: icons, highlights, section backgrounds. A darker shade of it does the reading work. The logo stays the logo.
If a client's brand color is too light to carry text and too loud to use as a large background, the answer is usually a darker shade for text and links, and the original color kept for accents where it is not doing any reading. The brand is intact, and the site is usable.
Step 5: check for color vision deficiency
Contrast ratios cover people with low vision. They do not cover people who see color differently. The Venngage guide cited above puts the number of people worldwide with color blindness at over 360 million, with red-green deficiency affecting around 5% of men.
Two rules handle most of this:
Do not rely on color alone. A required form field marked only by a red border, a chart where the only difference between series is hue, a link that differs from body text only in color: each of these fails for someone. Add an underline, an icon, a label, or a pattern.
Avoid the known problem pairs. Red with green, green with brown, blue with purple, and green with gray are combinations that many people cannot separate. If two of your logo colors form one of these pairs, do not use them next to each other to carry meaning.
A color blindness simulator, which several free tools offer, lets you view your palette the way these visitors will. It takes two minutes and often changes one decision.
What to do when the logo colors don't pass
This happens often, and it is not a reason to redesign the logo. Bright brand colors, particularly yellows, oranges, light greens, and pastels, rarely reach 4.5:1 against white. The options, in order of preference:
- Use a darker shade of the brand color for anything that carries text. Most visitors will not notice the difference between the logo orange and a text orange two steps darker. They will notice unreadable buttons.
- Flip the combination. A bright color that fails as a background for white text may pass as a background for dark text. Test it.
- Reserve the original color for non-text uses. Icons, decorative shapes, and image overlays can use the exact logo color without any contrast requirement, as long as they carry no information.
- Only then, talk about adjusting the brand. If a logo's colors cannot support a readable website in any configuration, that is a conversation worth having, but it is the last step, not the first.
Common mistakes worth avoiding
Choosing colors in the design tool. Once a page is half built, every color change is expensive. Decide the palette and test the combinations first.
Light gray text. It looks refined in a mockup and fails contrast almost every time. Base-600 and lighter is for borders and placeholders, not for reading.
Colored text on colored backgrounds. A brand-colored heading on a brand-tinted section is a frequent failure. Check every one.
Too many accent colors. If three colors are competing to be the call to action, none of them is.
Testing only the homepage. Contrast problems hide in footers, forms, cookie banners, and error messages. Test the components, not only the pages.
The process in six steps
- Extract every color from the logo as hex codes and identify the dominant one.
- Build a scale of tints and shades for each brand color, plus a neutral scale from white to near black.
- Run every combination through a contrast matrix and record the pairs that pass.
- Assign each color a job: background, text, links, buttons, borders, section fills.
- Check the palette in a color blindness simulator and make sure no meaning depends on color alone.
- Write the rules down and hand them to whoever builds the site.
The whole exercise takes a few hours on a typical project. It prevents weeks of "can we make that button readable" later.
The decision in one sentence
Start from the logo, expand each color into a tested scale, decide what each shade is for, and let the accessibility checks make the hard calls before a single page exists.
If you are planning a redesign, our website redesign checklist covers what else to prepare before design begins, and our guide to font pairing applies the same thinking to typography. If you would like a second opinion on whether your current palette passes, our accessible websites service starts with exactly this kind of review.
Frequently asked questions
How many colors should a website color scheme have?
One or two brand colors, one accent for calls to action, and a neutral scale from white to near black. That is typically 3 core colors plus their tints and shades. More than that and the site loses hierarchy.
Do my logo colors have to pass accessibility checks?
No. Logos are exempt from WCAG contrast requirements. What must pass is any text a visitor reads and any interface element they use. In practice, that means a darker shade of your brand color often does the reading work while the logo keeps its original color.
What contrast ratio does my website need?
At WCAG level AA, 4.5:1 for standard text, 3:1 for large text, and 3:1 for interface components such as buttons and form borders. The European Accessibility Act references these thresholds for many businesses, and our EU web rules post explains who is covered.
Which tools check color accessibility for free?
The Accessible Color Matrix shows every combination in a palette at once. The Venngage accessible color palette generator builds a palette from one hex code and flags which shades support black or white text. Color Safe finds readable text colors for a single background. Most browsers also have a contrast checker built into their developer tools.
