Readable colors, unreadable colors (contrast)

Light gray text is elegant and stylish. But in bright sunlight, or to eyes with declining vision, it simply can’t be read. The difference in brightness between text color and background color is called contrast, and securing it is the foundation of a “readable page.”

Let’s compare

Here’s the same sentence, side by side, with only the contrast changed.

You may be able to read it, but under different conditions someone else can’t. So we check with numbers, not by feel.

The browser calculates it for you

Chrome’s developer tools tell you the contrast ratio right on the spot.

1. Right-click on the text → “Inspect”
2. Click the color square next to color in the Styles panel
3. The Contrast ratio appears in the color picker that opens (a ✓ means it passes)

The picker also draws a curve showing that any color below the line passes, so you can pick a new color while staying on the passing side.

For text over a photo, lay down a “band”

A white title over a hero image—cool, but a photo has both bright and dark areas, so depending on the spot it’s readable or not. The classic fix is to lay a semi-transparent band under the text.

.hero-title {
  color: #fff;
  background: rgba(0, 0, 0, 0.55);  /* semi-transparent black band */
  padding: 8px 16px;
}

With a band, no matter which part of the photo the text overlaps, the background darkness holds and the contrast stays stable. You could also darken the whole photo a little, but this band is the easiest place to start.

Don’t rely on color “alone”

Alongside contrast, another iron rule is to not convey information by color alone. About 1 in 20 men worldwide has trouble telling colors apart.

• ❌ “Red items are required”—if you can’t distinguish the color, you can’t tell
• ○ “Items marked *Required are required”—understandable even if you can’t see the color

Making errors red is fine. Just don’t make them red only—add an icon or wording too. Remember it as “color for emphasis, meaning in text.”

Distinguishing the lines of a graph by color alone is dangerous for the same reason. Just adding one cue other than color—using solid and dashed lines, writing the name near the line—turns it into a chart that gets across to anyone.

Summary of this lesson

1. The difference between text and background is a contrast ratio of 4.5:1 or higher at the passing line
2. The developer tools’ color picker calculates the number for you (don’t decide by feel)
3. Keep color to emphasis, and convey meaning with text or icons too