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

テキスト色と背景色のコントラスト比をWCAG 2.1基準で計算・判定します。AA/AAA基準の合否判定やリアルタイムプレビュー、基準を満たす色の自動補正提案が可能です。

色の設定

HEX
HEX

コントラスト比

12.63:1
コントラスト比
AA 通常テキスト
4.5:1 以上
合格
AA 大きいテキスト
3:1 以上
合格
AAA 通常テキスト
7:1 以上
合格
AAA 大きいテキスト
4.5:1 以上
合格

プレビュー

大きいテキスト(24px 太字)
通常テキスト(16px)- これはサンプルテキストです。この文章がどのように表示されるかを確認できます。アクセシビリティに配慮したデザインは、すべてのユーザーにとって読みやすいウェブサイトを実現します。
小さいテキスト(12px)- 補足情報や注釈などの小さい文字のプレビューです。

色の補正提案

コントラスト比が基準を満たさない場合、基準を満たす最も近い色を提案します。色をクリックすると適用されます。

現在の色の組み合わせはすべてのWCAG基準を満たしています。

使い方・活用例

  • ウェブサイトのテキスト色と背景色がWCAGアクセシビリティ基準を満たしているか確認
  • デザインシステムのカラートークンがアクセシブルかどうかを検証
  • コントラスト比が不足している場合、自動補正提案で最適な色を素早く見つける
  • 大きいテキスト・通常テキスト・小さいテキストでの見え方をリアルタイムプレビュー

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

WEBデザインやコンテンツ制作時に、テキストと背景のカラーコントラスト比が適切かどうかを検証するツールです。色覚障害を持つユーザーやモニター環境が異なるユーザーにとって、文字が読みやすいかどうかをWCAG 2.1という国際基準に基づいて判定できます。アクセシブルなWEBサイト制作に欠かせません。

使い方ガイド

テキスト色と背景色をそれぞれ選択またはカラーコードで入力するだけです。リアルタイムでコントラスト比が計算され、AA・AAA基準への適合状況が表示されます。比率が基準を満たさない場合、自動補正機能で推奨色を提案してもらえます。プレビュー画面で実際の見栄えも確認できるため、デザイン修正前に問題を把握できます。

活用シーン

・WEBサイトのリニューアルでアクセシビリティ基準への対応が求められる場合、全ページのテキスト色と背景色の組み合わせを一括チェック
・ブログやメディアサイトのテンプレート設計時に、見出しや本文のカラー配置が多くのユーザーに読みやすいかを事前検証
・スマートフォンアプリのUIデザイン段階で、暗いテーマと明るいテーマの両方について色使いを最適化
・公共機関や医療機関のサイト運営で、法的要件を満たす色使いの確認

知っておきたいポイント

コントラスト比は数値が大きいほど色の差が大きいことを意味します。WCAG 2.1ではAAは4.5:1以上、AAAは7:1以上が目安です。同じテキスト色でも背景によって読みやすさが大きく変わるため、複数の組み合わせをテストすることが重要です。また、色だけで情報を区別しないという原則も同時に意識しましょう。

よくある質問

WCAGコントラスト比とは何ですか?

WCAGコントラスト比は、Web Content Accessibility Guidelines(WCAG)で定められたテキスト色と背景色の明るさの差を数値化した指標です。1:1(差なし)から21:1(黒と白)の範囲で表され、数値が大きいほど読みやすくなります。

WCAG AA基準とAAA基準の違いは何ですか?

AA基準は最低限のアクセシビリティレベルで、通常テキストで4.5:1以上、大きいテキスト(18pt以上または14pt太字以上)で3:1以上が必要です。AAA基準はより高いレベルで、通常テキストで7:1以上、大きいテキストで4.5:1以上が求められます。

大きいテキスト(ラージテキスト)の定義は?

WCAGでは、18ポイント(約24px)以上の通常テキスト、または14ポイント(約18.66px)以上の太字テキストを「大きいテキスト」と定義しています。大きいテキストは通常テキストよりも低いコントラスト比で合格となります。

コントラスト比はどのように計算されますか?

コントラスト比は、2つの色の相対輝度(relative luminance)を使って計算されます。計算式は (L1 + 0.05) / (L2 + 0.05) で、L1は明るい色、L2は暗い色の相対輝度です。相対輝度はsRGB色空間の各チャンネルをガンマ補正して算出します。

色の自動補正提案とは何ですか?

コントラスト比が基準を満たさない場合、元の色の色相を保ったまま明度を調整して基準を満たす色を自動提案する機能です。前景色または背景色を明るく・暗くすることで、目標のコントラスト比を達成する最も近い色を見つけます。

入力したデータはサーバーに送信されますか?

いいえ。すべての処理はブラウザ上で完結しており、入力データがサーバーに送信されることはありません。安心してご利用いただけます。

RGB値やHSL値で色を入力することはできますか?

はい、HEXコードの他にRGB(例:rgb(255, 0, 0))やHSL(例:hsl(0, 100%, 50%))の値を直接入力できます。色ピッカーを使わずテキストで指定したい場合に便利です。

グラデーション背景の上のテキストコントラストも測定できますか?

グラデーションそのものの測定は難しいため、最も明るい部分と最も暗い部分の2つの色で別々に測定することをお勧めします。グラデーション内で最もコントラストが低い部分をチェックすると、全体的なアクセシビリティが確保できます。

色弱者(色盲)の人にも対応できる色選びをサポートしていますか?

このツールはWCAG基準のコントラスト比に基づいているため、色盲の人にも区別しやすい色の組み合わせをサポートしています。特に赤緑色弱者のために、赤と緑の組み合わせは避け、青とオレンジなどの配色を推奨します。

同じコントラスト比でも、異なる色の組み合わせで見え方は変わりますか?

はい、コントラスト比が同じ3:1でも、色相の違いにより人間の目には異なる明るさに見える場合があります。複数の色の組み合わせでテストして、実装前に確認することをお勧めします。

小さいテキスト(通常テキスト)でもWCAG AAA基準を満たすべきですか?

法的要件によって異なりますが、アクセシビリティのベストプラクティスとしては、特に重要な情報(見出しやコールトゥアクション)は小さいテキストでもWCAG AAA基準(7:1)を目指すことが推奨されています。

自動補正を複数回実行すると、さらに改善されますか?

いいえ、自動補正は1回の実行で最適な色を提案するため、複数回実行しても結果は変わりません。補正後のコントラスト比が目標値に達していない場合は、より極端な色の変更が必要なことを意味します。