Colors Contrast and Accessibility
WCAG accessibility guidelines require a minimum contrast ratio between text and its background so that people with low vision or color blindness can read it comfortably.
Why contrast matters
Text that barely differs in brightness from its background is hard to read for almost everyone, but the effect is far worse for people with low vision, aging eyesight, or color blindness, and for anyone viewing a screen in bright sunlight or on a low-quality display. Sufficient contrast is not a cosmetic nicety, it is one of the most basic requirements for content to actually be usable.
What a contrast ratio measures
A contrast ratio compares the relative luminance, the perceived brightness, of two colors and expresses it as a ratio from 1:1 up to 21:1. Identical colors produce 1:1, no contrast at all, while pure black text on a pure white background produces the maximum 21:1. The Web Content Accessibility Guidelines (WCAG) set minimum ratios that text must meet against its background to pass.
Checking contrast in CSS
<!DOCTYPE html>
<html>
<head>
<style>
/* Passes WCAG AA for normal text: roughly a 17:1 ratio */
p {
color: #1a1a1a;
background-color: #ffffff;
}
/* Fails WCAG AA for normal text: roughly a 2.8:1 ratio */
.low-contrast-warning {
color: #999999;
background-color: #ffffff;
}
</style>
</head>
<body>
<p>This text passes WCAG AA contrast.</p>
<p class="low-contrast-warning">This text fails WCAG AA contrast.</p>
</body>
</html>Color alone is not enough
Roughly 1 in 12 men and 1 in 200 women have some form of color blindness, most often difficulty telling red from green. If a design uses color as the only signal, red text for an error, green text for success, with no other difference, a meaningful share of visitors will miss the distinction entirely. Pair color with a second cue: an icon, an underline, bold weight, or the actual word "Error" or "Success."
- Run text and background pairs through a contrast checker before shipping, not after a complaint
- Add an icon, label, or pattern alongside any meaning conveyed by color alone
- Avoid gray-on-gray text; it often looks fine to the designer and fails for many users
- Test your palette in grayscale to catch places that rely only on hue to communicate
"Large text" gets a lower bar of 3:1 because bigger, bolder strokes stay legible at lower contrast. WCAG defines it as roughly 18pt (24px) at normal weight, or about 14pt (19px) at bold weight, and anything larger.
These same ratio rules apply no matter which color format built the palette, hex, rgb(), hsl(), or a named color all resolve to the same underlying luminance that the browser, and a contrast checker, measures.
Exercise: Colors Theory
On a traditional color wheel, where are complementary colors positioned relative to each other?
