Image tool

Color Contrast Checker

Check foreground and background colors against WCAG contrast targets.

Practical guide

How to use Color Contrast Checker

Color Contrast Checker measures the readability of foreground and background colors using WCAG contrast ratios. It supports early accessibility decisions for text, buttons, labels, and interface states.

Step by step

  1. Enter or pick foreground and background HEX colors.
  2. Read the contrast ratio and AA or AAA results for normal and large text.
  3. Adjust either color and retest it in the real component, including hover, focus, and disabled states.

Example

InputForeground #17212b on background #ffffff
ResultA calculated ratio with WCAG AA and AAA pass or fail badges

How it works

sRGB channels are converted to linear values, combined into relative luminance, and compared with the WCAG contrast-ratio formula from 1:1 to 21:1.

Important limitations

  • A passing ratio does not guarantee overall accessibility or readable typography.
  • Logos, gradients, images, transparency, and dynamic backgrounds require testing in context.

Frequently asked questions

What ratio does normal text need?

WCAG AA uses 4.5:1 for normal text and 3:1 for large text; AAA uses higher thresholds.

Does this test color blindness?

No. Contrast is one requirement; information should also avoid relying on color alone.

Color Spectrum Extract dominant colors, inspect pixels, and export palettes from an image. Image Compressor Reduce image file size locally with an adjustable quality setting. Image Resizer Resize images to exact dimensions while optionally preserving aspect ratio.