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

テキスト色と背景色のコントラスト比を計算し、WCAG 2.0 の AA / AAA 基準を満たしているか確認できるツールです。

色を入力すると、コントラスト比と判定結果が即時表示されます。見出し・本文・アクションボタンを含むプレビューカードで、実際の UIに近い見え方も確認できます。数値と見た目の両方を見ながら配色を判断できるため、アクセシビリティチェックにもデザインの微調整にも使いやすいつくりです。

Spotify や Netflix など有名ブランドを模したプリセットも用意しており、ワンクリックで実在の配色を試せます。

使い方

1. テキストカラーと背景カラーを入力する
2. コントラスト比が自動計算され、即座に表示される
3. AA / AAA、ノーマル / ラージテキストの 4 パターンの判定を確認する
4. プレビューカードで実際の見え方を確認しながら色を微調整する

色の入れ替えボタンでテキストと背景を反転できます。ブランドプリセットを使えば、有名ブランドの配色をワンクリックで試せます。

確認できる内容

• コントラスト比
• AA / AAA の判定（ノーマルテキスト / ラージテキスト）
• カテゴリラベル・見出し・本文・アクションボタンを含むライブプレビューカード

ブランドプリセット

Spotify、Netflix、IKEA、Slack など 8 ブランドの配色プリセットを用意しています。ボタンをクリックすると、テキスト色と背景色の両方がセットされ、判定結果も即座に更新されます。

同じブランドでも、コントラスト比は大きく異なります。たとえば Apple（薄灰 × 黒）は約 19:1 で全基準を余裕で満たしますが、IKEA（黄 × 青）は約 5.7:1 で AA ノーマルテキストは通過しても AAA では落ちます。実際のブランドがどの程度のコントラストを確保しているか、比較してみてください。

WCAG 2.0 の基準

AA

• normal text: 4.5:1 以上
• large text: 3:1 以上

AAA

• normal text: 7:1 以上
• large text: 4.5:1 以上

large text は、18pt（約 24px）以上、または太字 14pt（約 18.5px）以上の文字を指します。本文テキストと見出しでは必要な基準が変わるので、用途に合わせて確認するのが安全です。

表示例

テキストカラー #121212、背景カラー #FAFAFA の場合：

• コントラスト比: 18.09:1
• AA ノーマル: 読みやすい / AA ラージ: 読みやすい
• AAA ノーマル: 読みやすい / AAA ラージ: 読みやすい

全基準を通過する高コントラストな組み合わせです。プレビューカードでも、カテゴリラベル・見出し・本文・アクションボタンのすべてがはっきりと読み取れます。

活用シーン

• 本文テキストやボタンラベルの見やすさを確認したいとき
• ダークモードとライトモードで配色を見直したいとき
• ブランドカラーを使いながらアクセシビリティ基準を満たしたいとき
• 有名ブランドの配色を参考に、自社のカラーパレットのコントラストを検討したいとき
• デザインレビュー前に WCAG の最低限の条件を確認したいとき

使うときの注意点

• 判定はテキスト色と背景色の組み合わせに対するもので、余白や文字サイズそのものは自動調整されません
• large text と normal text では基準が異なるため、同じ配色でも用途によって評価が変わります
• コントラスト比が高くても、細い文字や小さな文字では読みづらく感じることがあります
• ブランドプリセットは実際の各社の公式デザインシステムとは異なる場合があります。あくまで代表的な配色を参考値として提供しています