Color Contrast Checker
Test foreground/background combinations against WCAG 2.1 AA and AAA standards.
Foreground (Text)
rgb(26, 26, 46) · hsl(240, 28%, 14%)
Background
rgb(255, 255, 255) · hsl(0, 0%, 100%)
Contrast Ratio
17.06:1
AAA - Excellent
WCAG 2.1 Compliance
Live Preview
Large Heading Text (18pt Bold)
Normal body text at 16px. The quick brown fox jumps over the lazy dog. Good typography ensures readability for all users.
Small text at 14px - used for captions, labels, and secondary content.
How to Use the Color Contrast Checker
- 1.Enter your foreground (text) color using the color picker or by typing a HEX code directly.
- 2.Enter your background color the same way, or click one of the preset swatches for common values.
- 3.The contrast ratio and WCAG pass/fail badges update instantly as you adjust the colors.
- 4.If you fail AA, check the suggested color — it's a neutral tone that passes with your background.
- 5.Use the "Copy Shareable Link" button to send the exact color pair to a teammate for review.
What is WCAG Color Contrast?
WCAG (Web Content Accessibility Guidelines) defines minimum contrast ratios between foreground text and its background to ensure readability for people with low vision. The contrast ratio is calculated from the relative luminance of both colors — a value derived from the linearized RGB channels weighted by how the human eye perceives brightness.
WCAG 2.1 defines two conformance levels. Level AA (the legal minimum in most countries) requires a contrast ratio of 4.5:1 for normal text and 3:1 for large text (18pt or 14pt bold). Level AAA requires 7:1 and 4.5:1 respectively, and is targeted for particularly sensitive populations.
Beyond text, WCAG also covers UI components and graphical objects — buttons, form borders, chart axes — which require a minimum 3:1 contrast against adjacent colors. Ignoring contrast requirements excludes roughly 300 million people worldwide with color vision deficiency, and exposes organizations to legal risk under ADA, EN 301 549, and similar laws.
Frequently Asked Questions
What is a good contrast ratio for body text?
4.5:1 is the WCAG AA minimum for normal-sized body text. In practice, ratios above 7:1 are easier to read for everyone, not just those with low vision. Black text on white has a contrast ratio of 21:1 — the maximum possible.
What counts as "large text" in WCAG?
WCAG defines large text as 18pt (24px) or larger at normal weight, or 14pt (approximately 18.67px) or larger when bold. Large text only needs to meet the 3:1 ratio, not 4.5:1.
Does contrast apply to placeholder text?
Yes. Placeholder text is real text from the user's perspective and must meet the same 4.5:1 minimum. Many designs fail here because placeholder text is intentionally muted — often falling well below the threshold.
My design looks fine — why does contrast matter?
Roughly 1 in 12 men and 1 in 200 women have some degree of color vision deficiency. Low contrast also affects everyone in bright sunlight, on low-quality displays, or as they age. Good contrast is good design, not just a compliance checkbox.