結果は情報提供のみを目的としており、誤りを含む場合があります。重要な情報は必ずご自身で確認してください。本ツールのご利用は自己責任でお願いいたします。
このツールでできること
カラーコントラストチェッカーは、背景の上のテキストがどれだけ読みやすいかを測定します。文字色と背景色を選ぶと、1:1（同じ色）から21:1（白地に黒）までのコントラスト比、ライブプレビュー、そしてWCAGの4つの基準（通常テキストと大きなテキストそれぞれのAAとAAA）を満たすかどうかが表示されます。
コントラスト比はWCAG 2の相対輝度の計算式で求めます。各カラーチャンネルを線形化して重み付けし（緑の比重が最も大きく、青が最も小さい）、明るいほうの輝度を暗いほうの輝度で割ります。その際、両方に0.05を加えます。AAでは通常テキストに4.5:1、大きなテキスト（24px以上、または太字で18.66px以上）に3:1が必要です。AAAではそれぞれ7:1と4.5:1に引き上げられます。計算はブラウザ内で行われます。
こんなときに使えます
- ボタン用のブランドカラーを選び、その上の白いラベルが読みやすいかを確認するとき。
- Lighthouseやaxeによるアクセシビリティ監査でコントラストの低いテキストを指摘され、修正するとき。
- 補助テキスト用に、補助的に見える程度には明るく、それでいてAAを満たすグレーを選ぶとき。
- 中間調のアクセントカラーが暗い背景に対して基準を満たさないことが多い、ダークテーマをデザインするとき。
使用例
#ffffff on #3b82f6
3.68:1 - AA large only
#767676 on #ffffff
4.54:1 - AA normal and large, fails AAA normal
#1e293b on #ffffff
14.63:1 - passes all four
このツールについての質問
明るい青のボタンに白いテキストを載せると不合格になるのはなぜですか？
彩度の高い中間調の色は輝度がかなり高いため、その上の白いテキストは3:1から4.5:1の間に収まることがよくあります。大きな太字のラベルなら合格しますが、本文テキストでは不合格です。コントラスト比が4.5:1に達するまで、背景を1〜2段階暗くしてください。
AAとAAA、どちらを目指すべきですか？
AAはほとんどのアクセシビリティ関連の法律やポリシーが基準としているレベルなので、最低ラインとして扱ってください。AAAはより厳しい目標で、長文を読ませるテキストでは満たす価値がありますが、すべての要素に求められるわけではありません。
コントラストはアイコンや枠線にも適用されますか？
WCAG 2.1では、意味を持つグラフィックやUIコンポーネント（入力欄の枠線、フォーカスリング、情報を伝えるアイコンなど）に少なくとも3:1を求めています。これらには、大きなテキストのAAの結果を目安にしてください。
RGBやHSLで書かれた色をチェックできますか？
カラーピッカーはHEX値を扱います。他の表記は、まずHEX→RGB カラーコード変換などの関連ツールやカラー変換ツールで変換してから、HEXコードを貼り付けてください。
このツールは無料ですか？
はい、無料でご利用いただけます。登録・メールアドレス不要。結果はこのページに表示されます。
結果はどこで確認できますか？
このページでツールを使用すると、結果がここに表示されます。メールで受け取る必要はありません。