WCAG Color Contrast Checker

How the contrast checker works

Convert sRGB channels to linear-light values, combine them into relative luminance, identify the lighter and darker colors, and apply the WCAG contrast-ratio formula.

Check #10221d text on #fffefa

This dark green text on a warm near-white background produces a high contrast ratio that passes AA and AAA thresholds for normal and large text.

Copyable code examples

Use these examples as a starting point, then match the values and assumptions to the rendered project.

:root {
  --text: #10221d;
  --background: #fffefa;
}

body { color: var(--text); background: var(--background); }

const ratio = (lighter + 0.05) / (darker + 0.05);

Using the result accurately

Check every interactive state and actual text size and weight. Contrast is one accessibility requirement; readable typography, visible focus, non-color cues, and usable interaction remain necessary.

References: W3C Understanding WCAG 2.2: Contrast (Minimum).