Web Color Contrast & Accessibility (WCAG Ratios & Colorblind Considerations)

Last updated: 2026-06-25

Why color contrast matters

The most common accessibility problem on websites is "the text is hard to read." Light gray text on a white background may look sleek, but it becomes hard to read for low-vision users, people viewing a screen in sunlight, or those on older monitors. Color contrast is not just an aesthetic choice — it is the foundation of readability that makes content legible to everyone.

The international standard WCAG (Web Content Accessibility Guidelines) defines this readability as a measurable number: the luminance contrast ratio between text color and background color. Many national accessibility standards follow the same contrast criteria, so it is useful to know across both public and private sectors.

What is contrast ratio and how is it calculated

Contrast ratio expresses the brightness difference between two colors as a ratio from 1:1 to 21:1. Identical colors are 1:1, and pure black against pure white reaches the maximum of 21:1. The calculation has two steps.

• Relative luminance — Convert each color's R, G, B values from sRGB gamma to linear values, then take a weighted sum tuned to human eye sensitivity (0.2126·R + 0.7152·G + 0.0722·B). The eye is most sensitive to green, so G has the largest weight.
• Contrast ratio formula — Compute both colors' luminance, then divide: (lighter luminance + 0.05) / (darker luminance + 0.05). Adding 0.05 compensates for ambient light reflecting off the screen.

Doing this by hand is tedious. Enter a foreground and background color into the contrast checker to see the ratio and grade pass status instantly.

WCAG 2.1 contrast criteria, summarized

WCAG divides conformance into levels A, AA, and AAA. For contrast, AA is usually the practical minimum, and AAA is the target when higher accessibility is needed. The fact that criteria change with text size is important.

Here "large text" means roughly 24px (18pt) or larger, or 18.66px (14pt) or larger when bold. Large text has thicker strokes and reads more easily at the same contrast, so the threshold is relaxed. Non-text elements like button borders, input outlines, icons, and chart lines and bars must also meet the 3:1 threshold so users can perceive their presence and state.

Don't rely on color alone

Meeting contrast does not finish accessibility. Another core WCAG principle is "do not use color as the only means of conveying information." Color vision deficiency (color blindness) affects about 8% of men and 0.5% of women worldwide. To them, information distinguished by red and green alone can look nearly the same color.

For example, if a form marks error fields only with a red border, red-green colorblind users struggle to tell which field is wrong. The fix is simple: add a text message ("Email format is invalid") along with the color, a warning icon, and an underline or pattern, so the information comes through even without seeing the color. In charts, prefer dashed/solid lines, marker shapes, and direct labels over differing line colors alone.

Understanding types of color blindness

Color vision deficiency occurs when some of the retina's cone cells are missing or weakened. The most common red-green deficiency makes reds and greens hard to distinguish, while the rarer blue-yellow deficiency affects blues and yellows. If your design relies on these color pairs, it is wise to verify the conversion results with the colorblind simulator.

The countermeasure effective for all types is ultimately to secure sufficient luminance contrast. If hues differ but brightness is similar, they look almost identical under color vision deficiency; but with a large brightness difference, users can read the shapes and text even without distinguishing color.

The order for choosing colors in practice

To pick colors that are both accessible and attractive, we recommend this order.

• 1. Build the palette — Use the color palette generator to set primary, secondary, and accent colors. Usually one primary, one or two secondary, and one accent is enough.
• 2. Verify contrast — Check body, button, and link colors over the background with the contrast checker to meet at least AA (4.5:1).
• 3. Review for color blindness — For screens that distinguish state or category by color, convert with the colorblind simulator to confirm distinction is preserved.
• 4. Add non-color cues — Add text, icons, and patterns where meaning is conveyed by color alone.

Summary

• Contrast ratio is (lighter + 0.05) / (darker + 0.05), ranging from 1:1 to 21:1.
• Body text meets AA 4.5:1, AAA 7:1 / large text meets AA 3:1, AAA 4.5:1 / non-text elements meet 3:1.
• Don't distinguish information by color alone; pair it with text, icons, and patterns.
• To account for color blindness, securing ample luminance contrast is the most reliable approach.

Last updated: 2026-06-25