DOFIW ACCESSIBILITY TOOLS

Color Contrast Checker

Test text and background colors against WCAG AA and AAA requirements. Get an exact ratio, clear results, and a live preview without uploading anything.

STEP 1

Choose your colors

Try an example
STEP 2

Review the result

Contrast ratio
13.83:1 Passes WCAG AA
LIVE PREVIEW

Good contrast makes content easier for everyone to read.

Small text example · 14 px

HOW TO USE IT

Test a color pair in three steps

  1. Enter the text color. Type a HEX value or use the visual picker.
  2. Enter the background color. The tool checks the final pair immediately.
  3. Review the result. Set the size and weight to classify your text correctly.

Inputs

Two HEX colors with an optional text size and bold setting.

Outputs

An exact ratio, four WCAG checks, a live preview, and an explanation.

UNDERSTAND THE RESULT

A contrast ratio needs context

A ratio of 1:1 means there is no luminance contrast. Black on white reaches the maximum of 21:1.

WCAG AA requires at least 4.5:1 for normal text and 3:1 for large text. A color pair can therefore pass for a heading but fail for a paragraph.

PRACTICAL USES

When this checker helps

WordPress themes

Test paragraph, heading, menu, button, and footer colors before publishing.

Design systems

Validate text colors against surfaces before adding them to a component library.

Brand palettes

Check whether brand colors are suitable for readable text.

Design reviews

Copy a clear result when documenting a color decision.

LIMITATIONS

What this checker cannot decide

  • It does not test every WCAG accessibility requirement.
  • It cannot evaluate text over changing images, gradients, videos, or patterns.
  • It does not test focus indicators, charts, controls, or links distinguished only by color.
  • It relies on the font size and weight entered by the user.
  • A passing ratio does not guarantee complete accessibility or legal compliance.

PRIVACY

Your colors stay in your browser

The calculation runs locally with JavaScript on your device. Your values are not uploaded, saved, or sent to an external API. Clipboard access occurs only after you select “Copy result.”

FREQUENTLY ASKED QUESTIONS

Questions about color contrast

What contrast ratio does WCAG AA require?

Normal text needs at least 4.5:1. Large text needs at least 3:1.

What counts as large text?

At least 24 CSS pixels when regular, or approximately 18.67 CSS pixels when bold.

Why can a displayed 4.50:1 result fail?

The displayed ratio is rounded. The underlying value may be slightly below 4.5. Pass or fail uses the complete unrounded value.

Does passing this test make my page accessible?

No. This test covers only the selected text and background colors.

This checker is an educational testing aid and does not guarantee WCAG conformance or legal compliance. Read the WCAG contrast guidance.