tool.chip.free

WCAGコントラストチェッカー

WCAG AAとAAAに対する色コントラストをチェック。通過するワンクリック修正 — 通常テキスト、大型テキスト、UIコンポーネントをカバー。

Text color (foreground)

Background color

—:1

Contrast ratio

Preview — text on background

The quick fox

Lorem ipsum dolor sit amet, consectetur adipiscing elit. This is body text at 14px to check small-text contrast.

Button

Preview — swapped

The quick fox

Same text and background, swapped. Some color pairs only work in one direction.

Button

Quick fixes — closest passing colors

About WCAG contrast

AA is the legal standard in most jurisdictions: 4.5:1 for normal text, 3:1 for large text (18pt+ or 14pt bold).
AAA is "enhanced": 7:1 normal, 4.5:1 large. Aim for this on body copy if you can.
UI components (buttons, form borders, icons) need 3:1 against their adjacent color — the same as large text.
Watch for color-only meaning. Pair color with an icon, underline, or label so colorblind users get the signal too.
Apple HIG and Material both require minimum 4.5:1 for text in your app — failing this is a known App Store accessibility-review flag.

LaunchShots ships with built-in contrast hints in the editor — try it.