カラーコントラストチェッカー
文字色と背景色のコントラスト比を WCAG 2.1 の AA / AAA 基準で判定。比率の即時表示・ライブプレビュー・合否バッジ付き。
色を設定
4.48:1高いほど読みやすく、通常テキストには 4.5:1 以上が必要です。Aa 普通の文字 — いろはにほへと
Aa 大きい文字
このツールについて
このカラーコントラストチェッカーは、WCAG 2.1 のコントラスト計算式を使って、背景に対する文字の読みやすさを測定します。文字色と背景色を HEX で入力するか、ピッカーで視覚的に選ぶだけで、コントラスト比(例: 4.52:1)と、Web コンテンツアクセシビリティガイドラインの AA・AAA 各レベルの合否バッジを即座に表示します。ライブプレビューが選んだ配色でサンプル文字を描画するため、結果をひと目で確認できます。入れ替えボタンで前景と背景を反転することも可能です。すべてブラウザ内で動作するため高速かつプライベートで、一度読み込めばオフラインでも動きます。デザイナー・開発者・アクセシブルな UI を作るすべての人に最適です。
使い方
- 1 文字色(前景)を HEX で入力するか、カラーピッカーで選びます。
- 2 同様に背景色を入力します。#rgb・#rrggbb の両方に対応しています。
- 3 コントラスト比と、通常／大きい文字の AA・AAA 合否バッジを確認します。
- 4 入れ替えボタンで色を反転し、4.5:1 以上になるよう調整します。
仕組み
各色はまず sRGB から線形光へ変換されます。各チャンネルを 255 で割り、0.03928 を超える値にはガンマ曲線を適用します。相対輝度は L = 0.2126·R + 0.7152·G + 0.0722·B で求められ、人間の目が最も敏感な緑が大きく重み付けされます。2 色間のコントラスト比は (L1 + 0.05) / (L2 + 0.05) で、L1 が明るい色、L2 が暗い色です。値は 1:1(同じ色)から 21:1(純黒と純白)までになります。WCAG 2.1 の AA レベルでは通常テキストに 4.5:1 以上、大きいテキストに 3:1 以上、AAA レベルではそれぞれ 7:1・4.5:1 が必要です。大きいテキストとはおおむね 18.66px の太字、または 24px の通常字以上を指します。
よくある質問
WCAG に合格するにはどのコントラスト比が必要ですか?
WCAG 2.1 の AA レベルでは通常テキストに 4.5:1 以上、大きいテキストに 3:1 以上が必要です。AAA レベルはより厳しく、通常テキスト 7:1・大きいテキスト 4.5:1 が求められます。多くのサイトは実務上・法的な基準として AA を目標にします。
「大きいテキスト」とは何を指しますか?
WCAG では、18.66px(約 14pt)以上の太字、または 24px(約 18pt)以上の任意の太さを大きいテキストと定義します。読みやすいため、合格に必要なコントラストが低め(AA で 3:1、AAA で 4.5:1)に設定されています。
コントラスト比はどのように計算しますか?
各色の相対輝度を、線形化した赤・緑・青のチャンネルから L = 0.2126R + 0.7152G + 0.0722B で求めます。比率は (明るい色 + 0.05) / (暗い色 + 0.05) で、黒と白では 21:1 まで、最小は 1:1 になります。
純黒と純白がなぜ 21:1 になるのですか?
黒の相対輝度は 0、白は 1 です。これを (1 + 0.05) / (0 + 0.05) に代入すると 21 となり、これが理論上の最大コントラスト比です。だから #000000 と #ffffff はすべての WCAG レベルに合格します。
コントラストは SEO やアクセシビリティ法に影響しますか?
はい。十分なコントラストは、ADA・Section 508・欧州アクセシビリティ法などが参照するアクセシビリティ基準の一部であり、読みやすさはユーザビリティ指標も改善します。WCAG AA を満たすことで法的リスクを下げ、ロービジョンや色覚特性のある人にもコンテンツを使ってもらえます。
関連ツールと活用法
コントラストチェッカーは、アクセシブルな Web・アプリ設計に欠かせません。カラー変換ツールと組み合わせれば HEX・RGB・HSL を行き来しながら配色を調整でき、余白や不透明度のスケーリングには割合(パーセント)計算ツールが役立ちます。デザイナー・フロントエンド開発者・コンテンツ制作者が、ボタンやラベル、本文を誰にとっても読みやすく保つために利用しています。