How to Add Color to Heading Bands: Color Schemes That Make Articles Easier to Follow

When an article moves from “Gather Your Supplies” to “Plan Your Week” and then “Review the Month,” a colored band behind each main heading can make those changes easier to spot. But if every smaller subheading is placed inside a heavy colored rectangle, the page can start to look fragmented. Using a fictional article about organizing a paper planner, this guide compares pale and dark heading bands and explains how to use background color, spacing, and heading levels without interrupting the reading flow.

Use Heading Bands Where the Article Moves to a Major New Topic

A heading band is a horizontal colored surface behind a heading. Unlike changing the background of an entire content section, it colors only the heading line, leaving the paragraphs below on the normal page surface. In a planner-organizing article, three consistent bands labeled “Gather Your Supplies,” “Write Your Weekly Plan,” and “Review at the End of the Month” can help someone who starts reading halfway down identify the topic at a glance.

Decide on the heading structure before applying color. In HTML, the markup language that identifies content roles on a web page, the h2 element can mark major sections while h3 marks their subsections. One practical design uses a colored band only for h2 headings, leaving h3 headings to be distinguished by font weight and spacing. A visually colored ordinary paragraph should not replace a properly marked-up heading.

The aim is to mark a change of subject, not to make every heading into a decorative feature. Three well-spaced bands can provide landmarks; bands repeated every few lines may do the opposite. Descriptive wording such as “Write Your Weekly Plan” also communicates the section’s purpose when the color difference is hard to perceive.

Compare a Subtle Pale Heading Band with a Dark One

The following examples use HEX color codes, expressed as a hash sign followed by six hexadecimal characters from 0–9 and A–F. A contrast ratio expresses the relative luminance difference between text and its background. Both options use white ■#FFFFFF for the ordinary article background and deep blue-gray ■#283946 for body copy. The resulting text-to-background contrast ratio is approximately 11.91:1.

Option A: Use Pale Green-Gray Bands for Gentle Section Breaks

• Give each major heading band a pale green-gray ■#EAF3EF background and use deep teal ■#1E5148 for its text. The heading-to-band contrast ratio is approximately 7.98:1.
• Return to white ■#FFFFFF for the paragraphs below the band, with deep blue-gray ■#283946 body text. A smaller h3 heading can use deep teal ■#1E5148 without its own band, giving approximately 9.03:1 contrast against white ■#FFFFFF.
• The white ■#FFFFFF page and pale green-gray ■#EAF3EF band differ by only approximately 1.13:1. If a more defined edge is useful, try a gray-teal ■#527568 rule at the left. Against the pale band ■#EAF3EF, the rule has approximately 4.52:1 contrast.

For example, place a normal subheading, “Separate Appointments from Notes,” below the “Write Your Weekly Plan” band. The band signals a major topic, while the subheading identifies a smaller step through type size and spacing. If the pale band feels too subtle, adjust the space around it before making the background more saturated.

Option B: Use a Dark Band with White Heading Text

If the article has relatively few major sections and their beginnings need to be especially clear, use a deep green ■#205549 band with white ■#FFFFFF heading text. The contrast ratio for that pair is approximately 8.55:1. Immediately below the band, return to the article’s white ■#FFFFFF background and regular deep blue-gray text, instead of keeping the entire section inside the dark surface.

Apply the same dark treatment to the three major h2 headings, not to every h3 as well. Repeated heavy bands can occupy too much space and make the hierarchy harder to follow; compare the pale version if that happens. The opposite problem is text that is too faint: pale gray-green ■#A7B6AD lettering on a pale green-gray ■#EAF3EF band provides only about 1.87:1 contrast, below the 4.5:1 threshold for normal-sized text.

Adjust Band Width, Padding, and Wrapping on Mobile Screens

Do not let heading letters sit directly against the edges of the colored strip. As a starting point, try around 12px of internal padding above and below the text and 16px on the left and right. Here, px means pixels, a unit for web text sizes and spacing; these are illustrative values, not requirements. Align the band’s overall width with the article’s text column to avoid an unexpected protrusion. In CSS, the system used to style web pages, background-color sets the band’s fill and color sets the heading letters; check the two values together.

On a phone, a longer heading may wrap onto two lines. Leave enough line spacing and horizontal padding so that both lines fit comfortably. Also check the gap between the band and the first paragraph. Keep the same structural rule across desktop and mobile: major headings receive bands, and lower-level headings rely primarily on type and spacing. A change of color must not substitute for appropriate heading markup.

Under Level AA of WCAG (Web Content Accessibility Guidelines), normal-sized text generally needs a contrast ratio of at least 4.5:1 against its background, while large text needs at least 3:1. Both proposed heading-text combinations exceed the normal-text threshold. The figures are calculations for solid, opaque color pairs; recheck them if your theme applies transparency or different colors. Heading bands are most useful as occasional signposts that help visitors keep their place in an article, not as decoration added to every line.