How to Simplify a Website with Too Many Colors | What to Review in Its Color Scheme

As colors are added to a website over time, headings, notices, buttons, and category labels can end up with unrelated treatments. The solution is not necessarily to impose an arbitrary three-color limit. A better approach is to inventory what each color communicates, retain distinctions that serve a purpose, and consolidate colors that repeat the same job. This article walks through that process using a hypothetical website for searching island ferry routes and booking tickets.

Audit what each color means before deciding what to keep or remove

Imagine a website using cyan ■#1CADD0, orange ■#ED8A4A, and purple ■#A67CE1 for three ferry routes, plus yellow-green ■#B8CD4B for timetables, pink ■#D94C88 for discounts, and red ■#E65B5B for reservation buttons. That makes six prominent color families, but not necessarily six distinct communication needs.

Start by sorting colors according to their purpose. Route names, destinations, and sailing numbers can distinguish routes without requiring differently colored labels on every listing. Timetables and fares can be separated with headings and spacing. A discount should include the words “Early-bird offer” and its eligibility conditions. The booking action needs to be findable, but does not require every other element to have a competing accent. If the operator already uses official route colors consistently on port signage or maps, however, retain that established system where it matters and add names or symbols rather than changing it blindly.

Different hues—the color families such as cyan and orange—also do not guarantee readable lettering. For instance, white ■#FFFFFF text on the original cyan ■#1CADD0 and orange ■#ED8A4A backgrounds provides only about 2.65:1 and 2.52:1 contrast, respectively. A contrast ratio measures the difference in relative luminance between neighboring colors. Review text contrast at the same time as you reduce unnecessary colors.

Example: reorganize an island ferry booking website’s color scheme

Consider a page with three ferry routes, departure times, ticket prices, available seats, a search form, and a booking button. A HEX code is a hexadecimal number used to specify a web color. The redesigned page reserves navy and deep terracotta for the two prominent color roles, and relies on white and pale gray for reading surfaces.

• Header and site name: Use deep navy ■#23546B as the background with white ■#FFFFFF lettering. The text-to-background contrast ratio is about 8.23:1. Navy is also the consistent color for headings and navigation cues outside the main booking action.
• Page background and body text: Put explanatory copy in charcoal ■#27343D on pale gray ■#F6F8F9 for approximately 11.98:1 contrast. Fare tables and timetable descriptions that previously used vivid backgrounds move back onto this calm reading surface.
• Labels for the three routes: Use the same pale blue-gray ■#E8EFF2 background and charcoal ■#27343D lettering for all three, providing about 10.98:1 contrast. Write out destinations such as “North Island,” “South Island,” and “West Island” so the information does not depend on color alone.
• Departure and fare cards: Use charcoal ■#27343D text on white ■#FFFFFF cards for approximately 12.77:1. White cards ■#FFFFFF differ from the pale page background ■#F6F8F9 by only about 1.07:1, so add gray ■#71838C outlines and spacing. The outline contrasts by about 3.94:1 against white ■#FFFFFF.
• Availability and discount notices: Present them on pale blue-gray ■#E8EFF2 with charcoal ■#27343D text. Labels such as “Seats available,” “Fully booked,” and “Early-bird eligible” carry the meaning, with the applicable terms written nearby. The panel itself differs from the page background ■#F6F8F9 by only about 1.09:1, so use headings or spacing to separate it.
• Route search form: Keep inputs white ■#FFFFFF and their text labels charcoal ■#27343D. Use a consistent gray ■#71838C outline wherever a border is needed to identify a field. It contrasts by approximately 3.94:1 against white ■#FFFFFF and 3.39:1 against the pale blue-gray panel ■#E8EFF2.
• “Book this sailing” button: Reserve deep terracotta ■#934330 for the primary action in the light content area, with white ■#FFFFFF lettering. Text-to-button contrast is about 6.80:1, and the button surface contrasts by about 6.39:1 with the surrounding pale gray ■#F6F8F9.
• Supporting text and links: Use medium gray ■#52636B on pale gray ■#F6F8F9 for about 5.87:1 contrast. Links can use navy ■#23546B on that same background for approximately 7.72:1, with underlines so they are identifiable without color alone.

Route names, sailing times, and fares can now be read using a consistent neutral presentation, while the main booking action has its own distinct surface. The aim is not to replace six bright colors with another arbitrary number, but to combine redundant color uses while preserving meaningful distinctions.

After reducing colors, check that meaning and controls remain clear

Moving the terracotta booking button ■#934330 directly into the navy header ■#23546B would leave only about 1.21:1 contrast between their surfaces. The same button that stands out on a light background may blend into a dark one. In the header, choose an underlined white ■#FFFFFF text link or another treatment with adequate contrast against navy; keep the terracotta button in the light content area.

Under WCAG 2.2 (Web Content Accessibility Guidelines) Level AA, normal-sized text generally needs at least 4.5:1 contrast against its background, and large text at least 3:1. Essential non-text visual indicators needed to identify controls and their states, such as certain input-field outlines, generally need at least 3:1 against adjacent colors. Not every purely decorative card border is automatically subject to that threshold. Check route labels, availability states, booking controls, and visible keyboard focus on mobile too.

HueRoll can display HEX values, offer related-color suggestions, and check a selected color against white or black. It cannot directly compare arbitrary pairs of custom colors or automatically determine WCAG AA or AAA compliance. The custom-pair ratios in this article were calculated separately.