How to Create a Gray Scale for a Website: Using Shades for Text, Backgrounds, and Borders

When designing a website, do you choose a slightly different gray each time you need a background, body text, a note, or a divider? A growing collection of nearly identical grays makes both legibility and component boundaries harder to maintain. A gray scale (grayscale) is an ordered set of lighter and darker grays assigned to particular interface roles. This article shows how to build one using a page where visitors browse the dates and locations of community classes.

Start with the jobs of backgrounds, text, and borders

First, list what the page needs: a large background, surfaces containing information, headings and body text, supporting text, and borders. Reserve very light grays for broad areas or alternating table rows. Use much darker shades for writing. Treat lines that are purely decorative differently from outlines that people must see to recognize a search input or another control.

With a white surface as your reference, try two light shades for the backgrounds, two or three dark shades for text, and separate values for decorative and essential lines. The shades do not have to be equally spaced. Names such as Gray-50 and Gray-800 are labels for this example palette; they are not measurements of brightness or universally required values.

The grays used here are neutral: their red, green, and blue components are equal. A real website could choose slightly bluish or warmer grays instead. If it does, verify the resulting contrast against the colors that actually sit next to them rather than relying on the color names or visual impression.

A seven-step gray scale for a community-class schedule

Imagine a list showing course titles, dates, and venues, with a control for filtering by month. A HEX code specifies a web color using hexadecimal characters. Starting from a white ■#FFFFFF table surface, assign these seven gray steps to different roles.

Use Gray-50 ■#FAFAFA around the page, white ■#FFFFFF for standard rows, and Gray-100 ■#F2F2F2 for alternate rows. White and Gray-50 have a contrast ratio of approximately 1.04:1, while white and Gray-100 have approximately 1.12:1. These subtle differences should not be the only way to identify an essential division. Support the layout with headings, spacing, and visible borders where needed.

Use Gray-900 ■#252525 for course and column headings, and Gray-800 ■#3F3F3F for dates and descriptions. Against white ■#FFFFFF, their contrast ratios are approximately 15.33:1 and 10.53:1, respectively. Gray-600 ■#666666 works for supporting venue text: it has a ratio of approximately 5.74:1 against white and 5.13:1 against alternate-row Gray-100 ■#F2F2F2.

Gray-200 ■#DADADA contrasts with white ■#FFFFFF by only about 1.40:1. Use it only as an optional decorative line where headings and spacing already communicate the structure. For the month-filter field, whose outline may be necessary to identify the input, use Gray-400 ■#838383. It contrasts by approximately 3.79:1 with white ■#FFFFFF and 3.39:1 with alternate-row Gray-100 ■#F2F2F2.

Check each adjacent pair and avoid using border gray for small text

A shade that works for a meaningful border may still be too light for ordinary text. Gray-400 ■#838383 against white ■#FFFFFF reaches approximately 3.79:1, which is below the threshold for normal-sized text. For venue notes and other small labels, use a darker option such as Gray-600 ■#666666 on the tested background. Similarly, do not ask readers to understand table rows from the alternating gray fills alone; use clearly positioned labels and a consistent table structure.

Under WCAG (Web Content Accessibility Guidelines) 2.2 Level AA, normal-sized text requires a contrast ratio of at least 4.5:1 against its background, while qualifying large text requires at least 3:1. Essential non-text information used to identify interface components, such as a required control outline, needs at least 3:1 against adjacent colors. Purely decorative lines are not automatically subject to the same requirement.

You can remove unused steps after testing the seven-color example. Review the schedule and its filters on desktop and mobile, and recheck both text and border contrast whenever a surrounding surface changes. The ratios in this article are calculated for opaque, solid-color pairs; they do not establish accessibility conformance for an entire page.

HueRoll supports HEX input, lighter and darker color suggestions such as tints and shades, and contrast checks between a selected color and white or black. It does not directly compare arbitrary custom color pairs or automatically determine AA or AAA conformance. Check the actual adjacent-color combinations separately before using your gray scale throughout a website.