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

テキストと背景色のコントラストを確認してください。

モックアップ上では魅力的に見える2色でも、小さなテキストやコントロールに適用すると読みにくくなる場合があります。前景色と背景色のHEXカラーを入力して、コントラスト比と、WCAG 2.x AAおよびAAAのテキスト基準に対する組み合わせの性能を確認してください。プレビューでは、これらの色が一般的なテキスト、ボタン、インターフェースのコンテキストに表示されるため、単なる数値だけでなく、実際の組み合わせを評価できます。

WCAGのコントラスト結果は何を意味するのでしょうか？

• 通常のテキスト：AA基準には4.5:1以上、AAA基準には7:1以上が必要です。
• 大きなテキスト：AA基準には3:1以上、AAA基準には4.5:1以上が必要です。WCAGでは、標準の太さで24px以上、または太字で約18.7px以上の文字を大きなテキストとします。
• 意味のあるUI部品やグラフィック：隣接する色に対し、テキスト以外のコントラスト基準として3:1以上が必要になる場合があります。

合否は、表示値の小数点以下の桁数にかかわらず、丸める前の比率で判定します。1組の色が合格しても、ページや部品全体がWCAGに準拠しているとは限りません。ほかの色の組み合わせ、状態、フォーカス表示、意味構造、操作性も確認する必要があります。

色の組み合わせをテストする方法

1. 前景色と背景色のHEX値を入力するか、ピッカーで色を選択してください。
2. コントラスト比、標準テキスト、大文字、UI表示結果を確認してください。
3. ライブインターフェースプレビューを確認してください。色を変更して、デザインに適用する前に結果を比較してください。