無料カラーコントラストチェッカー ✅
色の読みやすさとアクセシビリティを確保しましょう！主要な色と補助的な色のコントラスト比をチェックして、WCAG基準に準拠してください。
プライマリテキストの例
コントラスト比:
3.28通常のテキスト:
不合格大きなテキスト:
AAUIコンポーネント:
AA
ColorMagicのコントラストチェッカーは、可読性を確保するためにWebコンテンツアクセシビリティガイドライン（WCAG）に準拠しています:
AAとAAAが実際に求めていること
コントラスト比は二つの色の明るさを比べた値です。文字が背景に溶けて見えなくなる1:1から、白地に黒の21:1までの範囲をとります。WCAGは文字の大きさごとに基準を分けています。大きな文字はコントラストが低くても読めるからです。
AAは多くのチームに求められる水準で、各国のアクセシビリティ法にも書き込まれつつあります。AAAはより厳しい目標で、長く読ませる本文には目指す価値があります。
| 対象 | AA | AAA |
|---|---|---|
| 通常の文字（太字18.66px未満、または24px未満） | 4.5:1 | 7:1 |
| 大きな文字（太字18.66px以上、または24px以上） | 3:1 | 4.5:1 |
| アイコン、境界線、入力欄などのUI要素 | 3:1 | 個別の基準なし |
コントラスト比は対称です。文字色と背景色を入れ替えても同じ値になります。基準が変わるのは文字の大きさだけです。
基準を満たす組み合わせと、満たさない組み合わせ
以下の比率はすべて、上のチェッカーと同じ関数で計算しています。不合格から合格に変わるまでに、色がどれだけ動けばよいかを見てください。
- プライマリテキストの例#1f2937 / #ffffff14.68:1AAA
- プライマリテキストの例#ffffff / #5576ff3.87:1大きな文字のみ
- プライマリテキストの例#6b7280 / #f3f4f64.39:1大きな文字のみ
- プライマリテキストの例#ffffff / #b91c1c6.47:1AA
- プライマリテキストの例#111827 / #fde68a14.24:1AAA
- プライマリテキストの例#ffffff / #facc151.53:1不合格
二番目はColorMagic自身のボタンの色です。白い文字は大きな文字としては基準を満たしますが、本文としては満たしません。コントラストを確認する前に決めたブランドカラーによくある、わずかな不足です。
基準を満たさない組み合わせの直し方
- 背景を明るくするより、文字を暗くしましょう。デザインへの影響が小さく、比率はより大きく動きます。
- 薄いグレーの背景にグレーの文字は、いちばんよくある僅差の不合格です。グレーを一段か二段下げれば基準を満たします。
- 黄色やライム、シアンは明るすぎて、白い文字はまず乗りません。ほぼ黒の文字を使ってください。
- ブランドカラーは大きな見出しやボタン、アクセントに使い、本文には同じ色相の暗いバージョンを用意しましょう。
よくある質問
どのくらいのコントラスト比が必要ですか？
WCAG AAを満たすには、本文で4.5:1、大きな文字やUI要素で3:1が必要です。AAAではそれぞれ7:1と4.5:1になります。一つだけ覚えるなら4.5:1です。
ボタンやアイコンにもコントラストは必要ですか？
必要です。使うために見えていなければならない部分、たとえばボタンの輪郭、入力欄の枠、意味を持つアイコンは、背景に対して少なくとも3:1が必要です。装飾目的の画像や無効状態のコントロールは対象外です。
コントラストは高いほどよいのですか？
いつもそうとは限りません。純黒と純白は21:1に達しますが、長い文章ではきつく感じられ、ディスレクシアや光に敏感な人には負担になることがあります。オフホワイトに濃いグレーならAAAを満たしつつ読みやすくなります。
写真やグラデーションの上の文字はどうすればよいですか？
文字がかかる範囲のいちばん明るい場所と暗い場所の両方で測り、どちらも基準を満たすようにします。実際には、文字の後ろに不透明または半透明の層を敷くことになります。