명도 대비율 (Contrast Ratio)

Contrast ratio is the mathematical relationship between the relative luminance of a foreground color (typically text) and its background color. It's the primary metric used by WCAG accessibility guidelines to determine whether text is readable by users with low vision or color perception differences, and it's expressed as a ratio from 1:1 (no contrast — same color) to 21:1 (maximum contrast — pure black on pure white).

The calculation isn't simply a matter of "how different are these colors?" — it uses relative luminance, which accounts for how human vision perceives brightness non-linearly. The formula applies gamma correction to RGB values before calculating the luminance ratio, which is why a medium gray feels much closer to white than the math of its RGB values would suggest.

WCAG Requirements:

In CSS terms, 18pt is approximately 24px, and 14pt bold is approximately 18.67px.

/* Passes AA (ratio ~7:1) */
body {
  color: #333333;
  background-color: #ffffff;
}

/* Passes AA for large text only (ratio ~3.1:1) */
h1 {
  color: #767676;  /* Barely passes 3:1 for large text */
  background: #ffffff;
  font-size: 2rem; /* Large text threshold */
}

/* Fails AA entirely (~2.3:1) */
.caption {
  color: #aaaaaa;
  background: #ffffff;
}

CSS custom properties make it easy to maintain a contrast-safe color palette:

:root {
  --text-primary: #212121;    /* 16.1:1 on white */
  --text-secondary: #595959;  /* 7.0:1 on white */
  --text-disabled: #9e9e9e;   /* 2.9:1 — use only for decorative/non-essential */
  --bg-primary: #ffffff;
  --bg-secondary: #f5f5f5;
}

Common mistakes:

The most frequent contrast failure is secondary or "muted" text — captions, labels, placeholder text — being set too light. Designers often want these to recede visually, pushing them toward light grays that fail accessibility thresholds. The solution is to distinguish hierarchy through size, weight, and spacing rather than by sacrificing contrast.

Placeholder text in form inputs is another common failure area:

/* Accessible placeholder (passes AA) */
::placeholder {
  color: #767676;  /* 4.54:1 on white */
}

Dark mode contrast requires separate consideration. Colors that pass on light backgrounds often fail on dark ones. Test both modes independently.

Tools for checking contrast: the WebAIM Contrast Checker, Chrome DevTools color picker (shows contrast ratio inline), Figma's built-in accessibility checker, and browser extensions like Axe or WAVE. The color-contrast() CSS function — available in modern browsers — can even calculate accessible colors programmatically, though browser support is still limited.

Contrast ratio is one of the most objectively measurable accessibility criteria. Unlike many accessibility considerations that require interpretation, contrast either passes or fails against a mathematical threshold — which makes it one of the easiest to audit and correct.