WCAG Color Contrast Ratio Checker

Check WCAG 2.1 AA/AAA accessibility contrast ratios between text and background colors.

Overview

Evaluates the luminance contrast ratio between foreground text and background colors according to Web Content Accessibility Guidelines (WCAG 2.1).

Contrast Ratio = (L1 + 0.05) / (L2 + 0.05) where L1 is relative luminance of lighter color and L2 is darker color

Checks compliance against WCAG Level AA (minimum 4.5:1 for normal text, 3:1 for large text) and Level AAA (minimum 7:1 for normal text).

Inputs: Foreground = #0f172a | Background = #f8fafc

Summary: Contrast Ratio = 14.3:1 | WCAG AA: PASS | WCAG AAA: PASS (Accessible)

Accessibility Compliance: Ensure web user interfaces comply with legal Americans with Disabilities Act (ADA) and WCAG standards.
Design System Auditing: Audit button text, input labels, and alert banners for accessible readability.
Dark Mode Optimization: Validate inverted color palettes to prevent low-contrast gray-on-dark eye fatigue.

WCAG 2.1 Level AA requires a minimum contrast ratio of 4.5:1 for regular body text, and 3:1 for large text (18pt or 14pt bold).

WCAG Level AAA requires a stricter 7:1 ratio for normal text and 4.5:1 for large text, representing highest accessibility.

Yes, low-contrast placeholder text is one of the most common accessibility failures flagged by automated audit tools.

JSON Formatter - Pretty-print, minify and validate JSON.
Base64 Encoder/Decoder - Encode text to Base64 or decode it back.
Color Picker - Pick a color and read off HEX, RGB and HSL instantly.
Regex Tester - Test a regular expression against sample text with live match highlighting.
HTML Formatter - Indent and clean up messy HTML markup.
SQL Formatter - Readable indentation for SQL queries.