このツールは …回 使われています。
背景色と文字色のコントラスト比をリアルタイムに算出し、WCAGアクセシビリティ基準への適合状況を確認できるデザイン補助ツールです。
プレビュー
見出しテキスト / Heading Text
本文テキストのサンプルです。この配色で実際のWebページを制作した際の、文字の読みやすさを確認できます。アクセシビリティを考慮した色選びをサポートします。
小さなテキスト（12px）：著作権表記・注意書き等の補足情報。
コントラスト調整
現在のコントラスト比を確認し、不足している場合は下のボタンで文字色を調整できます。
使い方ガイド
- 「背景色」と「文字色」をカラーピッカーまたは16進数コードで指定します。
- 「コントラスト比」がリアルタイムで算出・表示されます。
- WCAG判定表で各アクセシビリティレベル（AA / AAA）の合否を確認します。
- 「プレビュー」で実際のUI（見出し・ボタン・リンク等）の見え方をシミュレートします。
- コントラストが不十分な場合、「AA基準まで自動調整」ボタンで文字色をワンクリックで合格ラインまで調整できます。微調整したいときは「文字色を明るく／暗く」も使えます。
WCAG 2.2 基準について
- Level AA（推奨）：通常テキスト 4.5:1 以上 ／ 大きなテキスト 3.0:1 以上
- Level AAA（最高基準）：通常テキスト 7.0:1 以上 ／ 大きなテキスト 4.5:1 以上
- 大きなテキスト：18pt（約24px）以上、または 14pt（約18.7px）以上の太字
よくある質問
コントラスト比とは何ですか？どうやって計算されますか？
コントラスト比とは、背景色と文字色の明るさ（相対輝度）の差を 1:1 〜 21:1 の数値で表した指標です。「(明るい色の輝度 + 0.05) ÷ (暗い色の輝度 + 0.05)」という WCAG の計算式で求められ、白と黒の組み合わせが最大の 21:1 になります。本ツールはこの計算式に基づいてコントラスト比を自動算出しています。
WCAG の「AA」と「AAA」は何が違いますか？
達成レベルの厳しさの違いです。Level AA（通常テキストで 4.5:1 以上）は、一般的なWebサイトで推奨される実用基準で、公共機関のサイトでも広く採用されています。Level AAA（通常テキストで 7.0:1 以上）はより厳格な最高水準で、すべての画面での達成は難しいため、本文など重要なテキストに絞って目指すのが現実的です。
「大きなテキスト」とはどのくらいのサイズからですか？
WCAG では 18pt（約24px）以上、または 14pt（約18.7px）以上の太字を「大きなテキスト」として扱います。大きな文字は多少コントラストが低くても読み取りやすいため、通常テキストより緩い基準（AA: 3.0:1、AAA: 4.5:1）が適用されます。ページの見出しや大きなボタンのラベルなどが該当します。
基準を満たさない配色を使うとどうなりますか？
コントラストが不足した文字は、ロービジョンや色覚多様性のユーザーだけでなく、屋外の強い日差しの下でスマホを見る人や高齢のユーザーにも読みにくくなり、ページからの離脱につながります。不足している場合は「AA基準まで自動調整」ボタンを使うと、色相を保ったまま合格ラインの文字色へワンクリックで調整できます。