MMaxTools

Color Contrast Checker

Check WCAG contrast ratios for text and background color pairs.

The Color Contrast Checker measures the contrast ratio between foreground text and its background and reports WCAG AA and AAA compliance for normal and large text — with a live preview of your color pair.

Low-contrast text is the most common accessibility failure on the web: light gray on white may look elegant but is unreadable for millions of users with low vision or bright environments. WCAG sets the bar at 4.5:1 for normal text (AA), 3:1 for large text, and 7:1 for the stricter AAA level.

The tool computes relative luminance per the WCAG formula and shows exactly which levels your colors pass. Preview with your actual palette before shipping — small tweaks to lightness usually cross the line. Everything runs locally.

Sample text on this background

Smaller supporting text

14.63:1

contrast ratio

WCAG results

  • AA normal text (4.5:1): ✅ Pass
  • AA large text (3:1): ✅ Pass
  • AAA normal text (7:1): ✅ Pass
  • AAA large text (4.5:1): ✅ Pass

WCAG contrast = (L1 + 0.05) ÷ (L2 + 0.05) using relative luminance. Large text means 18pt+ or 14pt+ bold — it needs less contrast.

How to use the Color Contrast Checker

  1. Enter the foreground (text) color as hex.
  2. Enter the background color.
  3. Read the contrast ratio.
  4. Check the AA/AAA results for normal and large text.
  5. Adjust lightness until your target level passes.

Frequently asked questions

What contrast ratio should I aim for?

At least 4.5:1 for normal text and 3:1 for large text (18pt+ or 14pt+ bold) to meet WCAG AA, the common legal target. AAA (7:1) is worth aiming for on body copy.

How is contrast calculated?

Each color is converted to relative luminance using the WCAG linearized formula, then ratio = (L1 + 0.05) ÷ (L2 + 0.05) where L1 is the lighter luminance. The tool does this instantly.

Does contrast apply to images of text?

WCAG applies the same rules to text in images. Decorative text is exempt, but any text that conveys information needs the ratio regardless of whether it is real text or an image.

Related tools

View all developer tools →
Dev Tools

JSON Formatter & Validator

Format, minify and validate JSON instantly with clear error messages that point at the exact problem.

Dev Tools

JSON Validator

Check if your JSON is valid and find syntax errors with exact line and column.

Dev Tools

JSON Minifier

Compress JSON to its smallest valid form for storage and transport.

Dev Tools

JSON to CSV

Convert a JSON array of objects into a clean CSV file in one click.

Dev Tools

CSV to JSON

Convert CSV (from Excel or Google Sheets) into a JSON array of objects.

Dev Tools

Base64 Encoder

Encode text or files to Base64 — standard or URL-safe — in your browser.