Contrast Ratio

title: "Understanding Contrast Ratio" weight: 12 description: "Learn how contrast ratio is calculated from relative luminance, the formula defined by WCAG, how to compute it manually or programmatically, and how to interpret the ratio values." date: 2026-06-28 lastmod: 2026-06-28 tags: [accessibility, color-contrast]

Contrast ratio is calculated by comparing the relative luminance of two colors using the formula (L1 + 0.05) divided by (L2 + 0.05), where L1 is the lighter color and L2 is the darker color, producing a ratio like 4.5:1 that defines WCAG compliance.

## What You'll Learn

You will understand the relative luminance formula, calculate contrast ratios manually, interpret ratio values, and recognize how different color values affect the result.

## Why It Matters

Understanding the math behind contrast helps you predict which color combinations will pass WCAG requirements without needing a tool. It also helps when working with brand colors that must meet accessibility standards.

## Real-World Use

A brand designer specifies a new primary color (#0066cc). Using the contrast formula, the developer calculates it against white (#ffffff) and gets 4.7:1 -- passing AA for normal text. They also check against black and find 2.1:1 -- failing. They document that this color should only be used on white or light backgrounds.

## Contrast Calculation Flow

```mermaid
flowchart TD
  A[Color Hex] --> B[Convert to sRGB]
  B --> C[Apply Gamma Correction]
  C --> D[Calculate Relative Luminance]
  D --> E[Compare Two Colors]
  E --> F[Apply Formula]
  F --> G[Get Ratio]

Calculating Contrast

The calculation involves three steps: convert hex to sRGB, apply gamma correction to get relative luminance, then compare two luminance values.

<!-- Visual example of contrast ratios -->
<div style="background: #ffffff; padding: 1rem;">
  <p style="color: #333;">12.6:1 - AAA pass (normal text)</p>
  <p style="color: #666;">4.6:1 - AA pass (normal text)</p>
  <p style="color: #999;">2.8:1 - FAIL AA (normal text)</p>
  <p style="color: #ccc;">1.6:1 - FAIL AA (any text)</p>
</div>

/* Contrast ratio examples */
.ratio-aaa { color: #1a1a1a; } /* ~14:1 against white */
.ratio-aa { color: #555555; } /* ~5.1:1 against white */
.ratio-fail { color: #aaaaaa; } /* ~2.4:1 against white */

// Full contrast calculation
function hexToRgb(hex) {
  const r = parseInt(hex.slice(1, 3), 16);
  const g = parseInt(hex.slice(3, 5), 16);
  const b = parseInt(hex.slice(5, 7), 16);
  return [r, g, b];
}

function getLuminance(hex) {
  const [r, g, b] = hexToRgb(hex);
  const vals = [r, g, b].map(c => {
    const s = c / 255;
    return s <= 0.03928
      ? s / 12.92
      : Math.pow((s + 0.055) / 1.055, 2.4);
  });
  return 0.2126 * vals[0] + 0.7152 * vals[1] + 0.0722 * vals[2];
}

function contrastRatio(hex1, hex2) {
  const l1 = getLuminance(hex1);
  const l2 = getLuminance(hex2);
  const lighter = Math.max(l1, l2);
  const darker = Math.min(l1, l2);
  return (lighter + 0.05) / (darker + 0.05);
}

console.log(contrastRatio('#333', '#fff')); // 12.63
console.log(contrastRatio('#999', '#fff')); // 2.80

Common Mistakes

• Confusing color brightness with contrast ratio
• Forgetting that the formula uses relative luminance, not hex values
• Calculating contrast with the darker color as numerator
• Not accounting for alpha transparency in colors
• Using the wrong gamma correction formula
• Assuming similar brightness means sufficient contrast
• Ignoring the impact of font weight on large text exemption

Practice and Challenge

Practice 1: Calculate the contrast ratio for #000 on #fff manually. Practice 2: Write a function that returns true if a color pair passes AA. Practice 3: Find a color that has exactly 4.5:1 contrast against white. Practice 4: Calculate the luminance of #ff0000 (pure red). Practice 5: Determine which of two colors is lighter using luminance.

Challenge: Create a color palette analyzer that accepts an array of hex colors, computes contrast ratios for every pair, and outputs a matrix showing which pairs pass AA normal, AA large, and AAA. Highlight pairs that fail.

FAQ

Mini Project

Build a contrast calculator web page that accepts two hex colors, displays the colors as swatches, computes the contrast ratio, shows the relative luminance of each color, and indicates whether the pair passes WCAG AA and AAA for both normal and large text.

What's Next

WCAG Contrast Requirements covers the specific WCAG success criteria for contrast.