Contrast Checker
WCAG contrast check
WCAG contrast check ブラウザ内でローカルに実行
The quick brown fox
Small body text at 14px
| Normal text (AA) | needs 4.5:1 | Pass |
| Normal text (AAA) | needs 7:1 | Pass |
| Large text 18pt+ (AA) | needs 3:1 | Pass |
| Large text 18pt+ (AAA) | needs 4.5:1 | Pass |
| UI components and graphics (AA) | needs 3:1 | Pass |
Text: #1a1a1a Background: #ffffff Contrast ratio: 17.40:1 Normal text (AA) (needs 4.5:1): Pass Normal text (AAA) (needs 7:1): Pass Large text 18pt+ (AA) (needs 3:1): Pass Large text 18pt+ (AAA) (needs 4.5:1): Pass UI components and graphics (AA) (needs 3:1): Pass
About the
コントラスト チェッカーは、WCAG 輝度公式を使用してテキストの色と背景色のコントラスト比を測定し、そのペアがどのアクセシビリティ レベルに合格するかを示します。これは、本文テキストが実際に読みやすいかどうかを決定するチェックです。通常のテキストの場合は 4.5 対 1 の比率が最小値であり、大きなテキストとインターフェイスの境界の場合は 3 対 1 が、強化されたコンプライアンスの場合は 7 対 1 です。目でコントラストを判断することは信頼できません。目は青よりも緑に対してはるかに敏感であるため、明るく見える黄色と暗く見える青がほぼ同じスコアになる可能性があります。
Where people use the
- 色付きの背景上の本文テキストが AA を満たすかどうかを確認します。
- ボタンの色を黒または白のテキストから選択します。
- 再設計前の既存のパレットの監査。
- アクセシビリティに関する決定をチケットに文書化します。
How to use the
- 1
文字の色を設定する
1a1a1a などの 16 進値を入力するか、カラー ピッカーを使用します。 f0a などの 3 桁の短縮表記が使用できます。
- 2
背景色を設定する
背景も同様です。いずれかを変更すると、プレビューが更新されます。
- 3
比率を読む
この数字は、1:1 (同色) から 21:1 (白地に黒) まであります。高いほど読みやすいことを意味します。
- 4
必要なレベルを確認してください
通常の本文は、AA の場合は 4.5 対 1、AAA の場合は 7 対 1 が必要です。 18 ポイントまたは 14 ポイントの太字の見出しと UI の境界線には 3 対 1 が必要です。
- 5
番号だけでなくプレビューも見てください
ペアは紙の上では通用しますが、小さいサイズや低品質の画面では見栄えが悪くなります。読みにくそうなら、読みにくいです。
ヒントとベストプラクティス
- テキストの色を暗くし、塗りつぶしには明るいバージョンを維持します。
- 実際にテキストが使用される最小サイズを確認してください。
- テキストだけでなく、枠線やアイコンも 3 対 1 が必要です。
よくある質問
コントラスト比の計算式とは何ですか?
各色は、ガンマ補正後、標準の重み (赤は 0.2126、緑は 0.7152、青は 0.0722) を使用して相対輝度に変換されます。この比率は、明るい輝度に 0.05 を加えたものを、暗い輝度に 0.05 を加えた値で割ったものになります。結果の範囲は 1:1 ～ 21:1 です。
私のブランドカラーが失敗するのはなぜですか?
なぜなら、ほとんどの飽和した中間色は白に対して 4.5 対 1 に達することができないからです。通常の修正方法は、大きな塗りつぶし用に明るいバージョンを維持しながら、テキスト用の色を暗くすることです。これは、ほとんどのデザイン システムが原色で行っていることとまったく同じです。
比率を渡すだけでアクセスできるようになりますか?
それは必要ですが十分ではありません。非常に大きいまたは非常に小さいテキスト、細いフォントの重み、画像上のテキスト、および特定の色覚異常はすべて、比率を超えて可読性に影響します。可能な場合は実際のユーザーを使ってテストしてください。
方向は重要ですか、暗いところに光、それとも光の上に暗いのか？
いいえ、比率は対称的であるため、白地に黒、および黒地に白のスコアは両方とも 21:1 になります。実際に異なるのは、まぶしさと知覚される重さであり、これはコンプライアンスによるものではなく、設計上の判断です。
何が大きなテキストとしてカウントされますか?
WCAG 用語では、18pt 以上、太字の場合は 14pt 以上。 CSS ピクセルでは約 24 ピクセル、太字の場合は約 18.66 ピクセルになります。
計算はどこで行われますか?
全てブラウザ内で。何もアップロードされていないので、まだ公開されていないブランドガイドラインからカラーを確認することができます。