Color Contrast Checker

Read the ratio before you ship the brand color

Teal on white looks modern in a Figma frame and fails body text in a bright office. This color contrast checker takes two hex colors, shows a live preview, and reports the WCAG 2 contrast ratio against AA and AAA thresholds for normal and large text. Designers and developers can settle the argument with a number instead of a squint.

The page is itself a reminder: KindCalc’s body text is dark slate on off-white for a reason. Accent teal is for buttons and links at a size that still clears the ratio.

The WCAG 2 formula

Each sRGB channel is linearized, then combined into relative luminance L = 0.2126 R + 0.7152 G + 0.0722 B. Contrast is (lighter + 0.05) / (darker + 0.05). Black on white is 21:1. Identical colors are 1:1. AA normal text requires 4.5:1. AAA normal text requires 7:1. Large text gets a break: 3:1 for AA and 4.5:1 for AAA.

WCAG 2 contrast is not the same as APCA / WCAG 3 experiments. If your team has moved to APCA, this page is still useful as the legal-and-audit language most enterprises still cite.

How to use it

Paste or type six-digit hex values, with or without the #. The preview block uses your pair so you can judge weight and size, not only the ratio. If body text fails, darken the foreground or lighten the background before you ask for an exception. Icons and thin UI lines should clear 3:1 against the adjacent background.

Check hover and disabled states too. Disabled text is often exempt, but placeholder text that people must read is not a free pass.

Examples

Slate-900 (#0f172a) on white is well above AAA for body text. Teal-600 (#0d9488) on white often passes large text and may sit near the line for small text—verify rather than assume. Slate-400 (#94a3b8) on white is a frequent fail for helper copy; it looks “subtle” because it is low contrast.

Dark mode is not automatically accessible. Light gray on near-black can fail the same way muted gray on white does. Test the actual pair.

After you pass the ratio

Do not put the only price or error message in color alone. Do not rely on a 4.6:1 pass to justify 10 px legal text. Contrast is one checkpoint in a larger accessibility review.

Pair this tool with the QR generator if you need a high-contrast code that still scans—QR modules want strong dark/light separation for cameras, which is a cousin of this problem.

Typical examples

Frequently asked questions

What contrast ratio does WCAG require?

AA needs 4.5:1 for normal text and 3:1 for large text. AAA needs 7:1 for normal text and 4.5:1 for large text. UI components have a 3:1 non-text guideline in WCAG 2.1/2.2.

What counts as large text?

Typically 18 pt regular or 14 pt bold and larger. UI labels at 16 px are usually “normal text.”

How is contrast calculated?

WCAG 2 uses relative luminance of each sRGB color, then (L1 + 0.05) / (L2 + 0.05) where L1 is the lighter luminance. This checker implements that formula.

Does a pass mean the UI is accessible?

Contrast is necessary and not sufficient. Focus states, motion, language, and keyboard access still matter.

Are hex values uploaded?

No. The preview and math run locally.