How to Use Different Shades of Gray in Web Design | Colors for Backgrounds, Text, and Borders

When using gray in web design, it is easier to organize information if you do not reuse one gray for backgrounds, text, and borders. Instead, assign different lightness levels to different roles. In this article, we use only neutral grays with no hue: lighter values for backgrounds, darker values for text, and middle values for borders depending on their purpose. The important point is not simply to choose “a gray,” but to check the contrast against the actual adjacent color for each role.

Separate background, body text, and supporting text with different gray levels

Start with a light gray page background ■#F7F7F7, dark gray primary text ■#333333, and medium gray supporting text ■#666666. The contrast ratio, a numerical measure of the relative lightness difference between foreground and background, is about 11.79:1 for the primary text and about 5.36:1 for the supporting text against the page background.

WCAG (Web Content Accessibility Guidelines) requires at least 4.5:1 contrast for normal-size text. Even when supporting copy should appear quieter, do not make it lighter based on appearance alone. Check the actual background pair so lowering visual priority does not also reduce text contrast below the required level.

For cards and inputs, distinguish decorative borders from necessary boundaries

If a card uses white ■#FFFFFF on a page background of ■#F7F7F7, the contrast between those surfaces is only about 1.07:1. That small difference can be used decoratively when spacing and headings already make the card structure clear. However, if a boundary itself is needed to identify a component such as an input field, do not rely on such a subtle gray difference.

For example, a white input ■#FFFFFF with a gray border ■#8A8A8A has about 3.45:1 contrast against the white interior and about 3.22:1 against the page background ■#F7F7F7. WCAG non-text contrast requires at least 3:1 against adjacent colors for visual information needed to identify certain UI components or states.

Keep very light borders decorative and preserve stronger contrast for controls and text

Light gray ■#D6D6D6 against white ■#FFFFFF has a contrast ratio of about 1.45:1. It can work as a decorative divider when the content remains understandable without that line, but it should not be the only cue used to identify an input or selected state. For required boundaries, use a darker gray and reinforce the difference with border weight, icons, labels, or other visible cues.

For the primary CTA (Call to Action, the main button that leads to an inquiry or sign-up), dark gray ■#333333 with white text ■#FFFFFF provides about 12.63:1 contrast. A gray-centered interface can therefore create hierarchy without adding more hues when background, primary text, supporting text, decorative lines, required boundaries, and primary actions each receive a distinct role.

HueRoll shows values such as HEX and HSL, along with tints, shades, other palette suggestions, and the selected color’s contrast against white and black. It does not compare two arbitrary custom colors or automatically report WCAG AA or AAA conformance. After assigning gray levels, check the actual adjacent text, background, and border color pairs separately.