ToolsEN

Design & Color

Free Color Contrast Checker for WCAG Accessibility

Calculate contrast ratio between text and background and verify AA/AAA accessibility compliance.

Contrast is calculated with WCAG 2.1 rules.

Sample text ABC abc 123

Contrast ratio

17.74 : 1

Normal text AA

Pass

Normal text AAA

Pass

Large text AA

Pass

Large text AAA

Pass

How to use

  1. Set foreground and background colors.
  2. Review the contrast ratio.
  3. Check AA/AAA pass status.

Recommended tools

Design & Color

Color Picker

Pick a color and instantly convert HEX, RGB, and HSL values.

Open >Design & Color

Gradient Generator

Generate CSS gradients by setting colors and angle.

Open >Design & Color

Image Palette Extractor

Extract key color palettes from images with HEX values.

Open >

When this tool helps most

Useful when validating readability for CTA buttons, landing copy, and app interfaces.