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

コントラスト比チェッカーは、前景色と背景色の組み合わせに対するWCAG 2.1のコントラスト比をブラウザ上で即時に計算するツールです。3桁および6桁のHEXコード入力やOS標準のカラーピッカーに対応し、通常テキストと大きな文字それぞれについてAAおよびAAAの適合結果を判定します。

コントラスト比チェッカーの使い方

前景色と背景色を指定するだけで、コントラスト比とWCAG 2.1基準の適合結果が即座に表示されます。処理はすべてブラウザ内で完結します。

1. 前景色および背景色の入力欄に3桁または6桁のHEXコードを入力するか、カラーパレットの領域をタップしてカラーピッカーを開きます。
2. 色を変更すると、相対輝度の計算公式に基づきコントラスト比とテキストのライブプレビューがリアルタイムで更新されます。
3. 通常テキストと大きな文字に関するAAおよびAAAの計4つの適合バッジで判定結果を確認できます。文字色と背景色を反転させたい場合は色を入れ替えるボタンを使用します。

カラーコントラストチェッカーでのHEXコードとカラーピッカーの活用

デザインツールやCSSファイルからHEXコード（例：0-9, A-F）をコピーして直接貼り付けることができます。入力欄は無効な文字を無視するため、先頭の記号や余分な文字が含まれていても問題ありません。

視覚的に色を選択したい場合は、カラーエリアをタップしてデバイス標準のカラーピッカーを使用できます。HEXコード入力欄とカラーピッカーは双方向に連動しており、どちらの操作でも即時に数値が反映されます。

色コントラストチェックとWCAG 2.1の達成基準

WCAG 2.1では、テキストのサイズに応じて2つの適合レベルが定義されています。レベルAAでは通常テキスト（24px未満）で4.5:1以上、大きな文字（18pt/24px以上の標準、または14pt/18.66px以上の太字）で3.0:1以上が必要です。

より厳格なレベルAAAでは、通常テキストで7.0:1以上、大きな文字で4.5:1以上が求められます。当ツールでは1回の入力で4種類の基準を同時に判定し、条件を満たした項目に合格バッジを表示します。

Webで動作するコントラスト比チェッカーの技術仕様

当ツールはW3Cの相対輝度公式に従ってブラウザ内でリアルタイムに計算を行ないます。コントラスト比の数値範囲は最小1:1から最大21:1までとなります。

すべての計算処理は使用中の端末上で行なわれるため、入力したカラーコードが外部サーバーへ送信されたり保存されたりすることはありません。アカウント登録やインストールの必要もなく、制限なしで利用できます。

カラーコントラストチェッカー・アナライザーツールの活用場面

低コントラストなテキストは、弱視のユーザーや屋外の日差しの中で画面を見る利用者にとって読み取りにくくなります。デザインの初期段階でコントラスト比を確認することで、後からの修正コストを抑えることができます。

また、色を入れ替える機能を利用すると、文字と背景の反転デザインの検討もスムーズに行なえます。

関連ツール

画面定規

ドラッグでピクセルの距離、サイズ、角度を計測

CSSボタンジェネレーター

ボタンをデザインしHTML/CSS/Tailwindコードをコピー

赤色単色スクリーン

ドット抜けやOLED焼き付き確認用の赤色画面

ファビコン生成

画像からファビコン、アイコン、manifest作成

アプリスクリーンショット作成器

App Store・Playストア用の枠付き画像を生成