Design Live Data stays in your browser

Color Contrast Checker

Check color combinations for WCAG 2.1 AA and AAA compliance. Get the contrast ratio, pass/fail for normal and large text, and improvement suggestions.

The quick brown fox

The five boxing wizards jump quickly over the lazy dog. Aa Bb Cc Dd 0123

Quick Presets

Disclaimer: Free tool provided “as is” by MonitorGiant. No warranty or liability for any data loss, security issues, or infrastructure problems arising from use of this tool. Results are for informational purposes only. · A Free Tool by MonitorGiant

How Color Contrast Checker works

The Web Content Accessibility Guidelines (WCAG 2.1) define minimum contrast ratios between text and its background to ensure readability for people with low vision. This tool calculates the relative luminance of your chosen colors and applies the WCAG formula to produce an accurate contrast ratio and pass/fail result.

  1. 1

    Pick your foreground and background colors

    Use the color picker or type a hex code directly into the text field. The live preview box updates instantly to show how the color pair looks for both large text (24pt / 18pt bold) and normal body text.

  2. 2

    Read the WCAG compliance results

    The tool evaluates four criteria: AA Normal (≥ 4.5:1), AA Large Text (≥ 3:1), AAA Normal (≥ 7:1), and AAA Large Text (≥ 4.5:1). WCAG AA compliance is the legal minimum in most jurisdictions, while AAA is recommended for maximum accessibility.

  3. 3

    Fix failing combinations using suggestions

    When your color pair fails AA Normal, the tool automatically generates lighter and darker color variants that achieve at least a 4.5:1 ratio. Click any suggestion card to apply it, then adjust further to taste. The Swap button flips foreground and background — sometimes this alone resolves a failing combination.

All contrast calculations happen locally in your browser using the WCAG 2.1 relative luminance formula. No colors or data are transmitted anywhere.

Comments & Feedback

Found a bug? Have a suggestion? We'd love to hear from you.

0 / 2000

Your email (if provided) is never displayed publicly.

Related Tools

Design

Color Palette Picker

Build and export harmonious colour palettes
Design

CSS Gradient Generator

Build linear and radial CSS gradients visually
Design

CSS Button Generator

Design and export pure-CSS buttons

From the makers of this tool

Need deeper observability?

MonitorGiant tracks real-time AI performance, infrastructure health, and system reliability — far beyond what free utilities can show.

Explore MonitorGiant