What Color Should Metadata Such as Dates and Categories Be? Text Color Design for Article Pages

Below the title of a web article, you may see its publication date, last updated date, category, and author. These details are known as article metadata: information about the article itself. They should usually be less prominent than the title without becoming so pale that readers cannot check when the article was updated or what topic it covers. This guide uses a fictional walking article to show how to make metadata readable while keeping it visually separate from the main content.

Make Dates and Categories Subtle, but Keep the Text Clearly Legible

On an article page, readers may scan the title first and then check the publication date or category. Because metadata is brief, its text color can be somewhat softer than the main article color. Still, meaningful information needs sufficient contrast with the background. Text size, grouping, and spacing can distinguish the metadata from the title without fading the characters excessively.

For example, beneath a fictional article titled “A Walk Along the River,” you could show “Published: September 12,” “Updated: September 20,” “Category: Walking,” and “Author: Editorial Team.” Keep labels such as “Published” and “Updated” with their dates rather than showing unexplained numbers. If the updated date is too faint to read, visitors may have trouble judging how current the information is.

If a category name opens an article listing, it is a link, unlike a static date or byline. You do not need to give it exactly the same text color as the other metadata. Give the linked category a recognizable text color and an underline so that color is not the only visual indication that it can be opened.

Compare Metadata Colors on White and Pale Article Backgrounds

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

Example 1: Metadata Directly Beneath a Title on a White Page

• Keep the article background white ■#FFFFFF, with the title and main body text in deep blue-gray ■#253646. The contrast ratio between the text and the white background is approximately 12.39:1.
• Use a more subdued blue-gray ■#526475 for publication dates, updated dates, and author names. Against white ■#FFFFFF, its contrast ratio is approximately 6.11:1. It looks less prominent than the article title while retaining sufficient contrast for ordinary text.
• For a linked category, use deep blue ■#1B587F and an underline. Its contrast ratio against white ■#FFFFFF is approximately 7.64:1.

If the date is changed to much paler blue-gray ■#9CA9B5, its contrast ratio against white ■#FFFFFF falls to approximately 2.40:1. This is below the 4.5:1 requirement for normal-sized text, so avoid it for dates and other meaningful metadata. Small text does not qualify for a weaker contrast requirement simply because it takes up less space.

Example 2: Metadata Inside a Pale Article-Header Area

Some layouts use a pale blue-gray ■#F1F6F8 surface around the title. On that background, deep blue-gray title text ■#253646 gives approximately 11.37:1 contrast. The muted metadata color ■#526475 provides approximately 5.61:1, while the linked category in deep blue ■#1B587F provides approximately 7.01:1. Keep the underline on the category link in this arrangement as well.

The contrast ratio between the white ■#FFFFFF page and the pale blue-gray ■#F1F6F8 header surface is only about 1.09:1. That subtle background change does not necessarily create a clear boundary by itself. Use spacing and consistent text alignment to identify the header area and check that the metadata does not look like part of the first body paragraph.

Check Small Metadata, Mobile Wrapping, and Link States

You could start with metadata around 14px, but this is a design example rather than a universal target. Here px means pixels, a unit used to specify text size and other lengths on web pages. If the publication date, category, and author cannot fit side by side on a phone, allow the items to wrap or stack while keeping each label associated with its value. Do not shrink everything until it fits on one line.

Whether the updated date needs stronger emphasis depends on the article. If a revision is important to a reader’s decision, display an explicit “Updated” label rather than relying only on a darker color. For a linked category, check that its text remains legible in hover and keyboard-focus states, not just in its default appearance.

Under Level AA of WCAG (Web Content Accessibility Guidelines), normal-sized text generally requires a contrast ratio of at least 4.5:1 against its background, while large text requires at least 3:1. Small metadata such as dates and categories should be evaluated against the normal-text threshold. The goal is not to introduce many different text colors, but to make the reading order—article title, metadata, and article content—clear and natural.