Intro

title: "Introduction to Color Contrast" weight: 11 description: "Learn what color contrast is, why it matters for accessibility, how WCAG defines contrast requirements, and the impact of insufficient contrast on users with low vision and color deficiencies." date: 2026-06-28 lastmod: 2026-06-28 tags: [accessibility, color-contrast]

Color contrast measures the difference in perceived luminance between foreground text and its background, with WCAG requiring a minimum ratio of 4.5:1 for normal text to ensure readability for users with low vision or color vision deficiencies.

## What You'll Learn

You will understand color contrast fundamentals, WCAG contrast requirements, why contrast matters for accessibility, and how to start evaluating contrast in your designs.

## Why It Matters

One in 12 men has some form of color vision deficiency. Age-related vision loss reduces contrast sensitivity. If your text lacks sufficient contrast, a significant portion of your audience cannot read it.

## Real-World Use

A designer uses light gray text (#999) on white for secondary labels. A user with low vision cannot read the labels and abandons the signup form. The company loses a customer because of a contrast ratio that seemed acceptable to a designer with normal vision.

## Contrast Concepts

```mermaid
flowchart LR
  A[Color Contrast] --> B[Relative Luminance]
  A --> C[Contrast Ratio]
  B --> D[S RGB Values]
  C --> E[4.5:1 AA]
  C --> F[3:1 Large Text]
  C --> G[7:1 AAA]

Understanding Color Contrast

Color contrast is calculated from the relative luminance of two colors. The formula compares the lighter color's luminance to the darker color's luminance. The result is a ratio like 4.5:1 -- meaning the lighter color is 4.5 times brighter than the darker color.

<!-- Good contrast: passes AA -->
<p style="color: #333; background: #fff;">
  Dark gray text on white background. Contrast ratio approximately 12:1.
</p>

<!-- Poor contrast: fails AA -->
<p style="color: #bbb; background: #fff;">
  Light gray text on white background. Contrast ratio approximately 1.8:1.
</p>

/* Contrast-safe color palette */
:root {
  --text-primary: #1a1a1a;
  --text-secondary: #555555;
  --text-disabled: #999999;
  /* Check each against background: #ffffff */
  /* #1a1a1a: ~14:1 - AAA */
  /* #555555: ~5.1:1 - AA */
  /* #999999: ~2.8:1 - FAILS AA */
}

// Quick contrast check
function meetsAA(hexForeground, hexBackground, isLargeText) {
  const ratio = getContrastRatio(hexForeground, hexBackground);
  return isLargeText ? ratio >= 3 : ratio >= 4.5;
}

function getContrastRatio(fg, bg) {
  const l1 = getLuminance(fg);
  const l2 = getLuminance(bg);
  const lighter = Math.max(l1, l2);
  const darker = Math.min(l1, l2);
  return (lighter + 0.05) / (darker + 0.05);
}

Common Mistakes

• Assuming high contrast means good design
• Testing contrast only on the default state
• Using color alone to convey information
• Ignoring contrast for non-text elements
• Forgetting about placeholder text contrast
• Testing with the wrong background color
• Not considering opacity and alpha channels

Practice and Challenge

Practice 1: Calculate the contrast ratio of #333 on #fff. Practice 2: Determine if #666 on #fff meets AA for normal text. Practice 3: Find three color pairs that pass AA on your site. Practice 4: Identify one color pair that fails AA. Practice 5: Find a color that passes AA against both white and black.

Challenge: Create a contrast-safe color palette with 5 colors that all pass WCAG AA against white backgrounds. Include: primary text, secondary text, link color, error color, and success color. Document the exact hex values and contrast ratios.

FAQ

Mini Project

Build a contrast checker tool that accepts two hex color values, calculates the contrast ratio, and displays whether the pair passes WCAG AA (normal text), AA (large text), and AAA. Include color swatches showing the two colors side by side.

What's Next

Understanding Contrast Ratio covers the mathematics of contrast ratio calculation.