Color Contrast Checker

WCAG 2.1準拠のコントラスト比チェッカー。AA/AAAレベルの判定とプレビュー。

前景色 (テキスト)

背景色

コントラスト比

21.00:1

大きいテキスト (24px Bold)

通常テキスト (16px) - これはプレビューです。This is a preview of your color combination.

小さいテキスト (14px) - 読みやすさを確認してください。

反転プレビュー

前景色と背景色を入れ替えた場合の見え方です。

通常テキスト AA

(4.5:1以上)

PASS

通常テキスト AAA

(7:1以上)

PASS

大きいテキスト AA

(3:1以上)

PASS

大きいテキスト AAA

(4.5:1以上)

PASS

Color Contrast Checkerの使い方

前景色(テキスト色)と背景色を設定すると、WCAG 2.1基準に基づくコントラスト比を即座に計算します。 AA/AAAレベルの判定結果を通常テキスト・大きいテキスト別に表示。Webアクセシビリティの確保やデザインレビューに活用できます。

How to Use the Color Contrast Checker

This WCAG 2.1 contrast checker calculates the contrast ratio between foreground and background colors. It checks compliance with both AA (4.5:1 for normal text, 3:1 for large text) and AAA (7:1 for normal, 4.5:1 for large) levels. Live preview shows how your text will actually look. Essential for ensuring web accessibility compliance and creating readable designs. All calculations run in your browser.

WCAG基準の早見表 / WCAG Thresholds

レベル / Level	通常テキスト / Normal	大きいテキスト / Large
AA(最低基準)	4.5 : 1	3 : 1
AAA(推奨)	7 : 1	4.5 : 1
大きいテキスト = 18pt(約24px)以上、または太字14pt(約18.7px)以上 Large text = 18pt+ or bold 14pt+

よくある落とし穴と対処 / Common Pitfalls

落とし穴 / Pitfall	問題 / Problem	対処 / Fix
グレー文字のおしゃれ優先 Stylish gray text	#999 on #fff は 2.85:1 でAA不合格 #999 on white fails AA at 2.85:1	本文グレーは #767676 (4.54:1) が白背景の限界ライン #767676 is the lightest AA-passing gray on white
プレースホルダー・無効状態の見落とし Placeholder and disabled states ignored	入力ヒントが読めないとフォーム離脱の原因に Unreadable hints hurt form completion	プレースホルダーも 4.5:1 を目指す(無効状態はWCAG対象外だが配慮) Aim for 4.5:1 even on placeholders
ダークモードで再検証しない Dark mode left unchecked	ライトで合格でも反転配色では不合格になりがち Passing light pairs often fail inverted	両モードの全ペアを個別に確認する Check every pair in both modes
色だけで状態を伝える Color as the only indicator	コントラスト以前に、色覚特性によっては区別できない Color-only cues fail for color blindness	アイコン・下線・ラベルを併用する(WCAG 1.4.1) Add icons, underlines, or labels

Why browser-only?

Contrast math is a small, well-defined formula (WCAG relative luminance) — it belongs in your browser, not on a server. This checker computes ratios locally and instantly as you tweak colors: unreleased brand palettes stay on your machine, and audits work offline. Pick accessible alternatives with our Color Converter.

計算は全てブラウザ内で完結します。基準を満たす色の探索にはColor PickerやColor Palette Generatorを併用してください。