What Colors Go with Achromatic Colors? Color Pairings That Make the Most of White, Black, and Gray

Achromatic colors include white, black, and grays without any hue. Differences in lightness can establish a clear hierarchy with few colors. This example starts with white ■#FFFFFF and black ■#000000, then adds blue-tinted gray ■#646A70 for secondary text, blue-tinted light gray ■#F3F4F6 for supporting surfaces, and blue ■#0067C0 for accents. The two gray examples contain a slight blue tint; they accompany the achromatic foundation rather than being strictly achromatic themselves.

Add one accent color to make roles easier to distinguish

White ■#FFFFFF and black ■#000000 create a large lightness difference, while gray ■#646A70 can sit between them for secondary text or supporting information. Adding a single blue accent ■#0067C0 gives links, selected items, and other focused elements a role that would be harder to distinguish with achromatic colors alone.

Blue ■#0067C0 against white ■#FFFFFF has a contrast ratio (a measure of the relative brightness difference between foreground and background colors) of about 5.67:1. Gray ■#646A70 against white gives about 5.47:1. For normal-size text, choose combinations that provide at least 4.5:1 against the background.

On developer documentation, use white, black, and gray for information hierarchy

For an API or developer-documentation page, use ■#FFFFFF as the page background and ■#000000 for body text and primary headings. That pairing gives 21:1. Use ■#646A70 for update dates and metadata, which gives about 5.47:1 on white.

Code and command examples can use ■#000000 as the surface with ■#FFFFFF text for 21:1. Notes and supporting explanations can sit on ■#F3F4F6. Black text on that surface gives about 19.08:1, while gray ■#646A70 used for secondary text gives about 4.97:1.

Use blue ■#0067C0 for links and the currently selected tab. It gives about 5.67:1 on white and about 5.16:1 on light gray ■#F3F4F6. Do not rely on blue alone to show the selected tab; add an underline, heavier text, or another visible cue so color is not the only way the state is communicated.

WCAG (Web Content Accessibility Guidelines) 2.2 requires at least a 4.5:1 contrast ratio for normal-size text. It also requires that color not be the only visual means of conveying information, and that non-text information needed to identify controls or states provide at least 3:1 contrast against adjacent colors.

To make white, black, and gray work well, assign each color a fixed role

Blue ■#0067C0 against black ■#000000 has a contrast ratio of about 3.70:1. That can work for non-text information such as a boundary or state indicator when 3:1 is required, but it does not reach 4.5:1 for normal-size text. On a black code surface, keep the text white ■#FFFFFF and use blue for supporting borders or icons instead.

In a palette built around an achromatic foundation, assigning fixed roles—white for space and background, black for primary text, gray for secondary information, and the accent color for links or selected states—can create structure without relying on many colors. In HueRoll, you can enter colors such as ■#0067C0 and review complementary and analogous colors, palette suggestions, and the selected color’s contrast with white and black. HueRoll does not compare arbitrary color pairs or automatically judge WCAG AA or AAA conformance, so the two-color ratios shown in this article were calculated separately.