skip to content

In a dark palette, why do design systems usually choose dark gray surfaces and off-white text rather than pure black and pure white?

level: juniorimportance: should knowfreq 45%

answer

  1. 21:1 is not the goal
  2. glare on long reading
  3. room for shadows and lighter steps
  4. off-white still passes easily
  5. pure black is a trade-off

basics

~20 s

Pure white on pure black is the maximum 21:1, which many readers find glaring, and a black base hides shadows. Dark gray surfaces with off-white text still far exceed 4.5:1, read more calmly and leave room for depth.

solid answer

~50 s

Contrast has a floor, 4.5:1 for body text under WCAG 2.2 `1.4.3`, but more is not always better. Pure white on pure black is 21:1, the maximum, and many readers report glare or a halo around bright letters on long passages, often attributed to astigmatism. An off-white on a near-black gray still lands around 14:1, well past even the AAA 7:1, and reads more calmly. A dark gray base also keeps a faint shadow visible and lets raised surfaces step lighter, which a black base makes harder to read as depth. Off-white also gives room for text levels: primary, secondary and disabled can be distinct lighter grays that each still pass on their surfaces. A pure-black base remains a legitimate option in some contexts, such as media viewing or a power-saving variant for some display types, if its pairs are checked too.

go deeper

for a junior

Remember that the dark base is a dark gray and text is off-white, that this still passes comfortably, and that more contrast is not always better.

for a middle

Explain the reasons: glare and halation at 21:1, heavier-looking light text, room for text levels, and a base that lets shadows and lighter surfaces read as depth.

for a senior

Set text levels against the lightest surface each can appear on, and handle pure-black variants as deliberate, fully checked trade-offs.

for a principal

Decide whether the system offers one dark palette or several, weighing reading comfort, power-saving variants and the cost of checking every pair twice.

## Contrast has a floor, not a target WCAG 2.2 Success Criterion **1.4.3 Contrast (Minimum)** (Level AA) sets a minimum of **4.5:1** for body text and **3:1** for large-scale text; **1.4.6 Contrast (Enhanced)** (Level AAA) raises those to 7:1 and 4.5:1. There is no maximum. That does not make the maximum a good default. Pure white text on a pure black surface is **21:1**, the highest ratio the formula can produce, and for long reading it is often uncomfortable. Think of a public library catalog in dark mode. Readers scroll result lists, open a record, and read a long summary and subject notes. Those are exactly the passages where extreme contrast is most noticeable. ## Why off-white, not white - **Glare and halation.** Many readers, especially people with astigmatism, commonly report that bright white letters on black appear to bleed or halo, which makes long text tiring. Pulling text slightly off white reduces that without coming near the minimum. - **Light text looks heavier.** Light letters on a dark background tend to look bolder than the same letters dark on light; slightly dimmer text compensates. - **Room for hierarchy.** Starting below white lets the palette define several text levels that are each visibly distinct and each still pass. Example values on a near-black gray surface (#121212), computed with WCAG's formula: | Text level | Example color | Ratio on #121212 | |---|---|---| | Pure white (for comparison) | #FFFFFF | about 18.7:1 | | Primary text | #E0E0E0 | about 14.2:1 | | Secondary text | #A0A0A0 | about 7.2:1 | | Lowest body-text level | #8A8A8A | about 5.4:1 | (Pure white reaches 21:1 only against pure black; against this gray it is about 18.7:1.) Every row still clears 4.5:1 on this surface, but that is a property of this surface only: the same grays measure lower on lighter raised surfaces, which is why every pair is re-checked across the dark ramp. ## Why dark gray, not black 1. **Depth stays readable.** Shadows are nearly invisible on pure black; on a dark gray a soft shadow still shows faintly beneath a raised panel. 2. **Raised surfaces have a place to go.** Dark palettes commonly show elevation by making higher surfaces lighter. Starting from a dark gray gives a clear base those steps read against, and keeps the whole stack from feeling like holes in a black void. 3. **Softer transitions.** Large areas of pure black next to bright content exaggerate contrast at every edge; a dark gray tempers that. 4. **Brand and accent colors sit better.** Accents look less harsh against dark gray than against black. ## When pure black is a legitimate choice Pure black is not wrong in itself. Media-viewing contexts, such as a full-screen reader for scanned book pages, may want the surround to disappear. Some products also offer a pure-black variant for display types where black pixels use less power. These are deliberate trade-offs, and the same rule applies: every text and non-text pair is measured on the actual surface it sits on. ## Putting it into the palette - Pick the base surface first, as a dark gray, and build raised surfaces as lighter steps from it. - Define primary, secondary and disabled text as off-white levels, checked against the base and against the lightest surface they can appear on. - Keep pure white for rare, deliberate emphasis, if at all. - Record the ratios, so the next change to a surface triggers a re-check rather than a surprise. ## Common mistakes - Dimming text so far, for elegance, that secondary text drops under 4.5:1 on raised surfaces. - Using a single off-white for every level, which leaves no hierarchy between titles, metadata and hints. - Choosing a base so light that raised surfaces run out of room before they read as distinct. - Treating a pure-black variant as a free copy of the gray one instead of checking its own pairs. The principle is that a dark palette aims for comfortable, sufficient contrast, not maximum contrast, and it leaves itself room to express depth and hierarchy.

  • Does off-white text risk failing WCAG where pure white would pass?
    Only if it is pulled too far. A typical off-white on a near-black gray measures around 14:1, far above the 4.5:1 minimum. The risk appears with dimmer secondary text on lighter raised surfaces, which is why each level is checked against the lightest surface it can sit on.
  • Why does a dark gray base help show elevation compared with pure black?
    Dark palettes signal height by making higher surfaces lighter, and a soft shadow can still register on dark gray but vanishes on black. Starting from a gray keeps both cues available and makes the step from base to raised surface read as depth.

Reading a page under a bare, bright bulb versus a well-shaded lamp: both let you read, but one tires your eyes by page ten. Off-white on dark gray is the shaded lamp.

saying these in an interview costs you the question

  • Higher contrast is always better, so white on black is the ideal.
  • Off-white text fails WCAG because it is not pure white.
  • WCAG requires dark themes to use pure black for maximum contrast.
  • If primary text passes on the base, every text level passes everywhere.
  • Shadows work just as well on pure black as on light surfaces.