What Background Colors Can You Use with White Text? | Understanding Contrast in Web Design

White text can make headlines and buttons stand out against dark backgrounds. However, a colored background does not automatically provide readable white lettering. The suitability of the combination depends on background brightness and text size. This guide compares practical website palettes and unsuitable examples using calculated contrast ratios.

Choose white-text backgrounds by their lightness contrast

Start by checking the brightness difference between the text and its background. For example, white ■#FFFFFF lettering on deep navy ■#24364A has a contrast ratio of about 12.34:1. A HEX code is a hexadecimal notation for specifying color; the important measurement here is the actual text/background pair.

WCAG (Web Content Accessibility Guidelines) 2.2 Level AA, a defined web accessibility conformance level, requires at least 4.5:1 contrast for ordinary text and 3:1 for qualifying large text. A difference in hue (the color family, such as blue or red) does not guarantee enough lightness contrast.

When planning to use white text, shortlist background colors and calculate the contrast first. After checking the standard, consider how each option works with the service, surrounding photographs, and area covered. Passing a numerical threshold does not replace reviewing actual readability, including font weight and size.

Practical combinations with blue, green, and warm colors

For a large service introduction, try deep navy ■#24364A as the background and white ■#FFFFFF for the headline, giving about 12.34:1 contrast. A dark hero area does not require every section of the page to be dark; following it with a light information section can separate the content into clear groups.

A registration button in that navy section can use pale gold ■#F3C97A for its fill and navy ■#24364A for its label. The button text has about 7.90:1 contrast against its fill, and the gold surface is also well distinguished from the surrounding navy. This helps separate the action from the hero without forcing white text onto every component.

For an information banner, deep blue ■#1D5871 with white ■#FFFFFF text gives about 7.82:1. A heading for a completed task could use dark green ■#1E675C with white ■#FFFFFF text at about 6.67:1. Nevertheless, the completed state should also be identified with wording or a check mark, not by green alone.

A short action button needing a warmer color could use reddish-brown ■#A7502B with white ■#FFFFFF text, giving about 5.49:1. A white ■#FFFFFF surrounding surface helps the colored button stand out. Always make the action understandable from its label and do not treat color as the only sign that it can be clicked.

Do not force white text onto bright backgrounds

Even a modest increase in background brightness changes the result. White ■#FFFFFF text on orange-brown ■#B45C35 has about 4.64:1 contrast, just above the 4.5:1 minimum for ordinary text, leaving little margin. On brighter orange ■#CF7445, the ratio drops to about 3.37:1 and fails that ordinary-text criterion. The latter meets the 3:1 ratio for qualifying large text, but that does not make it suitable for small button labels.

On pale gold ■#F3C97A, white ■#FFFFFF text has only about 1.56:1 contrast. Instead of darkening every background, consider changing the letters to deep navy ■#24364A. The navy-on-gold pair gives about 7.90:1, making it an option for ordinary text.

Over photographs or gradients, the color beneath each part of the lettering can change. Translucent overlays likewise require contrast checks against the actual composited background. On mobile screens, line breaks shift where text falls, so make sure letters do not move onto the brightest part of an image.

HueRoll lets you enter HEX codes, explore shades and palette options, and compare the selected color against white or black. It cannot automatically calculate contrast for any arbitrary pair of colors or determine conformance levels such as AA. Validate each actual background/text combination and change the text color when white is not appropriate.