Back to Color Tools

Contrast Checker

Check color contrast ratios and WCAG accessibility compliance.

All data is processed in your browser. Nothing is uploaded to any server.
Large sample textSmall text to test readability on this background. Sphinx of black quartz, judge my vow.— live preview
Contrast ratio13.34:1
Good
AA · small textMin 4.5:1Pass
AA · large textMin 3.0:1Pass
AAA · small textMin 7.0:1Pass
AAA · large textMin 4.5:1Pass

More tools you might like

All tools →

Color Picker

Pick colors and generate harmonies (HEX, RGB, HSL)

Palette Extractor

Extract dominant colors from any image

Gradient Generator

Create CSS gradients with a visual editor

Image Compressor

Reduce image file size while maintaining quality

Background Remover

Remove backgrounds from images using AI

Format Converter

Convert images between formats (JPG, PNG, WebP, AVIF)

Contrast Checker — WCAG Accessibility

Check WCAG contrast ratios for accessibility. Ensure your design meets AA and AAA standards.

Quick answer: Contrast Checker

Contrast Checker calculates the ratio between foreground and background colors to help assess WCAG targets. Enter two colors, review the ratio and text-size statuses, then adjust the pair before using it.

Input
Foreground and background colors.
Output
A contrast ratio and available pass indicators.
Know before use
Color ratio is only one part of accessibility; size, weight, interactive states, background images, and user needs still require testing.
Find an alternative color with Color Picker.
  • ✓100% free, no sign-up required
  • ✓Runs entirely in your browser — no file upload to server
  • ✓Fast processing with instant results
  • ✓Works on desktop and mobile
  • ✓Privacy-first: your data never leaves your device

How to use

  1. 1
    Prepare the input

    Foreground and background colors.

  2. 2
    Configure and process

    Contrast Checker calculates the ratio between foreground and background colors to help assess WCAG targets. Enter two colors, review the ratio and text-size statuses, then adjust the pair before using it.

  3. 3
    Review the result

    A contrast ratio and available pass indicators.

What do I need to use Contrast Checker?

Foreground and background colors.

What does Contrast Checker produce?

A contrast ratio and available pass indicators.

What are the limitations of Contrast Checker?

Color ratio is only one part of accessibility; size, weight, interactive states, background images, and user needs still require testing.