Color Contrast Checker

Contrast ratio 21:1: AA passes for normal text.

How it works

• Converted each color to its linearised sRGB channels.
• Computed the WCAG relative luminance (0.2126 R + 0.7152 G + 0.0722 B).
• Divided the lighter luminance plus 0.05 by the darker plus 0.05 for the ratio.

• WCAG 2.1 thresholds: 4.5:1 for normal AA text, 3:1 for large AA text (≥18.66px bold or ≥24px), 7:1 for normal AAA and 4.5:1 for large AAA.
• The ratio is symmetric: swapping the two colors does not change it.

Methodology

1. Parse each color as 3- or 6-digit hex.
2. Compute WCAG relative luminance from the linearised sRGB channels.
3. Return (lighter + 0.05) / (darker + 0.05) rounded to three decimals and the AA/AAA thresholds.

Usage

1. Enter the foreground color as a hex value.
2. Enter the background color as a hex value.
3. Read the contrast ratio and the AA/AAA passes.

Examples

These are examples, not current values: they use fixed inputs, while the interactive tool computes live results in your browser.

Maximum contrast

{
  "foreground": "#000000",
  "background": "#ffffff"
}

AA at the limit

{
  "foreground": "#767676",
  "background": "#ffffff"
}

Low contrast

{
  "foreground": "#cccccc",
  "background": "#ffffff"
}

Limitations

Why 4.5:1

WCAG's contrast-minimum rule (1.4.3, AA) requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. The enhanced rule (1.4.6, AAA) raises these to 7:1 and 4.5:1.

The ratio is derived from relative luminance, so it accounts for how the eye perceives red, green and blue differently. A ratio near 1 means the colors look the same; 21 is the maximum (black on white).