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以上)
PASSColor 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+ | ||
#999グレー文字とダークモード再検証の落とし穴 / #999 gray text and dark-mode re-check 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 WCAG relative-luminance math never leaves your browser
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を併用してください。
🔒 すべての処理はブラウザ内で完結し、入力データはサーバーへ送信されません。登録不要・無料。 / All processing runs in your browser; nothing is uploaded. Free, no sign-up. プライバシーポリシー / Privacy Policy