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

使い方

前景色（テキスト色）と背景色の2つのカラーコードを選択または入力してください。コントラスト比がリアルタイムで更新され、各WCAG基準に対する合否が表示されます。「色を入れ替える」ボタンで前景色と背景色を反転できます。大きなサンプルテキストと通常テキストのプレビューで、実際の見え方を確認してから色を決定できます。

コントラスト比とは

コントラスト比は、WCAG（Web Content Accessibility Guidelines）で定義されている、1:1（無コントラスト）から21:1（純黒と純白による最大値）までの数値です。2色の相対輝度から (明 + 0.05) / (暗 + 0.05) として計算されます。比率が高いほど読みやすく、特に低視力のユーザーや明るい環境下でのアクセシビリティが向上します。

WCAG基準

WCAG 2.1は、テキストサイズと適合レベルごとに最低コントラスト比を定めています。AAは多くのサイトが目指す標準、AAAはより厳しく、行政や医療系サイトで要求されることがあります。通常テキストは18pt未満（太字なら14pt未満）、大きなテキストは18pt以上（太字なら14pt以上）です。AA通常は4.5:1、AA大は3:1、AAA通常は7:1、AAA大は4.5:1が必要です。WCAG 2.1ではさらに、意味を持つUIコンポーネント・アイコン・図形にも隣接背景との3:1以上のコントラストが要求されます。

主な用途

• パレット決定前にアクセシブルな色の組み合わせを確認するデザイナー。
• 実装中にボタン・リンク・フォーム要素のコントラストをチェックする開発者。
• 引用・キャッチコピー・装飾テキストの可読性を検証するコンテンツ編集者。
• WCAG適合レポートを作成するアクセシビリティ監査者。
• デザインシステムのカラートークンがAA・AAAを満たすか確認するプロダクトマネージャー。

ヒント

• AA通常で不合格の場合、比率が4.5:1以上になるまでテキストを濃くするか背景を明るくしてください。
• 純黒（#000）と純白（#fff）の組み合わせが最大値21:1です。
• 装飾テキスト（ロゴ・偶発的なテキスト）はWCAGコントラスト規定の対象外ですが、意図したコンテンツは対象です。
• 意味を持つアイコンは「UIコンポーネント」に該当し、隣接背景に対して3:1以上のコントラストが必要です。
• 3桁（#fa0）と6桁（#ffaa00）の両方の16進数形式に対応しています。

プライバシー

すべてのコントラスト計算はブラウザ内で完結します。色の値がサーバーに送信されたり保存されたりすることはありません。