Last year I redesigned a client's landing page with a beautiful light-gray-on-white color scheme. It looked elegant on my retina display. Then the client called and said half his customers couldn't read it. That was my wake-up call about color contrast and accessibility.
What Is a Contrast Ratio?
A contrast ratio is a number that describes how much two colors differ in perceived brightness. It ranges from 1:1 (no contrast at all, like white on white) to 21:1 (maximum contrast, black on white). The Web Content Accessibility Guidelines, known as WCAG, define specific thresholds that your text needs to meet.
The calculation itself involves the relative luminance of both colors. Relative luminance isn't the same as how "light" a color looks to you on screen. It accounts for how human eyes perceive different wavelengths. Green light appears brighter to us than blue light of the same intensity, so the formula weights the RGB channels differently. You don't need to memorize the math, but understanding that the ratio is based on human perception rather than raw pixel values helps explain why some color combinations fail that intuitively seem "fine."
WCAG Levels: AA vs AAA
WCAG defines two conformance levels for contrast. Level AA is the minimum you should aim for, and many legal accessibility requirements reference this standard. Level AAA is stricter and represents an enhanced level of accessibility.
| Text Type | AA Minimum | AAA Enhanced |
|---|---|---|
| Normal text (under 18px) | 4.5:1 | 7:1 |
| Large text (18px+ or 14px+ bold) | 3:1 | 4.5:1 |
| UI components & icons | 3:1 | Not defined |
In my experience, targeting AA compliance is realistic for most projects. AAA is aspirational and extremely valuable for content-heavy sites like government portals or educational platforms where readability is paramount.
Colors That Seem Fine But Aren't
This is the trap that catches most designers. Light blue text on a white background looks perfectly readable on a high-quality monitor in good lighting. But put that same page on a cheap laptop screen in a sunlit room, and the text vanishes. People with low vision or color vision deficiencies face this problem constantly, even on good screens.
Some notorious offenders I've encountered: placeholder text that's too light to read, "disabled" buttons with gray-on-gray text that users can't distinguish from the background, and trendy pastel color schemes that prioritize aesthetics over readability. The fix is usually straightforward once you know the problem exists. Darkening the text color by a few shades often achieves AA compliance without ruining the visual design.
Designing for Color Vision Deficiency
About 8% of men and 0.5% of women have some form of color vision deficiency. The most common type, deuteranopia, makes it difficult to distinguish between red and green. This has practical implications beyond contrast ratios. If your form validation uses only color to indicate errors (red border for invalid, green for valid), roughly one in twelve male users may not see the difference.
I've found that the most effective approach is to never rely on color alone to convey information. Add icons, labels, or patterns alongside color indicators. An error state can use a red border plus an exclamation mark icon plus the text "Invalid input." That way, no matter what someone's color perception is like, the message gets through.
Practical Tips for Accessible Color Palettes
Building an accessible palette doesn't mean abandoning your brand colors. It means being intentional about where and how you use them. Start with your primary brand color and find text and background pairings that meet the AA threshold. Use your brand color for large headings or accent elements where the 3:1 large-text ratio applies, and use higher-contrast neutrals for body text.
Dark mode deserves special attention. I've seen many dark themes that simply invert the light theme colors, which often produces contrast ratios that are actually worse than the original. Pure white text on a pure black background technically has maximum contrast, but it can cause eye strain for some users. Slightly off-white text on dark gray backgrounds, something like #E0E0E0 on #1A1A2E, tends to work well and feel comfortable for extended reading.
Test your designs in grayscale. If the visual hierarchy disappears when you remove color, your contrast isn't strong enough. This is a quick sanity check that catches problems early in the design process.
Why This Matters Beyond Compliance
Accessibility isn't just about meeting legal requirements, though those are real and growing. Accessible design benefits everyone. Good contrast helps users reading in bright sunlight. It helps older users whose vision has changed. It helps anyone who's tired and squinting at a screen at midnight. When I started designing with accessibility in mind, I noticed that the overall quality of my work improved because I was thinking more carefully about hierarchy, clarity, and purpose.
Checking contrast ratios takes seconds with the right tools and can be built into your design workflow from the very beginning, long before any code is written. It's one of those small habits that compounds into a significantly better product.