ToolToUse

Color & Design

WCAG Contrast Checker

Test a foreground and background pair against WCAG 2.1 AA and AAA levels, and get a suggested colour that passes when it fails.

Accessibility

WCAG AA & AAA check

Local only
2.52:1Below the AA requirement of 4.5:1

Large text sample

Normal body text sample used for the stricter AA and AAA thresholds.

  • FailAA — normal text — needs 4.5:1
  • FailAA — large text (18pt / 14pt bold) — needs 3:1
  • FailAAA — normal text — needs 7:1
  • FailAAA — large text — needs 4.5:1
  • FailAA — UI components & graphics — needs 3:1
Suggested passing foreground: #2d6cf2

Same hue and saturation, adjusted lightness until it reaches 4.5:1 against your background.

Ratio2.52:1
Suggested color#2d6cf2
Checked in your browser

No page is crawled and no data is sent — you supply the two colors and the maths runs locally.

WCAG contrast levels

  • AA normal text requires 4.5:1 — the level most teams and legal requirements target.
  • AA large text requires 3:1 for 18pt regular or 14pt bold and above.
  • AAA raises those thresholds to 7:1 and 4.5:1 for high-accessibility contexts.
  • Non-text contrast requires 3:1 for icons, focus rings and input borders.

Do not forget states

Hover, disabled and placeholder colors need checking too. Disabled controls are exempt from the rules, but placeholder text that users must read is not.

Good to know

Frequently asked questions

What is the difference from the Color Contrast Checker?

Both use the same formula. This page focuses on WCAG levels and suggests a corrected colour when the pair fails your chosen level.

How is the suggestion calculated?

Hue and saturation stay fixed while lightness moves step by step towards the opposite of your background until the target ratio is reached.

Does passing AA make my site accessible?

It removes one common barrier. Keyboard access, focus visibility, semantic markup and clear labels matter just as much.

Are gradients or images checked?

No. Test the darkest and lightest points of the background separately against your text colour.

Keep exploring

View all

Color & Design

Color Converter

Convert colors between HEX, RGB and HSL with a live preview.

Open tool
Popular

Color & Design

Color Picker

Pick any color and read its HEX, RGB and HSL values instantly.

Open tool

Color & Design

HEX to RGB Converter

Turn a HEX color code into RGB and CSS-ready values.

Open tool