WCAG AA & AAA • APCA score • No upload

Color Contrast Checker

Check text and background contrast against WCAG AA and AAA with an APCA score. Test normal, large, and UI text in your browser with no upload.

Check color contrast against WCAG standards

Enter a text color and a background color to see the WCAG 2.x contrast ratio, AA and AAA results for normal, large, and UI text, plus an APCA perceptual score. Adjust either color until it passes.

How to check color contrast

  1. 1.Enter the text and background colors with the picker, hex field, or HSL sliders
  2. 2.Watch the contrast ratio and AA / AAA indicators update instantly
  3. 3.Adjust lightness until normal, large, or UI text reaches the level you need
  4. 4.Copy the URL to share the exact color pair with someone else

Colors are checked in your browser; nothing is uploaded

Uses the official WCAG relative-luminance contrast formula

Includes the APCA perceptual score from the WCAG 3 draft

The color pair stays in the URL so you can share it

Color contrast checker FAQ

Are the colors sent to a server?

No. The contrast ratio is calculated locally in your browser from the two colors you enter.

What does the contrast ratio mean?

It compares the relative luminance of the two colors on a scale from 1:1 (same color) to 21:1 (black on white). WCAG sets minimum ratios such as 4.5:1 for normal text at level AA.

What do AA and AAA mean?

They are WCAG conformance levels. AA requires at least 4.5:1 for normal text and 3:1 for large text; AAA raises these to 7:1 and 4.5:1.

What counts as large text?

WCAG defines large text as at least 18 pt (24 px) regular or 14 pt (18.66 px) bold. Large text needs less contrast: 3:1 at AA and 4.5:1 at AAA.

What is the APCA score?

APCA is the perceptual contrast algorithm proposed for WCAG 3, measuring perceived lightness difference. This page shows the Lc value from the current WCAG 3 draft as a supplementary indicator; WCAG 2.x AA / AAA remain the conformance basis.

My colors fail — how do I fix them?

Use the Auto-fix to AA button beside either color to adjust that color's lightness until normal text reaches 4.5:1. You can then fine-tune hue, saturation, or lightness with the sliders.