Skip to content
Tools

Free color contrast checker

Make every color pairing easier to read.

Check text and interface colors against WCAG, then repair a failing pair without losing its character.

  • Exact contrast ratio
  • Accessible color repair
  • Works in this browser

Choose colors

Test a foreground and background

Type a three- or six-digit HEX value, or use the color controls.

Hue chooses the color family. Color intensity moves between neutral gray and vivid color. Lightness moves the result toward black or white. All three settings combine to make the final color.

{{ t('checker.picker', { label: t('checker.foreground') }) }}

{{ pickerHint('foreground') }}

{{ t('checker.picker', { label: t('checker.background') }) }}

{{ pickerHint('background') }}

Contrast ratio {{ ratioText }}:1 {{ t('score.summary', { passed: passedCount, total: resultRows.length }) }} Result details
Contrast ratio {{ ratioText }}:1 out of 21:1

The ratio measures the light–dark difference: 1:1 is none, and higher is easier to distinguish. AA is the usual accessibility target; AAA is stricter.

  • {{ result.title }}{{ result.hint }} {{ result.pass ? t('results.pass') : t('results.fail') }}

Live preview

See the pairing in context

Large text sample

Good contrast keeps paragraphs comfortable to read across different screens and viewing conditions.

Accessible repair

Keep the color, fix the contrast

Lightness changes first. Hue and color intensity stay as close as the displayable range allows.

Repair foreground

This color already meets the selected target.

No adjustment to this color alone can meet the selected target.

Repair background

This color already meets the selected target.

No adjustment to this color alone can meet the selected target.

{{ toast }}