Color Scheme Improvements for a Website That Looks Too Dark | How to Balance Lightness

Dark colors can help a website establish a particular atmosphere, but when every section from top to bottom uses a deep background, even practical information and booking forms may feel visually heavy. You do not have to turn the entire design white. The more useful approach is to decide which areas should keep their dark character and which areas need lighter reading surfaces. This example uses a coworking space offering evening access and in-person tours.

A page can feel too dark even when its text contrast is sufficient

Color lightness describes how light or dark a color is. If a website seems excessively dark, examine the proportion and sequence of background surfaces before automatically changing all the text. Imagine a main reading area in dark navy ■#1B2F39 with cards in another dark blue-gray ■#223B46. The cards differ from their surroundings by only about 1.18:1, so their boundaries may be difficult to distinguish.

However, pale lettering ■#DEE8EA against that dark main background ■#1B2F39 has a contrast ratio of about 11.13:1. The same text against the card background ■#223B46 has a ratio of about 9.45:1. These are substantial light-dark differences for reading. A contrast ratio measures the relative luminance difference between neighboring colors; it is not a direct score of how dark or heavy a whole page feels.

Instead of treating all dark sections as a problem, keep a dark introductory area for the site’s photographs and character. Move longer descriptions, membership prices, and tour-booking controls onto lighter surfaces. This creates a visual transition that reflects what visitors are trying to do.

Example palette for a coworking space tour-booking website

Imagine a page with photographs of the workspace at night, desk options, membership prices, directions, and a tour request form. Use dark color for the atmospheric opening, lighter backgrounds for practical content, and a restrained warm accent for the main action. A HEX code is a hexadecimal notation for specifying colors on the web.

• Opening section: Use deep navy ■#172B36 behind the introductory heading, with white ■#FFFFFF lettering. Text-to-background contrast is approximately 14.63:1. If text must appear near a photograph, provide a solid color surface behind it because the brightness of the image can vary from place to place.
• “View prices” button in the opening section: Choose pale sand ■#F5DDB6 for the button with charcoal ■#26343C text. Lettering contrasts by about 9.70:1 with the button, and the button differs from the surrounding navy ■#172B36 by about 11.08:1.
• Membership prices and instructions: Change the broad content background to warm off-white ■#F7F5F0 with charcoal ■#26343C body text. The contrast ratio is about 11.76:1. Deep blue headings ■#225369 against the same background have about 7.68:1 contrast.
• Desk and membership-plan cards: Present prices and details in charcoal ■#26343C on white ■#FFFFFF cards, giving approximately 12.81:1 text contrast. White cards ■#FFFFFF and the off-white page background ■#F7F5F0 differ by only about 1.09:1, so use spacing and a gray ■#71818A border. This border contrasts by about 4.03:1 with white ■#FFFFFF.
• Directions and tour information: Use a pale sage-gray ■#E8F0ED panel with charcoal ■#26343C text. Their ratio is about 11.06:1. Since this pale panel differs from the off-white page ■#F7F5F0 by only about 1.06:1, add a gray ■#71818A outline where needed. The border has about 3.48:1 contrast against the panel.
• Supporting text for the tour form: Place gray ■#52636A text on off-white ■#F7F5F0 for approximately 5.75:1. Give each form field a visible label rather than relying solely on faint placeholder text.
• “Book a tour” button: In the light content section, use deep terracotta ■#965038 as the button background with white ■#FFFFFF text. Text contrast is approximately 6.00:1, and the button contrasts about 5.50:1 with the neighboring off-white ■#F7F5F0.
• Footer: Return to deep blue-gray ■#213540 with white ■#FFFFFF lettering for about 12.74:1 contrast. Keeping dark areas at the opening and closing sections allows the extensive practical information in between to remain light.

The design retains its nighttime atmosphere without forcing every piece of information onto a dark surface. The key is not to alternate light and dark blocks mechanically, but to give information-rich areas enough visual breathing room.

After lightening the content, recheck buttons and essential boundaries

Moving the same terracotta booking button ■#965038 into the dark navy introduction ■#172B36 reduces the contrast between its surface and the surrounding background to about 2.44:1. A button color that works on a light page may lose its visible boundary on a darker one. Use the pale sand button in the opening section and the terracotta button in the light content section, or test alternatives against their actual neighboring colors.

Under WCAG 2.2 (Web Content Accessibility Guidelines) Level AA, normal-sized text needs at least 4.5:1 contrast against its background, and large text needs at least 3:1. Essential non-text visual indicators, including boundaries required to identify certain interactive controls, generally need at least 3:1 against adjacent colors. This requirement does not automatically apply to every purely decorative divider.

Adjust the light-to-dark balance to suit the site’s purpose and photography. A dark layout is not inherently wrong; dark backgrounds can support readable text when the foreground colors are chosen carefully. On mobile, check small prices, form fields, and visible keyboard focus indicators. HueRoll can compare a selected color against white or black, but it cannot compare arbitrary pairs of custom colors or automatically assess WCAG AA or AAA compliance. The custom-color ratios here were calculated separately.