How Should You Color Quotations? How to Distinguish Them Naturally from Body Text in Web Articles

When quoting another article or someone’s words on a website, you may want the quoted passage to look different from the surrounding paragraphs. But a highly saturated background can interrupt the flow of the page, while text that is too pale can make the quotation or its attribution difficult to read. Using a fictional home-gardening article, this guide compares a quotation marked by a vertical line on white and a quotation grouped in a subtly colored panel.

Distinguish Quotations Through Spacing and Attribution, Not Color Alone

A quotation is a passage taken from another text or a person’s words. To keep it distinct from your own explanation, leave space before and after the passage or indent the quoted text slightly. If you use color, the purpose is to show where a quotation begins, not simply to add decoration.

For a short quotation of a few lines, a vertical rule on the left may be enough. For a longer passage, a pale background can group the quoted sentences into one block. In either case, keep the text sufficiently dark, and make sure readers can tell the difference between quoted material and the article author’s commentary.

Place verified source details near the quotation, such as an author’s name, the publication or work, and the publication date where available. A colored border or quotation marks do not identify the original source. The sentence “Check the moisture in the soil before sowing seeds” is only a fictional placeholder for the design example below, not a verified quotation from a real speaker or publication.

Two Color Schemes That Separate Quoted Text Naturally from Body Copy

These examples use HEX color codes, written as a hash sign followed by six hexadecimal characters from 0–9 and A–F. A contrast ratio describes the difference in relative luminance between foreground and background colors. Set the article background to white ■#FFFFFF and ordinary body text to deep blue-gray ■#293845; their contrast ratio is approximately 12.03:1.

Option 1: Use a Left-Hand Rule and Spacing on White

• Keep the quotation background white ■#FFFFFF like the article itself, and set the quoted text in subdued deep green-gray ■#304B42. The contrast ratio between quotation text and background is approximately 9.50:1.
• Add a deep green ■#2F695A rule along the left of the quotation. The rule contrasts with white ■#FFFFFF at approximately 6.38:1. Even if the line is decorative, leave enough spacing for readers to recognize the beginning of the passage.
• Display the attribution in quieter gray-green ■#53695D. Its contrast against white ■#FFFFFF is approximately 5.92:1. Keep the attribution close to the quotation instead of shrinking it until it is difficult to read.

This arrangement works as a starting point for placing a short quotation between ordinary article paragraphs. Because the background stays unchanged, it does not add another large colored surface to a page that may already contain photos and headings. Replace the fictional placeholder with text from a verified source, and provide the real attribution when publishing an actual quotation.

Option 2: Group a Longer Quotation on a Pale Background

For a quotation spanning several lines, use a pale sage-green ■#ECF3EF background. Keep the quotation text in deep green-gray ■#304B42, providing approximately 8.43:1 contrast against that background. Attribution in gray-green ■#53695D has approximately 5.25:1 against the same pale surface ■#ECF3EF. If the left-hand rule is deep green ■#2F695A, its contrast against pale sage-green ■#ECF3EF is approximately 5.67:1.

The difference between white ■#FFFFFF and pale sage-green ■#ECF3EF is only approximately 1.13:1. If the quote panel is hard to locate, adjust the padding and rule thickness before choosing a brighter fill. In contrast, an extremely faint gray-green ■#A0ACA4 attribution would have only approximately 2.35:1 against white ■#FFFFFF, which is insufficient for normal-sized text.

Check Source Attribution, Mobile Layouts, and Text Contrast

For the page’s structure, HTML (the markup language that identifies parts of a web page) provides the blockquote element to identify an extended quotation. Place the visible attribution separately just after the quoted passage so visitors can identify the work or author. If the source information includes a link, use an underline or another visible link cue rather than relying on color alone.

On smartphones, large left and right margins around a quotation can leave too little room for the words themselves. Adjust the quote block’s width and padding, and keep the attribution close to its passage. If a photograph or transparent overlay affects the background, the solid-color contrast figures cannot simply be reused without checking the colors that actually appear behind the text.

At 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. Check attribution text as well as quotation text. The figures above are calculated for solid, opaque color pairs. To distinguish quoted material naturally, use spacing, a restrained rule, a pale panel when useful, and reliable source details rather than making the text increasingly faint.