ZenovayTools

Color Contrast Checker

Check WCAG 2.1 color contrast ratios for text and backgrounds. Verify AA and AAA compliance for normal and large text.

How to Use Color Contrast Checker

  1. 1Enter your foreground (text) color as hex, RGB, or named color.
  2. 2Enter your background color.
  3. 3See the contrast ratio and WCAG 2.1 AA/AAA compliance for normal and large text.
  4. 4Adjust colors until your design meets accessibility requirements.
Zenovay

Track your website performance

Real-time analytics, session replay, heatmaps, and AI insights. 2-minute setup, privacy-first.

Try Zenovay Analytics — Free

Related Tools

JSON Formatter & ValidatorFormat, validate, and beautify JSON data with syntax highlighting and error detection.
JWT DecoderDecode and inspect JWT tokens. View header, payload, and verify signatures.
Base64 Encode/DecodeEncode text to Base64 or decode Base64 back to text. Supports UTF-8 and binary data.
URL Encode/DecodeEncode or decode URL components. Handle special characters, query strings, and full URLs.

Frequently Asked Questions

What is WCAG color contrast?▾
WCAG (Web Content Accessibility Guidelines) requires sufficient color contrast between text and its background so that people with low vision or color blindness can read content. The contrast ratio is measured from 1:1 (no contrast) to 21:1 (black on white).
What is WCAG AA vs AAA compliance?▾
WCAG AA requires a 4.5:1 contrast ratio for normal text and 3:1 for large text (18pt+ or 14pt+ bold). AAA requires 7:1 for normal text and 4.5:1 for large text. AA is the legal minimum for most accessibility laws (ADA, EN 301 549). AAA is the gold standard.
What counts as large text in WCAG?▾
Large text is defined as 18pt (24px) or larger for normal weight, or 14pt (approximately 18.67px) or larger for bold text. Large text has lower contrast requirements because it's easier to read at lower contrast.
Why does color contrast matter for SEO?▾
Low contrast text increases bounce rate (users leave), reduces time on page, and hurts Core Web Vitals scores. Google uses engagement signals in ranking. Accessible sites also rank better as they serve more users effectively.
How do I fix low contrast?▾
Darken the text color or lighten the background (for light themes). Small incremental adjustments of 10-20% lightness often suffice. Use a color wheel to maintain your brand hue while adjusting lightness.
What color formats does this tool accept?▾
This tool accepts hex colors (#fff, #ffffff), RGB (rgb(255,255,255)), named CSS colors (white, red), and HSL (hsl(0, 0%, 100%)). Hex is the most reliable format.
Does WCAG contrast apply to icons and graphics?▾
WCAG 1.4.11 (Non-text Contrast, Level AA) requires a 3:1 contrast ratio for UI components (icons, buttons, form controls) and informational graphics. This tool focuses on text contrast (WCAG 1.4.3 and 1.4.6).