Using Midnight Blue and Silver: Text and Decoration on Dark Screens

Midnight blue and silver can add restrained brightness to a dark website. However, when headlines, body copy, and decorative lines all use the same silver, it becomes harder to see which information matters most. This article shows how to give text and decoration separate roles, using a website hero section and a set of information cards.

Give silver different roles in text and decoration

Midnight blue is a deep blue close to black. For this example, we use ■#121D34. The CSS named color “silver” corresponds to ■#C0C0C0. A HEX (hexadecimal) color code starts with a hash sign and uses letters and digits to represent a screen color; this article uses six-digit codes. These solid colors do not reproduce the reflections or shine of real metal.

Use midnight blue ■#121D34 for the background, near-white ■#F4F6FA for important headings and main text, and silver ■#C0C0C0 for supporting text and short decorative lines. The near-white copy gets the strongest emphasis, while silver handles secondary information and accents. If text and decoration share a color, distinguish their jobs through font size, weight, and the space around them.

Two ways to arrange colors on a dark web page

Example 1: Headline and button in a hero section

Cover the top section of the website with midnight blue ■#121D34. Set the main headline in near-white ■#F4F6FA and the supporting description in silver ■#C0C0C0. Add one short silver vertical line beside the headline instead of repeating lines around the section. That keeps attention on the words, with the line acting as a divider. For a sign-up button, use a near-white ■#F4F6FA fill and midnight blue ■#121D34 lettering, so the action stands apart from the silver decoration.

Example 2: Information cards on a dark interface

Keep the page background at ■#121D34, then make each card a slightly lighter blue ■#263650. Set card headings in ■#F4F6FA and supporting explanations in ■#C0C0C0. If cards need clear separation, allow space between them rather than drawing thick silver borders around every card. A selected card can receive a silver ■#C0C0C0 outline and a visible “Selected” label. The label matters because a change of color alone should not be the only way to communicate a state.

Check contrast when choosing a darker silver

A contrast ratio measures the difference in brightness between text or an interface element and its background. Under the Web Content Accessibility Guidelines (WCAG) 2.2, Level AA requires at least 4.5:1 for normal-sized text and 3:1 for large text. In the examples above, near-white ■#F4F6FA on midnight blue ■#121D34 has a ratio of about 15.51:1; silver ■#C0C0C0 on midnight blue ■#121D34 is about 9.23:1; and silver ■#C0C0C0 on the card color ■#263650 is about 6.69:1. All three combinations meet the Level AA threshold for normal text.

A darker, bluish-gray alternative ■#8594AA reaches about 5.45:1 against the page background ■#121D34, but only about 3.95:1 against the card background ■#263650. The second pairing does not meet Level AA for normal-sized text. The same text color can pass on one surface and fail on another.

Also, the page background ■#121D34 and card background ■#263650 have a ratio of only about 1.38:1. Do not rely on that difference alone for a boundary or state indicator essential to an interface. Important non-text outlines and icons generally need at least 3:1 against adjacent colors; purely decorative lines are not subject to that requirement in the same way. HueRoll checks the selected color against white or black, so calculate other pairs, including midnight blue and silver, separately.