TechTools

Color Contrast Checker

Heading Text (Large)

This is normal body text showing what your color combination looks like in practice. Readable text is essential for accessibility.

Smaller text is even harder to read - make sure your contrast ratio meets WCAG standards.

Link text

Contrast Ratio

17.40:1

AA Normal

Min 4.5:1

Pass

AA Large

Min 3:1

Pass

AAA Normal

Min 7:1

Pass

AAA Large

Min 4.5:1

Pass

WCAG 2.1 defines "Large text" as 18pt (24px) or 14pt (18.67px) bold. AA level is required for legal accessibility compliance; AAA is the enhanced standard.

WCAG Contrast Levels

AA (4.5:1) - Required for normal text. Minimum standard for legal web accessibility.

AA Large (3:1) - Required for large text (18px+ or 14px+ bold).

AAA (7:1) - Enhanced standard. Recommended for text-heavy content.

Privacy First: Your files are processed securely. Whenever possible, processing happens in your browser and files are never stored on our servers.

Ensure your website meets web accessibility standards (WCAG 2.1). Enter foreground (text) and background colors using the color picker or hex codes, and instantly see the contrast ratio calculated using the official WCAG relative luminance formula. Results show four pass/fail checks: WCAG AA for normal text (4.5:1 minimum), WCAG AA for large text (3:1), WCAG AAA for normal text (7:1), and WCAG AAA for large text (4.5:1). A live preview renders sample text - heading, body, small text, buttons, and links - with your chosen colors so you can see exactly what users will experience. If contrast fails AA, a quick-fix suggestion recommends a high-contrast alternative. Swap foreground and background colors with one click. Copy the contrast ratio for documentation.

How to Use

  1. 1Enter your text (foreground) color using the color picker or type a hex code like #1a1a1a
  2. 2Enter your background color using the second color picker or type its hex code
  3. 3The contrast ratio and WCAG pass/fail status update instantly
  4. 4View the live preview panel to see how your combination looks with real text
  5. 5Use the Swap button to reverse the colors if needed; the tool suggests fixes for failing ratios

Features

  • Live contrast ratio display using the WCAG relative luminance formula
  • 4 WCAG checks: AA Normal (4.5:1), AA Large (3:1), AAA Normal (7:1), AAA Large (4.5:1)
  • Color picker + hex input for both foreground and background colors
  • Live text preview: heading, body, small text, buttons, and links
  • Swap foreground/background colors with one click
  • Quick-fix suggestion when contrast ratio is below AA
  • Copy contrast ratio value to clipboard
  • 100% browser-based calculation

Frequently Asked Questions

Guest PlanUpgrade
Operations today0 / 3
5 MB max fileNo batch
Upgrade for more

/ related tools

JSON Formatter
QR Code Generator
Crypto & Currency Converter
HTML, CSS & JS Editor

Community Feedback

Like

00

Total Rating

No ratings yet

Reviews

No reviews yet. Be the first!

Rate & Review

Was this tool helpful?

Rate this tool:

Write a Review

0/500

/ share this tool

Twitter/XLinkedIn