Contrast Checker
Check WCAG contrast ratios between foreground and background colors
Check WCAG contrast ratios between foreground and background colors
Large sample text
The quick brown fox jumps over the lazy dog. This is a body sample of text to preview your chosen foreground against the background.
/* Contrast: 2.49:1 — Fails WCAG */
color: #ffffff;
background: #14b8a6;The Web Content Accessibility Guidelines (WCAG 2.1) define minimum contrast ratios that text must meet to be readable by people with low vision. The ratio is calculated from the relative luminance of each color — a weighted combination of linearized red, green, and blue values that approximates how bright the color appears to the human eye.
18pt (24px) or larger, or 14pt (18.66px) bold or larger.Contrast ratio is a heuristic. A white-on-pure-yellow combination passes some thresholds but is painful to read; a perceptually-tuned pair in OKLCH can feel more readable than a numerically higher-ratio pair in sRGB. Treat the ratio as a floor, not a finish line — test real content at real sizes on real screens, ideally with a user who relies on high contrast.