Contrast & readability

Contrast ratio quantifies the luminance difference between two colors. It ranges from 1:1 (identical colors, invisible) to 21:1 (pure black on pure white, maximum). It's calculated from relative luminance, not from how 'different' the colors look to you.

Two vivid colors of similar brightness — say bright red on bright green — can have a contrast ratio as low as 1.5:1 despite looking completely different. That's why you must measure, not eyeball.

The WCAG (Web Content Accessibility Guidelines) define universal contrast benchmarks used across digital and print design. AA requires 4.5:1 for normal text and 3:1 for large text (≥18px or ≥14px bold). AAA raises this to 7:1 for normal text and 4.5:1 for large text.

AA is the practical and often legal standard. AAA is aspirational — aim for it on critical content, but don't sacrifice usability chasing it everywhere. These ratios apply to any medium where readability matters.

When a color pair fails contrast, you have three levers in HSL: darken the text (lower lightness), lighten the background (raise lightness), or both. Adjusting hue or saturation alone rarely fixes contrast because luminance depends primarily on lightness.

Start with the smallest change that passes AA. A 10-point lightness shift often does it. If adjusting breaks your palette's harmony, consider adding a dedicated high-contrast text color separate from your brand palette.