What Colors Go with Black Website Backgrounds? Color Schemes to Make Dark Design Easier to Read

For a website with a black background, off-white and blue-gray text can work alongside a small amount of brighter accent color. But a black background alone does not guarantee that dark photographs, image boundaries, or small captions will be easy to see. Using a photographer’s monochrome portfolio as an example, this article explains how to coordinate the artwork, text, gallery cards, and contact button.

Consider the Boundaries of Photographs Separately from Text Contrast

Start by deciding how much of the page will use black. A portfolio focused on photographs can have an extensive black background without requiring every heading, photo caption, and interactive element to use the same text color. One approach is to use bright off-white for the main heading, pale blue-gray for descriptions, and a slightly quieter gray for supporting information. The text roles become clearer without relying on several vivid colors.

If the dark areas of a photograph blend into the surrounding black, changing the text color will not solve that problem. You may need a separate surface behind the photograph or a visible outline around its card. Black does not automatically create a premium appearance or a more readable page: the result depends on the photographs’ tonal range, spacing, and the viewer’s display conditions.

A Black Color Scheme for a Monochrome Photography Portfolio

The colors below are given as HEX codes, hexadecimal values used to specify web colors. A contrast ratio measures the difference in relative luminance, or lightness, between two colors. This example begins with pure black and assigns different roles to the introduction, work gallery, and contact action.

Introduction: Black with Distinct Levels of Light Text

• Main page background: black ■#000000. Main heading: off-white ■#F2F2EE. The text-to-background contrast ratio is approximately 18.71:1.
• Descriptions of the photographic series: pale blue-gray ■#D4D7DD, giving approximately 14.56:1 contrast against the black background ■#000000.
• Supporting text, such as the year a photograph was taken: muted blue-gray ■#A9ADB5. It has approximately 9.33:1 contrast with black ■#000000. Use size and spacing to distinguish supporting details without making them too faint.

This design uses softer whites while still maintaining substantial light-dark contrast. However, thinner fonts, image placement, and display brightness all influence how the layout feels, so contrast figures are not a guarantee of comfortable reading in every situation.

Work Gallery: Define Card Boundaries on a Nearly Black Surface

If gallery cards use charcoal ■#181A1D, they have only approximately 1.20:1 contrast with the surrounding black ■#000000. A very dark photograph or the edge of a card can therefore become difficult to distinguish. For a currently selected work, one option is to use a gray outline ■#858B95. It contrasts with the charcoal card ■#181A1D at approximately 5.09:1, and with the outer black background ■#000000 at approximately 6.12:1. Add a visible “Selected” label or another non-color cue so the selection is not conveyed by the outline’s color alone.

Inside a card, use pale blue-gray ■#D4D7DD for the work title, with approximately 12.09:1 contrast against charcoal ■#181A1D. Supporting information can use muted blue-gray ■#A9ADB5, which has approximately 7.75:1 contrast against the same charcoal card ■#181A1D. For a “View work details” text link, use light blue ■#8BCFE7 and an underline; the link-to-card contrast ratio is approximately 10.11:1.

Contact: Use a Warm Accent in One Important Place

Give the “Ask about a photo session” button a small area of amber ■#E7B75D with near-black lettering ■#111111. The label-to-button contrast ratio is approximately 10.19:1, while the amber fill contrasts with the black page background ■#000000 at approximately 11.33:1. White lettering ■#FFFFFF on this amber ■#E7B75D would have only approximately 1.85:1 contrast, so the darker label is the better option for this palette.

Check Small Captions, Dark Images, and Interaction States

Not every colored text style is readable on black. For example, a darker gray ■#686D75 has approximately 4.03:1 contrast against black ■#000000, while saturated blue ■#2563EB has approximately 4.06:1 against black ■#000000. Both fall below the 4.5:1 requirement for normal-sized text. Use a lighter text color for descriptions instead of assuming that any colorful accent will be readable.

For hover, the state when a mouse pointer rests over the contact button, you can change the fill to light amber ■#FFD38A. Near-black text ■#111111 then has approximately 13.43:1 contrast. For focus, when a button is the current keyboard or similar interaction target, an offset pale blue outline ■#B2E7FF is one option. It contrasts with the black page background ■#000000 at approximately 15.77:1 and with the charcoal card surface ■#181A1D at approximately 13.09:1.

Under WCAG 2.2 (Web Content Accessibility Guidelines) Level AA, normal-sized text generally requires at least 4.5:1 contrast against its background, while qualifying large text requires at least 3:1. Essential non-text information needed to identify an interactive component or its state needs at least 3:1 against adjacent colors. This does not mean every photograph or decorative border requires an outline. Inspect the edges of darker works, smaller captions, and how the gallery behaves on actual mobile screens.