Color Contrast Checker

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

このツールは、前面（テキスト）のカラーと背景色のコントラスト比を計算し、その組み合わせがWCAG 2.0アクセシビリティ・ガイドラインのAAおよびAAAレベルを満たしているかどうかを確認します。また、色覚多様性のシミュレーション、不合格ペアの修正提案、および複数のフォーマットでのコードエクスポート機能も備えています。

色のコントラストを確認する方法

色の選択

• Color A（前面/テキスト）とColor B（背景色）のそれぞれに16進数（hex）入力とカラーピッカーがあります。
• 各ピッカーの下にあるShade Scaleで明るさを微調整できます。任意のシェードをクリックすると、すぐに適用されます。
• Color WheelはColor Aの色相を視覚的に調整します。その下に補色が表示され、クリックするとColor Bとして適用されます。
• SwapはColor AとColor Bを入れ替えます。

結果の見方

結果	内容
Contrast Ratio	計算された比率（1:1 – 21:1）。高いほど良好です。
A11y Score	コントラスト比に基づく100点満点のアクセシビリティスコア。
WCAG AA / AAA	各レベルのNormal Text（通常テキスト）およびLarge Text（大きいテキスト）の合格または不合格。
Preview	選択した色を使った見出し、本文テキスト、ボタン、バッジ、入力フィールド、カードのライブプレビュー。
Fix Suggestion	コントラストがAAで不合格の場合、合格に最も近いシェードとその比率を提案するクリック可能なカードが表示されます。クリックして適用します。

WCAGの基準値

レベル	Normal Text	Large Text
AA	最低4.5:1	最低3:1
AAA	最低7:1	最低4.5:1

• Normal text: 18pt未満（または14pt太字未満）
• Large text: 18pt以上（または14pt太字以上）

追加機能

• Undo / Redo – 色の変更履歴を前後に移動できます。
• Share Result – 現在の色が埋め込まれたURLをコピーします。それを開いた人は誰でも同じ組み合わせを見ることができます。
• Pin – 最大8つの色の組み合わせを保存して、並べて比較できます。ピン留めしたペアをクリックすると、それが再読み込みされます。
• Brand Colors – 8つの実際のブランドパレット（Spotify, Slack, GitHubなど）とそのコントラスト比。クリックして読み込むことができます。
• A11y Check – 4種類の色覚（Protanopia, Deuteranopia, Tritanopia, Achromatopsia）をシミュレーションし、それぞれの有効なコントラスト比を表示します。
• Code Output – CSS、Tailwind 4、Tailwind 3、Flutter、React用のそのまま貼り付け可能なコードを生成します。折りたたみ可能なセクションで、デフォルトで開いています。
• Randomize / Clear All – アクセシビリティに配慮した色の組み合わせをランダムに生成したり、デフォルトにリセットしたりします。

良い例

例 1: 白背景にグレーのテキスト – よくある間違い

白背景に明るいグレーのテキストは洗練されて見えますが、アクセシビリティの基準を満たしません。

• Color A: #999999、Color B: #ffffff
• Contrast Ratio: 2.85:1 – AA 不合格
• Fix Suggestionでは、4.9:1 – AA 合格となるシェード600（#595959）が提案されます。クリックして適用します。

例 2: ブランドパレットの確認

Brand ColorsセクションでSpotifyをクリックします。

• Color A: #191414（黒）、Color B: #1DB954（緑）
• Contrast Ratio: 4.9:1 – AA 合格, AAA 不合格
• このペアをPinし、次にLinkedIn（#0A66C2上の#ffffff、4.7:1）を試して比較します。

例 3: ダークモードの設計

暗いネイビーの背景に対して読みやすいテキストの色を見つけます。

• Color A: #e0e0e0、Color B: #1a1a2e
• Contrast Ratio: 12.4:1 – AA および AAA 合格
• A11y Checkを開いて、4種類の色覚すべてで合格することも確認します。

例 4: 開発者ワークフロー – コードエクスポート

良い組み合わせが見つかったら、Code Outputを展開し、使用しているフレームワークを選択します：

• CSS: カスタムプロパティ --fg および --bg
• Tailwind 4: 任意のカラー値
• React: インラインスタイルオブジェクト

スニペットをプロジェクトに直接コピーします。

重要なヒント

• Brand Colorsから始める。 既存のブランドを確認する場合は、16進数値を手動で入力するのではなく、プリセットリストからクリックしてください。
• Fix Suggestionを使用する。 コントラストが不合格の場合、推測に頼らずに提案カードをクリックして、合格する最も近いシェードに自動的にジャンプします。
• Pinしてペアを比較する。 いくつかの色のオプションから選ぶときは、それぞれをPinしてください。それらを再読み込みして並べて比較できます。
• 色覚多様性も確認する。 WCAGに合格したペアでも、色覚多様性のあるユーザーには区別しにくい場合があります。A11y Checkセクションを開いて確認してください。
• 決定を共有する。 Share Resultを使用して、正確な色のペアのURLをデザイナーやレビュー担当者に送信します。

計算式

WCAG 2.0は相対輝度を使用してコントラスト比を定義しています：

$CR = \frac{L_1 + 0.05}{L_2 + 0.05}$

変数	意味
$CR$	Contrast Ratio
$L_1$	明るい色の相対輝度
$L_2$	暗い色の相対輝度

相対輝度は、線形化後のsRGB値から計算されます： $L = 0.2126R + 0.7152G + 0.0722B$

よくある質問

AAまたはAAAのどちらを目指すべきですか？

AAはほとんどの国における最低限の法的基準です。AAAはより優れた可読性を提供しますが、すべてのデザイン要素で達成するのは困難です。実践的なアプローチとしては、本文テキストにはAA、警告やエラーなどの重要な情報にはAAAを目指すのが良いでしょう。

WCAGに合格していれば、色覚多様性のあるユーザーのアクセシビリティも保証されますか？

WCAGのコントラスト比は輝度をチェックするものであり、色相の区別をチェックするものではありません。WCAGに合格したペアでも、色覚多様性の人には同じに見えることがあります。A11y Checkセクションを使用して確認し、常に色だけでなくアイコンやテキストラベルを補足として使用してください。

このツールはどのコードフォーマットをサポートしていますか？

CSSのカスタムプロパティ、Tailwind CSS v3およびv4（任意の値）、FlutterのColor()オブジェクト、Reactのインラインスタイルです。Code Outputセクションのトグルからフォーマットを選択してください。

色の組み合わせを保存して共有できますか？

はい。Pinを使うと、比較のために最大8つのペアをローカルに保存できます。Share Resultでは色が埋め込まれたURLがコピーされ、それを開いた人は誰でもまったく同じペアを見ることができます。