Contrast Checker

Check whether text and background color combinations meet WCAG contrast thresholds for normal and large text.

Foreground colorBackground color

Readable sample text

Result

Contrast ratio: 17.74:1

WCAG AA normal text: Pass
WCAG AA large text: Pass
WCAG AAA normal text: Pass
WCAG AAA large text: Pass

How to use this tool

Enter the required values in the labeled fields. Results update in your browser and are announced for assistive technologies. Use realistic measurements and verify important outcomes before acting on them.

Formula or logic

The calculator uses the WCAG relative luminance formula and contrast ratio (L1 + 0.05) / (L2 + 0.05).

Example calculation

Example: dark text #111827 on white has excellent contrast and passes AAA for normal text.

Practical use and limits

This page is built for checking practical color and accessibility details directly in the browser. The calculation is intentionally visible and described above so you can sanity-check the result instead of treating it as a black box.

Limit: visual perception, brand constraints and accessibility needs can require human review beyond the numeric output. For important decisions, use this result as a planning aid and verify it against the relevant source of truth.

Last reviewed: May 29, 2026.

Contrast Checker: practical guide

Contrast is not a design preference. It decides whether text, buttons and UI states can be read by real people on real screens, including mobile devices in sunlight and users with low vision.

Use this checker before publishing color pairs for text, links, badges, form errors and call-to-action buttons. A color can look beautiful in a mockup and still fail accessibility.

Real examples

Body text

Input: Dark gray text on a white background

Result: usually safe, but verify the exact HEX pair

Muted button

Input: Light gray text on a pale background

Result: often fails and needs stronger contrast

Practical notes

Check normal text, large text and UI components separately.
Hover, disabled, error and focus states need contrast too.
Brand colors may need accessible variants for text and controls.

Common mistakes

Testing only the main brand color and ignoring secondary states.
Relying on eyesight or screenshots instead of exact color values.
Using low-contrast placeholder text as if it were harmless.

Frequently asked questions

What ratio passes AA normal text?

AA normal text requires at least 4.5:1 contrast.

What counts as large text?

WCAG large text is generally 18pt regular or 14pt bold and above.

Is the formula accurate?

Yes. It uses WCAG relative luminance and contrast ratio calculations.

Related tools

Design Tools