コントラストチェッカー
テキスト、アイコン、ボタン、入力欄の境界線、UI状態が背景上で読みやすく保たれているかを確認できます。前景色と背景色を入力すると、WCAGのコントラスト比、通常テキストと大きなテキストのAA / AAA判定、UIコンポーネントAA、透明色を合成した計算結果、推奨前景色、修正候補、コピーできるCSSや監査メモをまとめて表示します。すべてブラウザ内で処理されるため、未公開のブランドカラーや機密性の高いデザインファイルにも安心して使えます。デザインレビュー、コンポーネントQA、ダークモード調整、ブランドカラー展開、アクセシビリティ改善に向いています。
- 通常テキストAA、AAA、大きなテキスト、UIコンポーネントの結果をまとめて表示し、ひとつの数値だけで用途を誤判断しないようにします
- HEX、RGB、HSL、HWB、Lab、LCH、OKLab、OKLCH入力に対応し、デザインファイルやDevToolsの値をそのまま確認できます
- 半透明の前景色や背景色は先に合成してから計算するため、実際にユーザーが見る状態に近い比率を確認できます
- 組み合わせが不合格の場合は、推奨される基本色に加えて、AA / AAAを満たす前景色候補を生成します
- 色指定と監査レポートをワンクリックでコピーでき、PR、デザインレビュー、アクセシビリティ対応チケットに使えます
color: #111827; background-color: #ffffff;
概要
色の組み合わせから、コードベースに戻せる判断までをひとつの画面で確認できます。複数のWCAG観点をまとめて判定し、実用的な修正候補も提示するため、単一のスコアだけで本来の用途を見落とす心配を減らせます。
- 01
WCAG AA / AAAの判定マトリクス
通常テキストAA、AAA、大きなテキスト、UIコンポーネントの結果を並べて表示します。ひとつの数値だけで、誤った用途に承認してしまうリスクを減らします。
- 02
複数形式のカラー入力
HEX、RGB、HSL、HWB、Lab、LCH、OKLab、OKLCHを、事前に構文を整えずそのまま貼り付けられます。
- 03
透明色を自動で合成して計算
アルファ値がある場合は、実効背景に合成してから比率を計算します。フローティングオーバーレイ、半透明ボタン、ガラス風カードの見え方に近い結果を得られます。
- 04
推奨テキスト色
現在の背景に対して黒と白を比較し、素早い判断や緊急修正に使いやすい安全な基本前景色を返します。
- 05
基準を満たす候補色を生成
現在の組み合わせが不合格の場合、ブランドの色相をなるべく保ったまま、明度方向に探索してAA / AAAを満たす近い前景色を探します。
- 06
コピーしやすいCSSとレポート
実装用のcolor / background-color宣言をコピーしたり、PR説明、QAチケット、アクセシビリティ改善ログ向けの完全なコントラストレポートをコピーできます。
- 07
よくあるUIのプリセット
本文、控えめなテキスト、プライマリ・成功・危険ボタン、警告バッジ、リンク、ダークモードテキストなど、よく使う組み合わせを参照できます。
- 08
用途に応じたチェック対象
通常テキスト、大きなテキスト、UIコンポーネントを切り替えて、正しい基準値を適用できます。ボタン枠に誤って4.5:1ルールを当てるような混乱を避けられます。
使い方
流れはできるだけ短くしています。デザインレビュー、コンポーネントQA、チケット対応、ブラウザ上での簡単な確認に組み込みやすく、結果はそのままプロジェクトへ戻せます。
- 01
テキスト、アイコン、コントロールの色を前景色に入れ、周囲の面の色を背景色に入れます。
- 02
チェック対象を選びます。本文なら通常テキスト、大きなラベルや見出しなら大きなテキスト、境界線・アイコン・コントロール状態ならUIコンポーネントを選択します。
- 03
コントラスト比とWCAG判定マトリクスを確認し、どのAA / AAA基準を満たしているかを見ます。
- 04
不合格の場合は推奨前景色を試します。ブランドの色相を保ちたい場合は、AAまたはAAA候補を生成します。
- 05
CSSをスタイルシートへコピーするか、完全なコントラストレポートをPR説明、デザインレビュー、QAメモ、アクセシビリティ改善ログに貼り付けます。
詳細
出力は、ただスコアを見るためではなく、チームで議論し、再現し、デザインシステムに組み込める形で整理されています。
- 通常テキストAA、AAA、大きなテキストAA、AAA、UIコンポーネントAAをまとめて表示し、用途に合った判断ができます
- 半透明オーバーレイ、ガラス風カード、半透明ボタン、ダークモードレイヤー向けに、合成後の計算色を表示します
- 前景色と背景色をワンクリックで入れ替え、反転ボタン、選択状態、反転ラベル、ダークモード派生を確認できます
- レポートには前景色、背景色、コントラスト比、各WCAG判定が含まれ、文書化やチーム運用にそのまま使えます
- 本文、控えめなテキスト、リンク、ボタン、バッジ、ダークモードテキストのプリセットで素早く参照できます
- 現在のチェック対象に応じて合格・不合格が即時更新されるため、小さな本文に誤った基準を適用しにくくなります
- カラー変換やパレット生成と組み合わせることで、正規化された値から安定したアクセシブルなカラースケールへ進めます
- 解析、合成、コントラスト計算はすべてローカルで実行され、未公開のブランドカラーや機密デザインにも使いやすい設計です
- 本文に安全、大きなテキストのみ、UIコンポーネントのみ、非推奨といった違いをメッセージで示し、アクセシビリティの誤用を防ぎます
- AA / AAA候補はブランド色相を保ちやすいよう明度方向に調整されるため、単純な黒白置き換えよりトークン化しやすくなります
活用シーン
コントラストチェックは、色の組み合わせがCSSとして固定される前に行うほど価値があります。色を選ぶ段階に近いほど会話のコストが低く、リリース後にアクセシビリティ問題が再発する可能性も下げられます。
-
デザイン引き渡し前の確認
本文、見出し、ボタン、リンク、ステータスラベルを、実装に入る前に確認します。エンジニアリング側が隠れたアクセシビリティ負債を引き継がないようにします。
-
コンポーネントライブラリのQA
Button、Input、Badge、Alert、Tabsなどを、default、hover、focus、disabled、selected、error状態まで監査し、読みやすさをコンポーネント仕様に組み込めます。
-
ダークモードの色調整
暗い面上の本文、補助ラベル、境界線、アイコンを確認し、明度の階段が十分に広がっているか、アクセントカラーが読みやすいかを見ます。
-
ブランドカラーの展開
ブランドカラーをボタン、リンク、強調表示に使う前に、コントラスト要件を満たすか確認し、必要であれば周辺のトーンスケールを用意します。
-
アクセシビリティ課題の修正
Lighthouse、axe、手動QA、ユーザー報告で見つかった低コントラスト問題を再現し、選んだ修正方針を記録して、単なる場当たり対応で終わらせないようにします。
-
読む量が多いコンテンツページ
ブログ、ドキュメント、ヘルプセンター、商品ページ、長いフォームなど、継続的な読解が中心になる画面の読みやすさを高めます。
-
ランディングページとキャンペーン確認
ヒーローコピー、CTAボタン、価格ラベル、プロモーションバナーなど、視覚演出によって文字の読みやすさが静かに落ちやすい箇所を確認します。
-
管理画面テーマの保守
テーブル、フィルター、ステータス表示、サイドバー、分析カードを、各モジュール任せではなく共通のコントラスト基準に揃えられます。
-
データ可視化パレットの整合
チャート系列色、ステータス色、補助ラベルに共通のコントラスト基準を持たせ、凡例やデータポイントの読みやすさを揃えます。
-
メール・書き出し素材の確認
メールテンプレート、PDFレポート、印刷物はそれぞれ描画環境が異なります。先にコントラストを確認しておくと、下流工程での手戻りを減らせます。
関連情報
デザインファイル、スクリーンショット、既存CSSから来た色が複数形式で混ざっている場合は、まず カラーコンバーター で正規化してから、この画面で組み合わせを確認すると扱いやすくなります。同じ色が多くの状態で不合格になる場合は、個別に置き換えるのではなく、 パレットジェネレーター でより整理されたスケールを作るのがおすすめです。
コントラスト用語の説明
アクセシビリティ監査、デザインシステム文書、フロントエンドレビューでよく出てくる用語です。見た目は問題なさそうではなく、なぜその色の組み合わせが不合格なのかを同じ言葉で話せるようにします。
-
コントラスト比
WCAGではコントラストを1:1から21:1で表します。1:1はほとんど差がない状態、21:1は通常、純粋な黒と白のような最も高いコントラストを指します。
-
相対輝度
コントラストはRGB値を単純に比較するものではありません。WCAGではsRGB値を相対輝度に変換し、明るい色と暗い色の比率を算出します。
-
WCAG AA
多くのWebサイトやWebアプリで基準として使われるアクセシビリティ目標です。通常テキストは少なくとも4.5:1、大きなテキストとUIコンポーネントは一般的に3:1が必要です。
-
WCAG AAA
より厳しい目標です。通常テキストでは7:1が必要で、長文コンテンツ、公共サービス、教育コンテンツ、ドキュメント、読む量が多いUIに向いています。
-
通常テキストと大きなテキスト
通常テキストは本文、ラベル、補足テキストなどを指します。大きなテキストは通常18pt以上、または14pt以上の太字を指し、認識しやすいため基準値が低く設定されています。
-
UIコンポーネントのコントラスト
ボタンの境界線、入力欄のアウトライン、アイコン、選択状態、エラー表示などは、テキストでなくても識別できる必要があります。
-
透明色の合成
rgba、hsla、OKLCHのアルファ値など、透明度を含む色は下にある面の影響を受けます。先に合成すると、実際の表示に近い結果で計算できます。
-
OKLCHと知覚上の明度
OKLCHの明度は、HSLより人の見え方に近い形で扱いやすいため、アクセシブルな色階調、ダークモードパレット、ブランドカラーシステムの設計に役立ちます。
使い方のヒント
コントラストチェックは、最後の修正としてではなく、デザインと開発の流れに組み込むほど効果があります。以下の実践は多くのプロダクトで有効ですが、自分たちの状況に合うものから取り入れてください。
- 本文、ラベル、補足テキスト、エラーメッセージは通常テキストAAを基準にし、読解量が多い領域では必要に応じてAAAを目指します
- 無効状態を低コントラストだけで示さないでください。不透明度、アイコン、ラベル、操作可否のふるまいと組み合わせます
- ダークモードでは、まず明度の階段を調整してから彩度を上げます。彩度だけでは読みやすさはなかなか改善しません
- ボタン、リンク、ステータス表示は、静止画1枚ではなくdefault、hover、focus、selected、error、disabled状態で確認します
- 半透明オーバーレイ、ガラス風カード、フローティングパネルは、汎用の面色ではなく実際のページ背景に対して確認します
- 承認済みの組み合わせは text-primary、text-muted、surface-card、border-subtle などのデザイントークンに昇格させ、都度判断しないようにします
- ブランドカラーが不合格の場合は、ページごとに場当たり的な近似色を選ぶのではなく、基準を満たすトーンステップを作ります
- デザインレビュー、プルリクエストのチェックリスト、リリースQAにコントラスト確認を入れ、手戻りコストを下げます
制限事項
色のコントラストは重要ですが、インターフェイスのアクセシビリティ全体の一部にすぎません。結果は強い判断材料として扱い、実際のページ、実機、総合的なアクセシビリティレビューと組み合わせてください。
- WCAGコントラストに合格しても、アクセシビリティ全体が保証されるわけではありません。意味構造、キーボード操作、フォーカス表示、エラー処理、スクリーンリーダー対応も確認が必要です
- 画像、動画、複雑なテクスチャ、グラデーション上のテキストは、実際のページ上の該当領域から色をサンプリングしてください。単一の背景色は近似にすぎません
- 生成されたAA / AAA候補は素早い検討に役立ちますが、最終色はブランドルール、テーマスケール、視覚階層と照らし合わせて確認してください
- ディスプレイ、ブラウザ、カラーマネジメント設定、周囲の明るさによって読みやすさの感じ方は変わります。重要ページは実機で確認してください
- このツールは入力された色を評価します。CSS変数、Tailwind設定、デザイントークンの元データを自動で検査するものではありません
- APCAとWCAG 2.xは異なるコントラストモデルを使います。このツールは現在、WCAG 2.xのコントラスト比を表示します
- 動きのある背景や動画上のテキストは、再生中に観察する必要があります。静的な比率だけでは、その体験を完全には捉えられません
よくある質問
日々の作業、アクセシビリティ対応、職種をまたぐ協業の中で、コントラストチェックを使うときによく出る質問です。基準値、修正方針、限界についてまとめています。
カラーコントラストチェッカーは何を解決するツールですか？
テキスト、アイコン、コントロールが背景に対して読みやすいかを確認するツールです。デザインレビュー、フロントエンド実装、アクセシビリティ改善の場面で、問題の有無と修正の方向性を明確にできます。
通常テキストAAで4.5:1が必要なのはなぜですか？
WCAG 2.xでは、通常の本文に必要な最小コントラスト比として4.5:1が定義されています。主観ではなく相対輝度から計算されるため、チームで共有しやすい安定した基準になります。
AAAを目指すべきなのはどんな場合ですか？
長文の読み物、公共サービス、教育コンテンツ、ドキュメント、読みやすさが特に重要なプロダクト領域ではAAAが向いています。多くのUIではまずAAを基準にします。
大きなテキストが3:1で合格するのはなぜですか？
大きい文字や太い文字は認識しやすいため、WCAGでは低めの基準値が認められています。ただし細い書体、複雑な背景、小さな画面では、より強いコントラストが必要になる場合があります。
UIコンポーネントAAは何をチェックしますか？
ボタンの境界線、入力欄のアウトライン、アイコン、選択状態、エラー表示など、テキストではない要素の識別性を確認します。フォームや管理画面ではここに問題が出やすいです。
透明色は結果に影響しますか？
はい。半透明の前景色や背景色は、下にある面に依存します。このツールでは先に色を合成し、その実効結果からコントラストを計算します。
見た目では読めそうなのに不合格になるのはなぜですか？
書体、太さ、周囲の要素、明るさ、デザインツールの描画などが見え方に影響します。コントラスト比は、チームで再現しやすい共通基準を提供します。
OKLCHはアクセシブルな色設計にどう役立ちますか？
OKLCHの明度は人の知覚に対して比較的予測しやすいため、テーマ、ダークモード、ブランドシステム向けのアクセシブルな色階調を作りやすくなります。
黒か白の推奨だけでは不十分ではありませんか？
黒と白は素早い基準確認に便利です。完成度の高いUIでは、生成されたAA / AAA候補を出発点として、ブランドカラースケールの中に組み込むのがおすすめです。
レポートはチーム作業に使えますか？
はい。レポートには前景色、背景色、比率、各合格・不合格結果が含まれるため、PR説明、QAメモ、デザインレビュー、アクセシビリティ追跡に使いやすいです。
色データはアップロードされますか？
いいえ。解析、合成、コントラスト計算はすべてブラウザ内で実行されます。未公開のブランドカラーや機密性の高いデザインファイルにも安心して使えます。
コントラストが合格した後は何を確認すべきですか？
フォーカス表示、キーボード操作、フォームのエラーメッセージ、ARIAとセマンティックHTML、動的状態のフィードバック、スクリーンリーダー挙動を確認してください。コントラストは全体の一部です。
APCAにも対応していますか？
現在はWCAG 2.xのコントラスト比を表示します。プロジェクトでAPCAが必要な場合は、このツールをベースライン確認として使い、専用のAPCAツールで追加確認してください。
グラデーションや画像背景上のテキストはどう扱えばよいですか？
背景の最も明るい部分と最も暗い部分を別々にサンプリングし、それぞれの組み合わせを確認してください。どちらも基準に少し届かない場合は、暗めのスクリムを足すか、テキストを落ち着いた領域へ移動することを検討してください。
関連ツール
コントラストチェッカーをカラー変換、パレット生成、グラデーション生成と組み合わせると、色の組み合わせを選んだ状態からアクセシブルなデザイントークンとして実装した状態までつなげられます。読みやすさをレビューコメントではなく、コードベースの中に残せます。