What Colors Make Annotations and Footnotes Easy to Read? Color Tips for Small Text

What colors work best for small “Note 1” references in a web article and their explanations further down the page? An annotation supplies additional context for a word or condition, while a footnote connects a marker in the main text to a note placed near the bottom of a page or section. You may want these details to look quieter than ordinary paragraphs, but overly pale text can make it difficult to find and read the corresponding explanation. Using a fictional reading-group survey, this guide compares color choices for note markers, footnote text, and links back to the original passage.

Keep Small Notes and Their Links Dark Enough to Read

Imagine a fictional article that says, “The survey covers weekend reading groups (Note 1).” At the end of the article, the corresponding explanation reads, “Note 1: Only sessions held on Saturdays are included; weekday sessions are excluded.” This is a made-up example to demonstrate a design, not the findings of an actual survey. Repeating the same reference label makes it clear which footnote explains the statement.

Footnotes can be slightly smaller than body copy, but they still need adequate contrast against their background. Rather than starting with a very pale color, first choose a readable text color, then use font size and space above the notes to distinguish them from the main article. For example, compare body text at 16px with footnotes at 14–15px. Here, px means pixels, a unit used to specify dimensions such as type size and spacing on the web. These sizes are illustrations, not a requirement to shrink footnotes.

If the “Note 1” reference in the paragraph links to its footnote, you can also provide a clearly named “Return to text” link near the note. Use an underline as well as a distinct text color, and keep the reference labels consistent. A tiny raised numeral is not necessarily easier to use: the marker must remain visible and comfortable to select, especially on a touch screen.

Compare Footnote Colors on White and in a Pale Notes Section

The examples use HEX color codes, written as a hash sign followed by six hexadecimal characters from 0–9 and A–F. A contrast ratio measures the relative luminance difference between text and its background. All ratios below are calculated for solid, opaque colors.

Option 1: Place Footnotes on the White Background at the End of the Article

• Use white ■#FFFFFF for the page and deep blue-gray ■#273846 for body text. This pairing has a contrast ratio of approximately 12.07:1.
• Set the footnote explanations in slightly softer blue-gray ■#4D626D. Against white ■#FFFFFF, the contrast ratio is approximately 6.40:1. Add a heading such as “Notes and Sources” and separate the group from ordinary paragraphs with spacing.
• Use deep blue-green ■#155B72 for the “Note 1” reference in the text and for the “Return to text” link. Underline the links. Against white ■#FFFFFF, the contrast ratio is approximately 7.58:1.

Setting footnotes in very faint gray-blue ■#ADB8C0 would give only approximately 2.02:1 contrast against white ■#FFFFFF. That falls below the 4.5:1 threshold for normal-sized text. Avoid this combination for information that readers need to interpret the article, such as sources, calculation methods, or the scope of a survey.

Option 2: Group the Footnotes in a Pale Panel

When an article has several notes, a pale blue-gray ■#F0F4F6 background can set them apart from the main content. Blue-gray footnote text ■#4D626D has approximately 5.78:1 contrast against this background. The deep blue-green ■#155B72 “Return to text” link has approximately 6.85:1, while deeper blue-gray ■#273846 text has approximately 10.90:1.

The contrast between the white ■#FFFFFF page and the pale notes panel ■#F0F4F6 is only approximately 1.11:1. Because the background difference is subtle, retain the “Notes and Sources” heading and enough padding. If a stronger boundary is needed, add a gray-blue ■#617A87 rule. Against the pale panel ■#F0F4F6, the rule has approximately 4.09:1 contrast, so its visibility can be checked independently of the text.

Check Reference Matching, Return Links, and Mobile Readability

Legible colors are only part of a usable footnote system. Check that selecting “Note 1” moves to the correct explanation, and that “Return to text” takes readers back to the original passage. With several notes, keep Note 1, Note 2, and their explanations in the right order. Even correctly linked references are inconvenient if the markers are too small to select reliably.

On a phone, a footnote can wrap onto two or three lines. Leave enough line spacing, align each reference number with its explanation, and keep return links from being mistaken for the start of the following note. Also check that zooming or enlarging text does not cause words or links to overlap.

Under WCAG (Web Content Accessibility Guidelines) Level AA, 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. Small footnotes and reference links should be evaluated as normal-sized text. If they appear over photographs or transparent surfaces, test the actual colors separately. Footnotes and annotations should make an article easier to check, not hide information from its readers.