What Colors Go with White Website Backgrounds? Color Scheme Tips for a Simple Look

Dark gray, deep green, and muted brown are all possible partners for a white website background. But simply adding more white space does not automatically make a design simple. Pale supporting text and white cards can become difficult to distinguish. Using a community plant-swap event page as an example, this article shows how to keep the palette compact while defining clear roles for text, date-selection cards, and the registration button.

Use White Generously, Keep Text Dark, and Give Accents Specific Roles

On a white page, start by choosing the text colors. Deep green headings, dark charcoal paragraphs, and slightly quieter gray-green supporting information can create a reading order without filling every section with a different background. Consider lightness contrast before concentrating on hue, which is the general family of a color, such as green or blue.

Reserve accent colors for meaningful areas: the registration button, text links, and the selected date. Green does not automatically make a page look natural, but a deep green may be worth testing alongside photographs of plants. Spacing, font size, and labels should also establish priorities so that color does not carry all the information.

A White Color Scheme for a Plant-Swap Event and Date Selection

The values below are HEX codes, hexadecimal values used to specify colors on the web. A contrast ratio measures the difference in relative luminance, or lightness, between two colors. Here we assign colors to the event description, available dates, and registration action.

Event Description: White with Dark, Readable Text

• Main page background: white ■#FFFFFF. Heading color: deep green ■#285640, with approximately 8.42:1 contrast against white.
• Paragraphs about the event and how to participate: charcoal ■#26332D, contrasting with the white background ■#FFFFFF at approximately 13.18:1.
• Supporting details such as check-in times: muted gray-green ■#5B6B60, providing approximately 5.65:1 contrast against white ■#FFFFFF. Keep this information reasonably sized and use spacing to distinguish its priority.

Choosing a Date: Give White Cards a Visible Boundary and Selection Cue

Use a pale sand ■#F6F1E7 for the date-selection section. It contrasts with the white page ■#FFFFFF at only approximately 1.13:1, so the two surfaces alone may not communicate a clear boundary. Use dark brown-gray ■#35382F for instructions, giving approximately 10.61:1 contrast against the sand background ■#F6F1E7.

For individual date options, place white cards ■#FFFFFF within this section and add a gray-green border ■#74847A. That border contrasts with white ■#FFFFFF at approximately 3.94:1, and with the surrounding sand ■#F6F1E7 at approximately 3.50:1. For the selected date, use a deep green ■#176448 border together with the word “Selected.” The green outline contrasts with a white card ■#FFFFFF at approximately 7.11:1, and with the sand section ■#F6F1E7 at approximately 6.32:1. The text label ensures that selection is not communicated by color alone.

Registration: Distinguish the Main Button from Secondary Links

For a “Register for this date” button, use deep green ■#176448 with white lettering ■#FFFFFF. The label-to-button contrast ratio is approximately 7.11:1. The green fill contrasts with a white surface ■#FFFFFF at approximately 7.11:1, and with the sand surface ■#F6F1E7 at approximately 6.32:1.

Keep “What to bring” as an underlined text link in muted brown ■#795032. Its contrast ratio is approximately 6.98:1 against white ■#FFFFFF and 6.20:1 against sand ■#F6F1E7. For a participation-category label, combine a pale beige surface ■#E9D7BC with dark brown text ■#614729; the label-to-background ratio is approximately 6.11:1. State the category in words rather than relying only on its color.

Check Faint Text and Interactive States on Every Surface

A white background does not make every pale text color readable. Light gray-green ■#A4B5AB has only approximately 2.15:1 contrast against white ■#FFFFFF, insufficient for ordinary-sized text. Another gray-green ■#63766B provides approximately 4.85:1 against white ■#FFFFFF, but only approximately 4.30:1 against the sand surface ■#F6F1E7. The second pairing falls below the usual 4.5:1 text threshold. Recheck text colors whenever their backgrounds change.

For hover—the state when a mouse pointer rests over the registration button—you can darken its green fill to ■#0D4937. White lettering ■#FFFFFF retains approximately 10.37:1 contrast. For focus, when a button is the current keyboard or similar interaction target, add a dark blue outline ■#264F73 with a small space around the button. It contrasts with white ■#FFFFFF at approximately 8.58:1 and with pale sand ■#F6F1E7 at approximately 7.62:1.

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 qualifying large text needs at least 3:1. Essential non-text information needed to identify controls or their states, such as an important input border or a selection outline, needs at least 3:1 against adjacent colors. This does not mean every card requires a border. Also test text, selected dates, and button interactions on a phone rather than judging the design from color values alone.