Choosing Namari-iro Color Codes: Shades for Backgrounds, Text, and Borders

Namari-iro is a slightly bluish gray named after the appearance of the metal lead. In web design, using the same medium gray for the background, lettering, and borders can leave smaller text too faint or make form fields difficult to distinguish. Instead, assign lighter and darker variations to different jobs. A class registration page provides a practical example.

Namari-iro color samples vary slightly

Digital samples of Namari-iro include a bluish medium gray ■#757A80 and a nearly neutral gray ■#7B7C7D. Although the name refers to the surface color of lead, different references give somewhat different screen colors; it does not have a single universal HEX value. A HEX (hexadecimal) color code specifies a screen color with a hash sign followed by letters and numbers. This article uses six-digit codes.

We will take ■#757A80 as a reference color, then use a paler blue-gray for broad backgrounds, a darker gray for body copy, and an intermediate shade for form-field borders. A single solid HEX color cannot reproduce the metallic reflections of real lead.

Choose different gray shades for backgrounds, text, and borders

Background: Keep information-heavy areas light

For a class registration page, use pale blue-gray ■#F3F5F7 across the page and white ■#FFFFFF for cards containing the schedule and fees. Reserve a darker version of lead-gray ■#59636D for a narrow band containing an important notice, with white ■#FFFFFF lettering on it. Instead of covering the entire reading area with medium gray, this keeps most information on a light surface while the darker band separates the notice.

Text: Go darker for smaller information

On white ■#FFFFFF cards, use deep gray ■#3B444C for headings and main copy, and a slightly lighter blue-gray ■#535E68 for supporting text and dates. The reference Namari-iro ■#757A80 may be suitable for genuinely large headings or short decorative details, but should not automatically become the color of normal-sized descriptions. Fill the main registration button with deep gray ■#3B444C and set its text in white ■#FFFFFF so its purpose is clear.

Borders: Make the required edges of fields more visible

When white ■#FFFFFF name or contact fields appear on pale blue-gray ■#F3F5F7, use a medium-dark gray ■#79838D for borders that are necessary to identify the input areas. A pale line ■#D0D5DA can be a quiet decorative separator, but should not be the only cue that a field is present. Show field labels in deep gray ■#3B444C, and check the keyboard-focus indicator separately from the ordinary border.

Evaluate text and border contrast separately

Contrast ratio measures the difference in brightness between adjacent colors. 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. The reference gray ■#757A80 has a ratio of about 4.33:1 against white ■#FFFFFF, or about 3.96:1 against pale blue-gray ■#F3F5F7. Neither combination reaches the normal-text threshold.

By comparison, deep gray ■#3B444C on white ■#FFFFFF reaches about 9.92:1, while the supporting-text gray ■#535E68 on the pale background ■#F3F5F7 reaches about 6.06:1. White ■#FFFFFF lettering on the darker notice band ■#59636D has a ratio of about 6.12:1. All three meet Level AA for normal-sized text.

Visual cues that are necessary to identify or operate a control, including required form borders and icons, generally need at least 3:1 against adjacent colors. The border gray ■#79838D reaches about 3.86:1 against white ■#FFFFFF and 3.53:1 against pale blue-gray ■#F3F5F7. A paler border ■#D0D5DA against white ■#FFFFFF reaches only about 1.48:1. Do not apply the same requirement indiscriminately to purely decorative lines; distinguish those from borders needed to operate a form.

HueRoll checks contrast between the selected color and white or black. It does not automatically compare arbitrary pairs of grays or determine WCAG AA compliance, so calculate the actual color pairings separately before finalizing the interface.