Choosing Accessible Color Contrast

Why Color Contrast Matters

Text that is too close in brightness to its background is hard to read for everyone, and unreadable for many people with low vision or color blindness. Sufficient contrast is one of the most common accessibility issues found on real websites, and one of the easiest to fix.

WCAG Contrast Ratio Guidelines

The ratio is a comparison between the relative brightness of the text color and its background - it is not simply "how different the colors look" by eye, which is why checking with a tool is more reliable than judging visually.

Common Contrast Mistakes

• Light gray text on a white background - a very common but frequently failing combination.
• Placing colored text directly on a busy background image without a solid overlay behind it.
• Using color alone to convey meaning (like red vs. green status dots) with no additional icon or label for people who cannot distinguish the colors.

Practical Ways to Fix Contrast Issues

/* Fails AA on white: roughly 2.8:1 */
.text-light { color: #a0a0a0; }

/* Passes AA on white: roughly 4.6:1 */
.text-fixed { color: #6b6b6b; }

In an oklch() or HSL-based color system, adjusting the lightness channel down slightly is often enough to pass a contrast check while keeping the same hue.

How to Test Contrast

Browser developer tools typically show a contrast ratio directly in the color picker for any element's computed style, flagging whether it passes AA or the stricter AAA level. Testing real color pairs before shipping is far more reliable than estimating by eye.