前景色（テキスト色）
コントラストチェック
前景色と背景色のコントラスト比を WCAG 2.1 ベースで計算し、通常テキストと大きなテキストの AA / AAA 判定を表示します。
スマホで開く
背景色
コントラスト比
-
色を入力すると計算されます。
WCAG 2.1 判定
AA 通常テキスト-
AA 大きなテキスト-
AAA 通常テキスト-
AAA 大きなテキスト-
操作
前景と背景を入れ替え
結果概要をコピー
実際の表示サンプル
読みやすさを大きな文字で確認できます。
通常テキストのサンプルです。本文や説明文、フォームラベルなど、一般的な 14px 前後のサイズで視認性を確認できます。
The quick brown fox jumps over the lazy dog. 0123456789
前景色の相対輝度
-
背景色の相対輝度
-
推奨
-
このツールについて
コントラストチェックは、背景色と文字色の読みやすさを数値で検証するためのツールです。UI デザイン、資料作成、ブログや LP の配色調整などで、見た目だけに頼らずアクセシビリティ基準で確認したいときに役立ちます。
計算には WCAG 公式の相対輝度アルゴリズムを使っています。sRGB を線形 RGB に変換し、相対輝度からコントラスト比を求めるため、単純な明度差より実用的な指標になります。
AA / AAA 判定は通常テキストと大きなテキストで基準が異なります。このページでは両方を分けて表示しているため、本文と見出しのどちらが基準を満たすかをその場で判断できます。
使い方
- まず「WCAG 2.1 判定」を入力または選択し、「操作」や「追加設定」も目的に合わせて調整します。
- 次に「入れ替え」を実行して、「結果」を更新します。
- 最後に表示された「結果」を確認し、必要であれば「前景色をコピー」で再利用します。
候補を複数比べるときは、基準色を固定して一項目ずつ変えると差が見やすくなります。色の処理はブラウザ内で完結するため、デザイン案の試作にも手早く使えます。
コントラストチェックとは？
前景色と背景色のコントラスト比を WCAG 2.1 ベースで計算し、通常テキストと大きなテキストの AA / AAA 判定を表示します。 コントラストチェックは、背景色と文字色の読みやすさを数値で検証するためのツールです。UI デザイン、資料作成、ブログや LP の配色調整などで、見た目だけに頼らずアクセシビリティ基準で確認したいときに役立ちます。 計算には WCAG 公式の相対輝度アルゴリズムを使っています。sRGB を線形 RGB に変換し、相対輝度からコントラスト比を求めるため、単純な明度差より実用的な指標になります。 AA / AAA 判定は通常テキストと大きなテキストで基準が異なります。このページでは両方を分けて表示しているため、本文と見出しのどちらが基準を満たすかをその場で判断できます。
よくある質問
Q: このツールは無料ですか？
はい、完全無料で登録不要です。すべての処理はブラウザ内で行われ、データが外部に送信されることはありません。
Q: 「WCAG 2.1 判定」と「操作」はどう使い分けますか？
基本は「WCAG 2.1 判定」から設定し、必要に応じて「操作」や「追加設定」で細かく調整します。「入れ替え」を実行すると「結果」へ反映されるので、条件差を見比べながら調整できます。
Q: 「結果」はそのまま再利用できますか？
はい。表示された「結果」は「前景色をコピー」で持ち出しやすく、資料作成や別の実装作業へそのままつなげられます。条件を変えて複数パターンを作り、比較しながら使う運用にも向いています。
Q: スマートフォンでも使えますか？
はい、レスポンシブデザインに対応しており、スマートフォン・タブレットでもご利用いただけます。
よくある質問
Q.このツールは無料ですか？
A.はい、完全無料で登録不要です。すべての処理はブラウザ内で行われ、データが外部に送信されることはありません。
Q.「WCAG 2.1 判定」と「操作」はどう使い分けますか？
A.基本は「WCAG 2.1 判定」から設定し、必要に応じて「操作」や「追加設定」で細かく調整します。「入れ替え」を実行すると「結果」へ反映されるので、条件差を見比べながら調整できます。
Q.「結果」はそのまま再利用できますか？
A.はい。表示された「結果」は「前景色をコピー」で持ち出しやすく、資料作成や別の実装作業へそのままつなげられます。条件を変えて複数パターンを作り、比較しながら使う運用にも向いています。
Q.スマートフォンでも使えますか？
A.はい、レスポンシブデザインに対応しており、スマートフォン・タブレットでもご利用いただけます。