Skip to content

Color contrast checker

Pick a text color and a background color from your palette. PigmentPicker shows the contrast ratio and whether it meets WCAG AA or AAA.

Describe a Palette with AI

Not sure what colors you want? Let AI generate a palette from a description.

Color Picker

Closest match, not an exact conversion.

Color Palette

Text Color

Background Color

Sample Text

This is how your text will look

Contrast Ratio

AAA
21.00:1

Perfect! This meets WCAG AAA standards.

Export Palette

Download your palette in the format you prefer

Generated Code Preview:

{
  "palette": []
}
Format: JSON

How it works

  1. Build or load a palette above.
  2. Open the Contrast Checker tab.
  3. Choose text and background colors.
  4. Read the ratio and AA/AAA labels, then adjust colors until they pass.

When this helps

Use it before shipping UI text, buttons, or form labels. Checking early saves rework when a design looks fine on your monitor but fails accessibility tests later.

Related tools

FAQ

What does the contrast checker measure?
It calculates the contrast ratio between a text color and a background color, then shows whether that pair meets WCAG AA or AAA for normal or large text.
Do I need a full palette first?
You can start from the default palette or any colors you generate. Pick text and background from the palette swatches, or adjust them in the contrast tool.
Is this the same as a color contrast generator?
People search for both “checker” and “generator.” Here you check pairs against WCAG and can change colors until the ratio passes. You can also build a new palette on the same page.