Color and Typography: Building Accessible Text That Everyone Can Read

Typography does not happen in a vacuum. Every character you set sits on a background, and the relationship between text color and background color determines whether the text is readable at all. The Web Content Accessibility Guidelines define specific contrast ratios that text must meet, and these ratios are not suggestions — they are the minimum threshold below which a significant portion of your audience simply cannot read your content. Understanding the intersection of color and typography is not optional for anyone who ships text to the web.

The WCAG Contrast Requirements

WCAG 2.1 defines two levels of contrast compliance. Level AA requires a contrast ratio of at least 4.5 to 1 for normal text and 3 to 1 for large text, defined as 18.66 pixels bold or 24 pixels regular. Level AAA raises the bar to 7 to 1 for normal text and 4.5 to 1 for large text. The ratio is calculated between the relative luminance of the foreground and background colors, using a formula that accounts for the nonlinear relationship between perceived brightness and actual light emission.

These numbers are not arbitrary. The 4.5 to 1 ratio was chosen to accommodate users with moderate low vision, which affects roughly 4 percent of the population. The 7 to 1 ratio accommodates users with more severe vision impairments. If your text does not meet the AA ratio, you are excluding a measurable segment of your audience from accessing your content. The Text Contrast Checker on this site will calculate the ratio for any foreground-background pair and tell you whether it passes.

Why Gray Text Fails

The most common accessibility failure on the web is low-contrast gray text. Designers choose gray because it feels refined and avoids the visual heaviness of pure black on white. But the visual refinement comes at a cost. A gray like 767676 on white produces a contrast ratio of approximately 4.5 to 1, which barely passes AA for normal text. A gray like 999999 on white produces a ratio of roughly 2.8 to 1, which fails even for large text. The text that looks elegant on the designer's calibrated monitor may be invisible to a reader with low vision on a dim laptop screen.

The fix is not to abandon gray entirely. It is to choose grays that meet the required ratio. For body text on a white background, the darkest gray that passes AA is approximately 767676. For a more comfortable reading experience that still feels lighter than black, try 595959, which produces a ratio of about 7 to 1 and passes AAA. The difference between 595959 and 999999 is the difference between text that everyone can read and text that excludes.

Color Blindness and Information Encoding

Approximately 8 percent of men and 0.5 percent of women have some form of color vision deficiency, with red-green color blindness being the most common. If your design uses color alone to convey information — red for errors, green for success, orange for warnings — that information is invisible to users who cannot distinguish those hues. The WCAG guideline 1.4.1 requires that color not be used as the only visual means of conveying information.

The practical fix is always to pair color with a secondary signal. An error state should be red and include an icon or text label. A success state should be green and include a checkmark. A chart should use color and pattern. This redundancy does not harm the experience for users with typical color vision; it simply makes the design resilient for everyone else.

Dark Mode Considerations

Dark mode inverts the contrast challenge. White text on a black background has the same mathematical contrast ratio as black text on white, but the perceptual result is different. Bright text on a dark background creates a halo effect called halation, especially for users with astigmatism, which affects roughly 30 percent of the population. The text appears to bleed into the background, reducing effective legibility.

The recommended approach for dark mode is not pure white on pure black. It is a slightly dimmed white, such as e0e0e0, on a dark but not pure black background, such as 121212. This reduces the luminance differential enough to minimize halation while still exceeding the WCAG contrast requirements. The Material Design dark theme specification and the Apple Human Interface Guidelines both recommend this approach, and it has become the de facto standard for accessible dark mode typography.

Testing Your Contrast

Manual contrast calculation is error-prone because the luminance formula is non-intuitive. A color that looks like it should have high contrast may not, and vice versa. Use an automated tool. The Text Contrast Checker on this site accepts any foreground and background color and returns the exact contrast ratio with pass/fail indicators for both AA and AAA at both normal and large text sizes.

For a comprehensive audit, use a browser extension like the WCAG Color Contrast Checker or the Accessibility Insights for Web tool. These extensions scan every text element on the page and flag any pair that falls below the required ratio. Run the audit on both light and dark themes, because a color pair that passes in one mode may fail in the other. The five minutes you spend on this audit can prevent an exclusion that affects millions of potential readers.

Beyond the Minimum

Meeting the WCAG minimum is necessary but not sufficient. A contrast ratio of exactly 4.5 to 1 passes AA, but text at that boundary is still harder to read than text at 7 to 1, especially in suboptimal viewing conditions — bright sunlight, a smudged screen, a reader who forgot their glasses. If you have the flexibility, aim for AAA contrast on body text. The reading experience will be better for everyone, not just users with vision impairments. Accessibility and good typography are not competing goals. They are the same goal, stated in different vocabularies.