Color Contrast Checker
Enter two colors and check WCAG AA/AAA contrast ratios. Live preview of text on background with pass/fail badges.
Heading Preview (24px Bold)
This is normal body text at 16px. The quick brown fox jumps over the lazy dog. Good contrast ensures your content is readable by everyone, including people with low vision or color blindness.
This is smaller text at 14px. WCAG AA requires at least 4.5:1 for normal text and 3:1 for large text. AAA requires 7:1 for normal and 4.5:1 for large text.
color: #1a1a1a; background-color: #ffffff; /* Contrast ratio: 17.40:1 */
Contrast ratio is calculated using the WCAG 2.1 relative luminance formula. AA compliance requires 4.5:1 for normal text and 3:1 for large text. AAA requires 7:1 and 4.5:1 respectively.
How to Use Color Contrast Checker
- 1
Enter foreground color
Type or pick the text color you want to check.
- 2
Enter background color
Type or pick the background color to test against.
- 3
Check WCAG compliance
See the contrast ratio and whether it passes AA or AAA standards.
Related Tools
Email Signature Generator
Create professional HTML email signatures with logos, social links, and custom styling.
Email HTML Previewer
Paste HTML email code and preview it in simulated email client frames (Gmail, Outlook, Apple Mail). Responsive test.
QR Code Business Card
Fill in vCard fields and generate a QR code plus styled digital business card. Download both as images.
Readability Score Checker
Analyze text readability using Flesch-Kincaid, Gunning Fog, and other scoring methods.
HTML Email Builder
Visual drag-and-drop email template builder. Add sections, images, buttons, and export clean HTML code.
Schema.org Markup Generator
Generate JSON-LD structured data markup for articles, products, events, and more.