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

色コントラストチェッカーについて

この無料の色コントラストチェッカーは、文字色と背景色のコントラスト比を測定し、通常サイズと大きいサイズの文字について WCAG AA および AAA を満たしているかどうかをお知らせします。

処理はブラウザー内で行われ、何もアップロードされません。

比が意味するもの

コントラスト比は、2 つの色の相対輝度、つまりそれぞれがどれだけ光を放つか反射するかを、1:1 から 21:1 までの尺度で比較したものです。

• 1:1 — 同一の色で、文字は見えません
• 21:1 — 純黒と純白の組み合わせで、達成できる最大値です
• 4.5:1 — WCAG AA における通常の本文テキストの最低値です

重要なのは、この計算が色がどれだけ違って見えるかではなく、輝度に基づいているという点です。2 つの色がまったく違って感じられても、基準を満たさないことがあります。赤と緑の組み合わせが典型例です。見た目には鮮烈ですが輝度がほぼ同じで、多くの人にとってほとんど読めません。

これが、コントラストを目で判断できない理由でもあります。デザイナーは良質なモニターで、光が管理された環境で、若い目を使って作業しています。スタジオで上品に見える明るいグレーは、日なたのスマートフォンでは消えてしまいます。

しきい値

WCAG は 2 つのレベルを定めており、要件は文字の大きさによって変わります。

レベル AA — 通常の目標であり、ほとんどのアクセシビリティ関連法が参照しているレベルです。

• 通常の文字には 4.5:1
• 大きい文字には 3:1
• ユーザーインターフェイスの部品と意味を担うグラフィックには 3:1

レベル AAA — より厳しい基準で、ロービジョンの読者に向けたコンテンツに適しています。

• 通常の文字には 7:1
• 大きい文字には 4.5:1

大きい文字とは、18pt（24px）以上、または14pt（18.66px）の太字以上を指します。文字が大きいほど線が太くなるため、低いコントラストでも耐えられます。

ほとんどのサイトにとって現実的な目標は AA です。AAA はデザイン全体で達成するのが難しく、一般的なコンテンツに求められることはありません。

これが想像以上に多くの人に関係する理由

コントラストを「例外的なケース」として片付けるのは簡単ですが、数字はそうではないと語っています。

男性の約 12 人に 1 人、女性の約 200 人に 1 人が何らかの色覚特性を持っており、世界でおよそ 3 億人にのぼります。赤と緑に関するものが圧倒的に多数です。

40 歳を超えるほぼすべての人がコントラスト感度の低下を経験します。また、加齢とともに水晶体が黄変し、青色の見え方が変化します。

誰にでも、時として起こります。 コントラストの不足は、視力に問題のない人にも影響します。屋外で読むとき、画面を暗くしているとき、安価なモニターを使っているとき、バスの中で指紋だらけのスマートフォンの画面越しに読むときです。ここでのアクセシビリティの改善は、すべての利用者にとっての可読性の改善にほかなりません。

法的な側面もあります。WCAG 2.1 AA は、実務上、米国障害者法（Americans with Disabilities Act）、米国連邦調達における Section 508、欧州アクセシビリティ法（European Accessibility Act）、そして英国、カナダ、オーストラリアの同等の規則で参照されています。コントラストはアクセシビリティに関する申し立てで最も頻繁に指摘される不備のひとつですが、これは測定が非常に容易であることが大きな理由です。

デザインがつまずきやすい場所

• フォーム項目の薄いグレーのプレースホルダー文字 — きわめてよく見られ、ほぼ必ず基準を満たしません
• 写真の上の白い文字 — 比率は画像の場所によって変わります。オーバーレイやスクリム（覆い）を加えてください
• ブランドカラーを文字色として使う場合 — 白地に中間調のコーポレートブルーやオレンジを置くと、多くの場合 3:1 付近になります
• 無効状態 — 要件の対象外ですが、それでも読める状態に保つ価値があります
• 色だけで区別しているリンク — リンクが周囲の文字と同じ明るさなら、下線を付けてください
• 黄色地に白い文字、あるいはグレー地にグレーの文字 — 昔からの常連です
• ダークモード — 純黒に純白は理論上 21:1 ですが、ハレーションを起こします。少し和らげた色のほうが読みやすくなります
• 白地に赤いエラーメッセージ — 最も重要なメッセージであるにもかかわらず、4.5:1 を下回ることがよくあります

基準を満たさない組み合わせを直す

組み合わせが基準を満たさない場合は、色相ではなく明度を変えてください。多くの場合、ブランドカラーを見分けられる状態に保ちながら、基準を満たすだけ暗くしたり明るくしたりできます。

実践的な方法:

大きな要素にはブランドカラーをそのまま使います。 見出し、ボタン、アイコンなどでは、しきい値が 3:1 です。本文テキストにはより暗い派生色を使ってください。

片側だけを調整します。 背景を変えるより、文字を暗くするほうが影響が小さいのが普通です。

画像の上ではスクリムを重ねます。 写真と文字の間に半透明の暗い層を置く方法です。写真に何が写っていても比率を保証できます。

意味を伝えるのに色だけに頼らないでください。 アイコン、ラベル、下線を加えれば、色をまったく見分けられない人にも情報が残ります。

使い方

• 文字色と背景色を選びます
• コントラスト比と、AA / AAA の合否バッジを確認します
• ライブプレビューを読んでご自身で判断し、色を調整します

知っておくとよいこと

• 実際に使う色を、不透明度も含めてテストしてください。 不透明度 70% の文字は、背景に対しては事実上別の色です。
• 両方のテーマを確認してください。 ライトモードで基準を満たすパレットが、ダークモードでは満たさないことがあります。
• ロゴはコントラスト要件の対象外です。 付随的な文字や装飾的な文字も同様です。
• 細い書体は、比率が示す以上に実際には高いコントラストを必要とします。 規格は線の太さを測りませんが、読み手はそれを感じ取ります。
• 可能であれば日中に屋外でスマートフォンで確認してください。 どんなモニターよりも正直なテストになります。
• 合格は下限であって目標ではありません。 4.5:1 は許容できる最低値であり、目指す水準ではありません。

よくある質問

良いコントラスト比とはどのくらいですか？

通常の本文テキストでは、WCAG AA を満たすために少なくとも 4.5:1 が必要です。これはほとんどのアクセシビリティ関連法が参照するレベルです。大きい文字、つまり 18pt/24px または 14pt/18.66px の太字以上には 3:1 が必要です。より厳しい AAA レベルでは、通常の文字に 7:1 を求めます。これらは目標ではなく最低値と考えてください。快適に読める水準はたいていそれよりかなり上にあります。

WCAG の AA と AAA の違いは何ですか？

AA は、ほとんどの規制や組織が採用している実務上の基準で、通常の文字に 4.5:1、大きい文字に 3:1 を求めます。AAA はより厳しく、それぞれ 7:1 と 4.5:1 で、ロービジョンの読者に特化したコンテンツを想定しています。AAA はデザイン全体で達成するのが難しく、一般的な用途のサイトに求められることはありません。

自分にはきれいに見えるのに、色の組み合わせが基準を満たさないのはなぜですか？

コントラストが、2 つの色がどれだけ違って見えるかではなく、輝度から計算されるからです。赤と緑は大きく違って見えますが輝度が近く、だからこの組み合わせは基準を満たしません。個人の判断も当てになりません。デザイナーは通常、良質な画面で、照明が管理された環境で、良い視力のもとに作業していますが、多くの読者はそうした条件にありません。

画像やアイコンにもコントラストは関係しますか？

はい。WCAG は、ユーザーインターフェイスの部品と、状態を示すアイコンやフォーム項目の枠線のように意味を担うグラフィックに 3:1 を求めています。純粋に装飾的な画像とロゴは対象外です。よくある問題は写真の上に置いた文字で、比率が画像の場所によって変わるためです。半透明のオーバーレイを重ねれば解決します。

ブランドカラーを損なわずに、基準を満たさない色の組み合わせを直すにはどうすればよいですか？

色相ではなく明度を調整してください。同じ色のより暗いバージョンや明るいバージョンなら、たいていブランドらしさを保ったまましきい値を超えられます。3:1 で済む見出し、ボタン、アイコンには元の色を残し、4.5:1 が求められる本文テキストにはより暗い派生色を使うという方法もあります。

純黒に純白が最良の選択ですか？

21:1 で最大値ですが、必ずしも最も読みやすいわけではありません。非常に高いコントラストはハレーション（文字の周囲がにじんで光る現象）を引き起こすことがあり、特にダークモードや、ディスレクシアや乱視のある一部の読者で顕著です。オフホワイトの上の非常に濃いグレー、あるいは濃いグレーの上の少し落とした白のほうが、余裕をもって基準を満たしつつ、読み心地が良いことがよくあります。

選んだ色はどこかに送信されますか？

いいえ。色を選ぶそばからブラウザー内で比率が計算されるため、何も送信も保存もされず、このツールはオフラインでも動作します。

関連ツール

• カラーピッカー — 色を見つけ、HEX、RGB、HSL の間で変換する
• 画像カラーピッカー — 画像から色を取り出す
• 画像からカラーパレット — パレットを作り、ここでテストする
• CSS グラデーションジェネレーター — グラデーションの両端で文字のコントラストを確認する