Color Contrast Checker
Check the WCAG contrast ratio between two hex colors and see whether the pair passes AA and AAA accessibility standards.
How to use this tool
- Enter the foreground (text) color and the background color as hex codes.
- The tool computes the WCAG relative luminance of each color.
- Read the contrast ratio and Pass/Fail results for AA and AAA thresholds.
Check whether two colors meet WCAG 2.1 contrast requirements. Minimum ratio is 4.5:1 for normal text (AA) and 7:1 for the highest AAA standard.
Formula
For each hex color, compute relative luminance L using the WCAG formula:L = 0.2126 × lin(R) + 0.7152 × lin(G) + 0.0722 × lin(B)
where lin(c) = c/12.92 if c ≤ 0.03928, else lin(c) = ((c + 0.055)/1.055)2.4.
Contrast ratio: ratio = (Llighter + 0.05) / (Ldarker + 0.05)
WCAG thresholds: AA normal text ≥ 4.5:1; AA large text ≥ 3.0:1; AAA normal text ≥ 7.0:1; AAA large text ≥ 4.5:1.
How it works
The WCAG (Web Content Accessibility Guidelines) contrast ratio measures the perceptual difference in brightness between a foreground and background color. Each hex color is first linearized — gamma-corrected screen values are converted to physical light intensity — then combined into a single relative luminance value using the human eye's known sensitivity to red, green, and blue light (roughly 21%, 72%, and 7%). The 0.05 offset in the ratio formula prevents division by zero for pure black and keeps the scale anchored at 1:1 for identical colors.
A common mistake is computing contrast from raw RGB byte values or from HSL lightness without first applying the piecewise gamma linearization step — this can make dark colors appear to have higher contrast than they actually do, causing designs to fail WCAG audits in practice even when they look compliant on paper.
Worked example
Contrast ratio: white (#ffffff) on black (#000000)
- White luminance: all channels are 1.0 after normalization; lin(1.0) = ((1.055)/1.055)^2.4 = 1.0; L(white) = 0.2126 + 0.7152 + 0.0722 = 1.0.
- Black luminance: all channels are 0; lin(0) = 0; L(black) = 0.
- ratio = (1.0 + 0.05) / (0.0 + 0.05) = 1.05 / 0.05 = 21.
- 21 ≥ 7.0 → AAA pass; 21 ≥ 4.5 → AA pass for normal and large text.
21:1 — Pass AA Normal, Pass AA Large, Pass AAA Normal, Pass AAA Large
Common mistakes to avoid
- Testing only the main text color against background and ignoring placeholder text, link colors, or disabled-state text, which must also pass WCAG AA.
- Assuming large-text AA (3:1) applies when the font is 18px bold -- WCAG defines large text as 18pt (24px) normal or 14pt (18.67px) bold; smaller bold text requires the standard 4.5:1 ratio.
- Using approximate hex values from a screenshot instead of the actual CSS color -- even a 1-digit hex difference can shift luminance enough to flip a borderline pair from pass to fail.
Key terms
- WCAG
- Web Content Accessibility Guidelines — the international standard published by the W3C that defines minimum contrast ratios and other requirements for accessible web content.
- Relative luminance
- A perceptually weighted measure of a color's brightness on a 0–1 scale, derived from linearized RGB values using the human eye's sensitivity to each wavelength.
- Gamma linearization
- The process of converting a gamma-encoded screen color value (sRGB) back to a linear light intensity, required before computing physically meaningful luminance.
- AA vs AAA
- WCAG conformance levels: AA (minimum) requires 4.5:1 for normal text and 3:1 for large text; AAA (enhanced) requires 7:1 and 4.5:1 respectively.
Frequently asked questions
- What is WCAG contrast ratio?
- WCAG (Web Content Accessibility Guidelines) defines a contrast ratio formula. It ranges from 1:1 (no contrast) to 21:1 (black on white). Normal body text requires at least 4.5:1 for AA compliance.
- What counts as large text?
- Large text is 18pt (24px) or larger, or 14pt bold (roughly 19px bold). Large text only needs a 3:1 ratio for AA.