Color and contrast — beyond 'looks nice'

Whether text is readable against its background isn't a matter of opinion — the WCAG (Web Content Accessibility Guidelines) define a precise, testable contrast ratio between text and background color, calculated from both colors' luminance. The commonly cited thresholds:

This is directly checkable with free tools (browser DevTools' accessibility panel, or dedicated contrast checkers) before shipping — there's no need to guess whether a specific gray-on-white combination is "readable enough," it's a number you can calculate and verify.

A very common real-world failure: styling secondary or "de-emphasized" text as a light gray on a white background, because it looks visually quieter — but light gray on white very often falls well below the 4.5:1 threshold, making that text measurably hard to read for a meaningful fraction of real users (older users, users with low vision, anyone in bright sunlight on a phone screen). "De-emphasized" and "illegible" are not the same design intent, even though the mistake that conflates them is extremely common.

A form that marks an invalid field only by turning its border red is unreadable to anyone with red-green color blindness (affecting a genuinely significant percentage of men specifically) — they see a border that changed somehow, but can't reliably tell if it's signaling an error or something else entirely. The fix is straightforward: pair color with a second, non-color signal — an icon, a text label, an underline pattern — so the meaning survives even for someone who can't distinguish the color difference at all.

A dark theme built by simply inverting every color (pure black background, pure white text) often produces harsh, high-contrast strain in low-light conditions specifically — the exact opposite of dark mode's actual intent, which is reduced eye strain in low light. A well-built dark theme typically uses a dark gray (not pure black) background and an off-white (not pure white) text color, deliberately choosing new colors for the dark theme rather than mechanically inverting the light one.

When color IS used to communicate meaning (a status badge, a chart), using it consistently matters — if red sometimes means "error" and sometimes just means "the brand's accent color used decoratively," a user can no longer trust what red signals anywhere in the product. Reserve specific meaningful colors (red for errors/danger, green for success, amber for warnings) for exactly those meanings, and keep purely decorative color choices visually distinct from them.