What Color Should Supplementary Text Be? How to Choose a Text Color That Looks Less Prominent Than Body Copy

TIPS

What color should you use for a short note such as “Tools are available at the venue” beneath a web page’s main text? Supplementary text provides additional context and is often intended to be less prominent than the body copy. But making it too faint can also make useful information difficult to read. This article compares text colors on white and pale backgrounds to show how to create a quieter appearance without sacrificing contrast.

Make Supplementary Text Slightly Less Prominent, but Keep It Readable

The main difference between body copy and supplementary text is the role of the information. On a workshop page, the main description might explain what visitors will learn, while a short note such as “Tools are provided at the venue” adds a practical detail. Using a somewhat lighter blue-gray for that note can help readers focus on the main paragraph first and consult the extra information when needed.

Do not automatically make every secondary-looking detail pale. Registration deadlines, prices, essential items to bring, and explanations of errors may directly affect what visitors need to do. Present those important conditions in a strong body-text color or in a clearly identified notice. Color lightness should not be the only measure of importance.

Before changing the text color, you can also place the note immediately below the paragraph and keep its wording brief. Differences in text size, weight, line spacing, and surrounding space may communicate its supporting role without requiring a large color difference.

Compare Supplementary Text Colors on White and Pale Backgrounds

Consider a fictional pottery workshop page. A main sentence says, “Beginners can experience the steps of pottery making,” followed by the note, “Tools are provided at the venue.” The colors below are specified with HEX codes, written as a hash sign followed by six hexadecimal digits. A contrast ratio measures the relative luminance difference between text and its background.

Example 1: Supplementary Text on a White Reading Area

Use white #FFFFFF for the background and deep blue-gray #273642 for body text. Their contrast ratio is approximately 12.41:1.
Set the supporting note in slightly lighter blue-gray #526576. Against white #FFFFFF, it has a contrast ratio of approximately 6.03:1. This is a quieter color than the body text while retaining useful contrast for a short explanation.
If the note is changed to much paler blue-gray #9AA8B4, its contrast against white #FFFFFF falls to approximately 2.43:1. That is below the 4.5:1 requirement for normal-sized text, so this combination is not recommended for meaningful supporting copy.

Even if supplementary text is set at around 14px, it still needs adequate contrast. Here, px means pixels, a unit used for text size and spacing on websites. Fourteen pixels is only an illustrative design choice, not a guarantee of readability across devices. If the separation between the paragraph and the note is already clear, they can also share the same font size.

Example 2: Supplementary Text Inside a Pale Information Panel

Suppose a section about what to bring has a pale blue-gray #EEF4F7 background. Deep body text #273642 has approximately 11.18:1 contrast with that panel #EEF4F7, while the same supplementary blue-gray #526576 has approximately 5.43:1 contrast against the panel #EEF4F7. Even if the text color itself stays unchanged, the contrast ratio changes when the background changes.

A note such as “There is seating available for breaks” can be presented in the supporting style. Required items and meeting times should remain prominent rather than being faded along with optional details. The overly pale text color #9AA8B4 provides only approximately 2.19:1 contrast against the pale panel #EEF4F7, making it an even weaker combination than on white.

Check Small Text, Background Changes, and Mobile Layouts

If you make supporting text smaller than body copy, avoid making it much lighter at the same time. Under Level AA of WCAG (Web Content Accessibility Guidelines), normal-sized text generally requires at least a 4.5:1 contrast ratio against its background, while large text requires at least 3:1. Supplementary text that conveys meaningful information is also covered by the normal text requirement when it is not large text.

When the page background changes, or when text appears over a photograph, recalculate contrast against the actual background behind it. Reducing text opacity also changes the resulting color according to what is underneath. On a phone, check whether the note wraps onto several lines, remains clearly associated with the main text, and is not too small to read comfortably.

Making supplementary text less prominent does not mean making it unreadable. Start with a text color that has sufficient contrast against the real background, then use size, weight, and spacing to give it a quieter role when necessary.