Pure Black or Tinted Dark? Choosing UI Text Colors

Explore when a softer dark works better than #000000, and why readability depends on more than picking the darkest possible value.

Start with Contrast, Then Refine the Tone

Pure black (#000000) on white is a valid, highly legible choice. But a slightly softened dark can feel more at home in an interface with warm or cool neutrals. The right choice depends on the background, text size, and the product’s visual character.

The Contrast Problem

Pure black text on pure white (#FFFFFF) has a contrast ratio of 21:1. A tinted dark can still provide strong contrast while reducing the starkness of that pairing. Never assume a softer color is readable: check the resulting contrast against WCAG guidance for the actual text size and weight.

The Solution: Tinted Darks

Instead of reaching for the bottom-left corner of the color picker, move slightly up and add a touch of saturation.

1. Charcoal and Slate

A deep gray (#1C1C1E, #212529) often remains clearly readable on a light background while feeling softer than absolute black. Test the exact pairing before using it for small text.

2. Brand-Infused Neutrals

The best approach is to infuse your darks with your brand's primary color.

• If your brand color is blue, use a very dark navy (#0A192F).
• If your brand color is warm/orange, use a deep brown-gray (#2C2420).

This can give your neutrals a consistent tone with the rest of the palette. Keep enough contrast between text and background, especially for body copy and controls.

When TO Use Pure Black

Pure black is not a mistake. It may suit a high-contrast editorial layout or an OLED-focused dark mode, where black pixels can turn off. Choose deliberately, compare options on actual screens, and make legibility the priority.