Contrast Ratio

That #9E9E9E caption looks fine to you. On white it's 2.7:1. WCAG AA asks for 4.5:1. Low-vision readers see mud. Everyone else reads slower.

The Principle

ContrastContrast ratio is a numerical measure of luminance difference between foreground and background colors, expressed as X:1. WCAG calculates it from relative luminance values. is the difference in luminanceThe perceived brightness of a color, independent of hue. WCAG contrast ratios are calculated from relative luminance. between foreground and background. WCAGWeb Content Accessibility Guidelines: technical standards for accessible web content, including minimum text contrast ratios. sets minimum ratios so text stays readable across screens and lighting.

The Rule I Follow

For body text, I aim for at least 7:1 whenever possible. 4.5:1 passes WCAG AA. Higher contrast is more comfortable for extended reading.

For large text, I'll go as low as 3:1. The size carries some of the load.

For secondary text, I still target 4.5:1 when the information matters. If someone squints, it's too light.

Try It Yourself

Drag the lightness slider and notice when the paragraph stops feeling like work.

Pick any foreground and background pair to see the WCAG ratio calculate live.

The Mistake I'd Avoid

Using reduced-opacity text because it looks minimal. Minimal isn't the same as readable.

Remember This

People shouldn't notice your contrast. They should notice your content.

:root {
--color-text-primary: #1a1a1a; /* aim for 7:1 on white when possible */
--color-text-secondary: #595959; /* minimum 4.5:1 for body text */
}

:root {
--color-text-primary: #1a1a1a; /* aim for 7:1 on white when possible */
--color-text-secondary: #595959; /* minimum 4.5:1 for body text */
}