How to Make White Space Visible with Color on a Website: Tips for Using Non-White Backgrounds Naturally
White space on a website is the empty space around text, images, buttons, and other content. Despite the name, it does not have to be white. A softly colored background can make the spacing between pieces of information visible while keeping the overall design restrained. However, filling every empty area with another color can have the opposite effect and make the page feel busy. Using a fictional online course catalog, this article explains how to make non-white backgrounds work as part of the spacing rather than as extra decoration.
Color the Surface Behind the Content, Not Each Individual Gap
Instead of coloring every gap separately, start with one subtle background across the page. Place white content areas on top of it. The page background will then show through around the edges of each card and between adjacent cards. For instance, a pale greige (gray-beige) page can provide a gentle surrounding surface for white course cards.
The goal is not to assign a different background to every piece of information. Keep the page color continuous around the cards, and group each course’s title, date, description, and enrollment button within its own white area. Let spacing and the order of the text organize the details rather than using many colors inside every card.
In CSS (Cascading Style Sheets, the rules used to control a website’s appearance), you can set background-color on the outer page container and a different background on each card. Use gap to control the space between cards and padding to control the space inside them. Background color works best when the layout already groups the information clearly.
A Practical Color Scheme for an Online Course Listing
Give the Page, Text, Headings, and Buttons Distinct Roles
Here is one possible palette for a fictional course catalog. The values are shown as HEX codes: six hexadecimal digits (0–9 and A–F) preceded by a hash symbol.
- Page background: pale greige #F2F1EA. Let it appear around and between course cards so that it becomes the visible color of the open space.
- Course cards: white #FFFFFF. Keep each course title, date, and description on one clear surface.
- Body text inside the cards: deep blue-gray #27343D on white #FFFFFF, with an approximate contrast ratio of 12.77:1.
- Card headings: deep green #204D43 on white #FFFFFF, with an approximate contrast ratio of 9.53:1.
- Enrollment buttons: deep green #1D5B4F as the button background, paired with white #FFFFFF text. The text-to-background contrast ratio is approximately 7.89:1.
The contrast ratio between the pale greige #F2F1EA and white #FFFFFF backgrounds is only about 1.13:1. That is a subtle difference, so color alone will not necessarily make the card boundaries obvious to everyone. Use the layout, gaps, and headings to show where each card begins and ends, and provide a clearly identifiable enrollment button for the actual action.
Choose How Much of the Background Should Be Visible
On a desktop layout, you could begin with 32px of space along the page edges and 24px between neighboring cards. Here, px means pixels, a unit used for lengths in CSS. These dimensions are starting examples, not fixed design standards. Adjust them for the amount of text, the width of the cards, and the surrounding layout. Leave enough padding inside each card as well: space around the text inside a card serves a different purpose from the tinted space outside it.
When the course list changes from three columns to one on a phone, reconsider the side margins, perhaps starting around 16px. Keep some of the same page background visible between the vertically stacked cards. This helps preserve the separation between items without inventing another color for the mobile layout.
What to Check When the Background Is Too Subtle or the Gaps Are Too Small
A pale background will barely be visible if the cards touch each other. First adjust the spacing between cards and along the page edges. Only if the groups are still hard to distinguish should you consider adding a restrained border or changing the shape of the cards. Conversely, making the background dark or highly saturated can draw more attention to the empty areas than to the course information.
If you place a short note outside the white cards, deep blue-gray text #27343D on pale greige #F2F1EA has a calculated contrast ratio of approximately 11.28:1. Check each actual text-and-background combination: the same text color might appear on a white card in one place and directly on the tinted page in another.
Under WCAG (Web Content Accessibility Guidelines) Level AA, normal text generally requires a contrast ratio of at least 4.5:1 against its background; large text requires at least 3:1. A 3:1 contrast requirement against adjacent colors can also apply to essential non-text visual information such as the outline of a control or a meaningful icon. It does not mean that two purely decorative whitespace colors must always contrast at 3:1. Check the page at different screen widths to make sure the spacing survives, and test text, buttons, and state indicators against the backgrounds on which they actually appear.