./prontouso.com

DESIGN UTILITIES

Contrast Checker

Check the WCAG contrast ratio between a text color and a background color, with pass/fail results for AA and AAA at both normal and large text sizes.

Tool statusRuns in your browser
Preview

Options

Normal text looks like this.

Large text

"Large text" means 18pt (24px) or larger, or 14pt (18.7px) and bold.

Results

Meets AA for text
Contrast ratio
17.08:1
CategoryAAAAA
Large textPassPass
Small textPassPass
Graphics and UIPassN/A

How it works

  1. Enter your input

    Fill in the values, paste your text, or upload the file this tool works with.

  2. See results instantly

    Most tools update live as you type; a few use a single button. Either way, the result appears right on this page.

  3. Use your results

    Copy, download, or share what the tool produces — you're always in control of the output.

Privacy and processing — Runs locally in your browser. This tool does not upload your input.

What is Contrast Checker?

Check the WCAG contrast ratio between a text color and a background color, and see whether it passes AA and AAA at both normal and large text sizes.

UNDERSTAND THE TOOL

How to check color contrast

What the ratio means

The contrast ratio ranges from 1:1 (identical colors) to 21:1 (black on white), calculated from each color's relative luminance using the formula defined in the WCAG 2.x specification.

AA and AAA thresholds

  • AA, normal text: at least 4.5:1.
  • AA, large text: at least 3:1.
  • AAA, normal text: at least 7:1.
  • AAA, large text: at least 4.5:1.
  • Large text means 18pt (24px) regular weight, or 14pt (about 18.7px) bold, per the WCAG definition.

Reading the preview

The sample box shows both text sizes rendered with your two colors, which is a faster way to judge readability than the ratio number alone.

How to use it

  • Pick or type a foreground (text) color and a background color.
  • Read the contrast ratio and the four pass/fail results.
  • Use the swap button to check the pair in the other direction.

Contrast notes

The ratio uses WCAG 2.x relative luminance math for sRGB colors. Transparency should be tested against the final composited background color.

Frequently Asked Questions

Which level should I aim for?

AA is the widely required baseline for web accessibility, including under most legal accessibility requirements. AAA is stricter and recommended where you can achieve it, especially for body text.

Does this check anything besides contrast?

No. Color contrast is one part of text accessibility; font size, weight, and spacing also affect readability but are not evaluated here.

Why are there separate thresholds for large text?

WCAG allows a lower ratio for large text because bigger, bolder strokes stay legible at lower contrast than small body text does.

Does alpha or transparency affect the ratio?

The WCAG contrast calculation is based on the final visible colors. If your UI uses transparency, first sample or calculate the composited color over its real background, then test that pair.

Related Tools