What Background Colors Can You Use with Black Text? | How to Check Readability on Light Backgrounds

Can a website use black text on backgrounds other than white? Pale beige, blue, or yellow can add variety to a page, but a surface that looks light does not automatically make every text color readable. Here is how to select backgrounds for black lettering, with actual HEX color codes and calculated contrast ratios.

Choose backgrounds by their brightness contrast with black

Whether black text is suitable depends on how different its brightness is from the background, not merely on hue (the color family, such as red or blue). A HEX code is hexadecimal notation used to specify a color. Pure black ■#000000 on white ■#FFFFFF has a contrast ratio of 21:1, clearly distinguishing the letters from the surface.

WCAG (Web Content Accessibility Guidelines) 2.2 Level AA, an accessibility conformance level, requires at least 4.5:1 contrast for ordinary text and 3:1 for qualifying large text. Rather than deciding based on a background looking pale, measure the exact foreground and background colors that will appear together.

Pure black is not the only option. Dark blue-gray ■#263442 on white ■#FFFFFF has a contrast ratio of about 12.71:1. A dark gray can create a softer visual impression, but changing the text color also changes its contrast ratio, so check the pair for every background.

Compare white, cream, pale blue, and yellow backgrounds

For a long article page, white ■#FFFFFF with black ■#000000 text is a straightforward baseline, at 21:1 contrast. The same page can use dark blue-gray ■#263442 for headings and body text, giving about 12.71:1 against white. Text size and weight can establish hierarchy without adding many unrelated text colors.

For a welcoming product description or information card, consider pale cream ■#FFF3DE. Its contrast with black ■#000000 is about 19.13:1, while dark blue-gray ■#263442 gives about 11.58:1. When product photographs are colorful, a restrained surrounding surface can help keep the images as the main focus.

For a service explanation panel, pale blue ■#E7F2F8 with black ■#000000 gives about 18.45:1 contrast. Replacing black with dark blue-gray ■#263442 still gives about 11.17:1. Use typography and spacing to distinguish the heading from the body rather than introducing extra colors without a purpose.

A short notice can use a soft yellow ■#FFE9A8 background. Its contrast is about 17.47:1 with black ■#000000, or about 10.58:1 with dark blue-gray ■#263442. A bright background alone does not communicate why a notice matters, so include an explicit heading or wording such as ‘Please check,’ and review the overall balance before using that yellow across a large area.

Recalculate when the background becomes darker

Darkening a blue-gray surface can change whether the same text meets the contrast requirement. On the relatively light blue-gray ■#A7B5C1, black ■#000000 gives about 10.02:1 and dark blue-gray ■#263442 gives about 6.07:1. Both exceed the Level AA threshold for ordinary text.

On a darker blue-gray ■#80909E, pure black ■#000000 still gives about 6.40:1, but dark blue-gray ■#263442 gives only about 3.87:1, below the 4.5:1 requirement for ordinary text. Against a still darker ■#5B6670 background, even pure black ■#000000 produces about 3.58:1. In such cases, lighten the background or redesign the foreground/background pairing, checking the new contrast ratio.

On real pages, also check small notes, thin lettering, and text shown when the pointer rests over an element (the hover state). Photographs and translucent overlays change the surface beneath the text, so the opaque color-pair calculations above do not automatically apply. Review both the measured ratios and the actual reading experience at mobile screen sizes.

HueRoll lets you enter HEX codes, explore lighter and darker shades and palette suggestions, and compare the selected color against white or black. It cannot automatically compare two arbitrary colors or determine accessibility conformance levels such as AA. Choose a background based on its actual combination with the text, not just the color impression.