tool4.dev

Data / LOCAL TOOL

Color Contrast Checker

Check WCAG contrast ratios for foreground and background colors, including transparency.

Runs locally — input is never uploaded
ColorsChoose foreground and background

Foreground

Hue217°
Opacity100%

Background

Hue217°
Opacity100%
ContrastReady when you are

Normal

Foreground text on background
Large textNormal body textBold text
Enter two colors to calculate the contrast ratio.

Swapped

Background text on foreground
Large textNormal body textBold text
Enter two colors to calculate the contrast ratio.

WHAT IT DOES

See whether two colors can be read together.

Pick or enter foreground and background CSS colors and get the WCAG 2.x relative-luminance contrast ratio with Normal and Large text AA and AAA results. The preview updates as you work, and alpha colors are composited before the ratio is calculated so a translucent label is not reported as if it were opaque.

Why use it?

Use it to check whether a foreground/background pair meets the displayed text-contrast thresholds, rather than judging readability by hue alone.

How to use this tool

  1. Enter or pick the actual foreground and background colors, including alpha when relevant.
  2. Read the ratio and the Normal and Large text verdicts. Opaque black on white is a useful reference at 21:1.
  3. Match the verdict to your actual text size and weight. Check other backgrounds separately, especially images or gradients; this pairwise calculation is not a complete accessibility audit.

Details and limitations

  • The visual controls reuse the site's CSS color parser and picker, including modern rgb(), hsl(), LAB, OKLCH, and alpha syntax.
  • Normal text uses 4.5:1 for AA and 7:1 for AAA; large text uses 3:1 for AA and 4.5:1 for AAA.
  • Transparent backgrounds are composited over white, while a translucent foreground is composited over the selected background.
  • Normal and swapped evaluations are shown together, and copy and clear are available without sending either color to a server.

COMMON QUESTIONS

Color Contrast questions

Which contrast standard does this use?
It uses the WCAG 2.x relative-luminance formula and reports the AA and AAA thresholds for normal and large text.
How are transparent colors handled?
A transparent background is composited over white, and a translucent foreground is composited over that resulting background before luminance is compared.
Does passing contrast guarantee accessible color?
No. Contrast is one accessibility check. Text size, font weight, focus indicators, non-text contrast, and context still matter.