How Much Should You Change the Colors When Redesigning a Website? How to Think About Changing the Color Scheme
When redesigning a website, should you replace every color or keep the existing palette? The answer depends less on making the design look new and more on the problems the redesign is meant to solve. You may be able to retain colors associated with the business while improving faint text or confusing backgrounds. Here is how to decide the appropriate scope of changes.
Choose the extent of color changes based on the goal
First, identify whether the project is about simplifying the appearance, improving readability and interaction, or changing the direction of the brand or service. Replacing every color without a clear reason can make familiar links and buttons harder for returning visitors to recognize.
- Keep the palette: Preserve colors that help people identify the brand or already work well in their roles. If the main changes involve photography or layout, the colors may not need to change at all.
- Make targeted changes: Adjust specific problem areas such as faint text, undifferentiated backgrounds, or cards that are difficult to scan. Prioritize broad surfaces and text before revising less important details.
- Redesign the palette: If the business, audience, or brand direction has changed, reassess the overall roles of the colors. Even then, a new brand color does not automatically belong on every interface element.
A percentage or a fixed number of replacement colors is not a useful rule. For each color, be able to explain why it should remain or which specific problem changing it would solve.
Example: improve a product support site without changing its blue
Imagine a fictional product support website where the contact action is easy to find, but supporting text is faint and the FAQ (frequently asked questions) list is hard to scan. HEX (hexadecimal) is a base-16 notation for specifying the red, green, and blue components of a color. The proposed revision retains the company’s blue while adjusting the other colors by role.
| Where it is used | Before | After | Decision |
|---|---|---|---|
| Brand blue and links | #255E85 | #255E85 | Keep: preserve the brand association |
| Overall page background | #FFFFFF | #F5F8FB | Adjust: provide a calmer base for information |
| Body and secondary text | #8190A0 | #263746 | Change: increase contrast with the background |
| FAQ card backgrounds | #EDF2F6 | #FFFFFF | Adjust: separate cards from the page surface |
| Contact button background | #255E85 | #255E85 | Keep: maintain a recognizable primary action |
| Button text | #FFFFFF | #FFFFFF | Keep: verify the combination with the blue background |
Before the changes, the text #8190A0 against a white background #FFFFFF has a contrast ratio of approximately 3.27:1. With the revised text #263746, the ratio is approximately 11.47:1 against the new page background #F5F8FB and 12.23:1 against a white card #FFFFFF. White text #FFFFFF on the retained blue button background #255E85 has a ratio of approximately 6.96:1; the blue link color against the new page background has a ratio of approximately 6.53:1. These values are calculated for the specific pairs of opaque colors shown.
WCAG (Web Content Accessibility Guidelines) generally requires a contrast ratio of at least 4.5:1 for normal-sized text. In this example, the faint text needs attention, but the established blue can stay. Links should also have a cue such as an underline rather than relying on color alone. Use spacing and headings, not just the slight background difference, to distinguish white FAQ cards from the pale page.
Test what changes and what stays across the website
Compare representative homepage, listing, detail, and form designs. Mark logo colors, links, body text, buttons, and error indicators as “keep,” “change,” or “check further.” Try the proposed changes on one representative page before applying them across the site.
Review more than text on a default background. Check hover (when a pointer is over a control), focus (when an element is the current target for keyboard interaction), selected states, and error messages. Visual information necessary to identify controls or meaningful icons generally needs a contrast ratio of at least 3:1 against adjacent colors, subject to applicable exceptions. Use text and shape as well as color to communicate status.
After the revised colors are approved, document the palette, apply it to mobile layouts and other pages, and check essential interactions again after launch. How much color should change depends on the website’s purpose and the problems visitors face. Prioritize improvements that can be demonstrated over changing everything simply to create a new look.