Color Contrast Checker — WCAG AA/AAA Compliance, Free Online
Check color contrast between text and background colors. Shows WCAG AA and AAA compliance (normal and large text). Instant visual preview with the color pair. Free, no signup.
Last updated:
CommentsPick text and background colors to check WCAG AA/AAA contrast compliance. Live visual preview shows the color pair in context.
The quick brown fox jumps over the lazy dog.
Contrast Ratio
12.63:1
WCAG AA
Normal: ✓ Pass (4.5:1)
Large: ✓ Pass (3:1)
WCAG AAA
Normal: ✓ Pass (7:1)
Large: ✓ Pass (4.5:1)
What is Contrast Checker?
Color contrast is the single most impactful accessibility fix for websites. WCAG 2.1 defines minimum contrast ratios: 4.5:1 for normal text (AA), 7:1 for enhanced contrast (AAA), and lower thresholds for large text. This checker calculates the relative luminance per the WCAG formula, displays the exact contrast ratio, and shows pass/fail for all four criteria (AA Normal, AA Large, AAA Normal, AAA Large).
How to check color contrast
- 1Enter a text color (hex) and background color.
- 2The ratio and WCAG compliance results appear immediately.
- 3The preview shows the color pair as it would render on a page.
Frequently Asked Questions
What contrast ratio is WCAG AA?
WCAG AA requires 4.5:1 for normal text and 3:1 for large text (≥18pt or ≥14pt bold). AAA requires 7:1 and 4.5:1 respectively. Our checker shows pass/fail for all four criteria.
What is a contrast ratio?
Contrast ratio measures the difference in luminance between text and background colors. A ratio of 1:1 means identical colors (invisible text). Higher ratios mean greater contrast. #000 on #fff is 21:1 — the maximum possible.
How is the contrast ratio calculated?
It follows the WCAG 2.1 formula: relative luminance of the lighter color + 0.05 divided by relative luminance of the darker color + 0.05. Relative luminance is a weighted sum of sRGB values after gamma correction.
Try Next
Meta Tag Preview
Preview how your page will appear in Google search results and social share cards on Facebook, Twitter/X, and LinkedIn. Parses <title>, meta description, canonical, and full Open Graph / Twitter Card tags with diagnostics. 100% local.
Related Tools
HTTP Status Codes
Complete reference of HTTP status codes with meanings, use cases, and RFC citations. Search 60+ codes from 100 Continue to 511 Network Authentication Required.
cURL Converter
Convert cURL commands to Python (requests), JavaScript (fetch), Node.js, Go (net/http), PHP, or Java (HttpClient). Parses -H, -d, --data-urlencode, -F, -u, --json and more. 100% local.
URL Parser
Parse any URL into scheme, host, port, path, and query parameters — or build a URL from scratch with a form. Great for debugging redirect chains, tracking pixels, and OAuth flows. 100% local.
CIDR Calculator
Calculate IPv4 subnets from CIDR notation online. Get network address, broadcast, netmask, wildcard, usable host range, IP class, and binary representation. 100% local — nothing leaves your browser.
Color Converter
Convert colors between HEX, RGB, HSL, and HSV instantly with a live color preview and copy-ready CSS strings. Free, no signup, runs entirely in your browser.
User Agent Parser
Parse User-Agent strings to identify browser, engine, operating system, and device. Instantly see what your own browser sends.