コントラストチェッカー
前景色と背景色の WCAG コントラストをテストし、実際のテキスト表示を確認しながら、アクセシブルな Pantone 候補を比較できます。
前景色
背景色
コントラスト比
通常テキスト
WCAG AA 4.5:1大きなテキスト
WCAG AA 3:1UI コンポーネント
WCAG AA 3:1ライブプレビュー
本文の読みやすさを確認するための通常テキストのサンプルです。
大きなテキストのサンプル
アクセシブルな Pantone 候補
この色の組み合わせは、選択したコントラスト目標をすでに満たしています。
その他のツール
コントラストチェッカーの使い方
- 前景色と背景色に HEX 値を入力するか、Pantone 色を選択します。
- 通常テキスト、大きなテキスト、UI コンポーネントについて、コントラスト比と WCAG AA/AAA の判定を確認します。
- ライブプレビュー、色の入れ替え、CSS コピー、またはアクセシブルな Pantone 候補を活用します。
コントラストチェッカーの活用例
- ブランドカラーの組み合わせを、デジタルレイアウトに使う前に検証します。
- ボタン、フォーム、ナビゲーションなどの UI コンポーネントが読みやすいコントラストか確認します。
- 印刷色を画面向けに調整する前に、Pantone ベースのパレットを比較します。
- アクセシビリティレビューやデザイン引き継ぎ用に WCAG の判定結果を記録します。
WCAG、UI、Pantone ワークフロー向け色コントラストチェッカー
テキスト色、背景色、ボタン状態、ブランドパレットを Web サイト、アプリ、プレゼンテーション、デザインシステムに入れる前に読みやすさを確認したいときに、このコントラストチェッカーを使えます。
WCAG のコントラスト結果を正しく読む
このツールは 2 色の相対輝度を計算し、WCAG で使われるコントラスト比を返します。通常の本文は AA で 4.5:1、AAA で 7:1 が目安です。大きなテキストや重要な UI コンポーネントは、より低いしきい値が適用されます。
Pantone 色とデジタルアクセシビリティをつなぐ
Pantone 色はブランドや印刷で選ばれることが多い一方、画面上の相当色もアクセシビリティ確認が必要です。Pantone 名や HEX 値で検索し、組み合わせをプレビューして、デザインや開発へ渡す前に代替候補を比較できます。
デザイナーと開発者のための実用的な流れ
デザインファイルの正確な HEX 値から始め、前景と背景を両方向でテストし、CSS またはレポートをコピーし、合格した色の組み合わせを Pantone パレットの資料と一緒に残します。
コントラストチェッカー FAQ
このコントラストチェッカーは何を測定しますか？
前景色と背景色の輝度コントラスト比を測定し、その結果を WCAG のしきい値と比較します。
WCAG AA と AAA のコントラスト要件は？
WCAG AA は通常テキストで少なくとも 4.5:1、大きなテキストまたは UI コンポーネントで 3:1 を求めます。WCAG AAA は通常テキストで 7:1、大きなテキストで 4.5:1 を求めます。
Pantone 色も Web アクセシビリティを確認できますか？
はい。Pantone の参照色を画面用の色値に変換し、デジタル上のコントラストを確認できます。最終的な色は、実際に表示される媒体で必ず確認してください。
コントラストに関する注意
結果はデジタル色値から計算され、アクセシビリティ計画を目的としています。印刷物、素材、照明、ディスプレイの調整によって見え方のコントラストは変化します。