Color Contrast Checker
Check WCAG AA and AAA contrast compliance for any text and background color combination, with live preview.
Large heading text
Normal body text — the quick brown fox jumps over the lazy dog.
13.98:1
contrast ratio
AA — Normal text (≥ 4.5)✓ Pass
AA — Large text (≥ 3.0)✓ Pass
AAA — Normal text (≥ 7.0)✓ Pass
AAA — Large text (≥ 4.5)✓ Pass
Large text = 18pt (24px) or larger, or 14pt (18.5px) bold or larger.
Ad · 728×90
Frequently Asked Questions
What contrast ratio does WCAG require?
WCAG AA requires at least 4.5:1 for normal text and 3:1 for large text. AAA raises this to 7:1 and 4.5:1 respectively.
What counts as large text?
Text at 18pt (24px) or larger, or bold text at 14pt (about 18.5px) or larger.
How is the contrast ratio calculated?
It compares the relative luminance of the two colors using the WCAG formula: (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color.
More free tools
- CSV to JSON — Convert CSV data to JSON instantly. Paste and go.
- JSON Formatter — Prettify and validate JSON with syntax highlighting.
- Base64 Encoder — Encode and decode Base64 — two-way, live.
- YAML to JSON — Convert YAML config files to JSON.
- Character Counter — Count characters per platform — Twitter, LinkedIn, meta tags.
- Text Case Converter — camelCase, snake_case, UPPER, Title Case and more.
- Slug Generator — Turn any title into a clean URL-safe slug.
- Line Sorter — Sort, deduplicate, or reverse lines of text.
- CSS Gradient Generator — Build linear and radial gradients visually.
- Box Shadow Builder — Create and preview CSS box-shadow values.
- SVG Optimizer — Minify SVG files. Removes metadata and unused elements.
- SVG to PNG — Export SVG to PNG at any resolution, in browser.
- Favicon Generator — Create ICO and PNG favicons from any SVG or image.