コントラスト確認
文字色と背景色を指定して、コントラスト比とWCAGのAA・AAA基準を確認します。通常の文字と大きい文字の判定を、実際の2色による表示例と一緒に見られます。
できること
2色の比率を確認
文字色と背景色を指定し、コントラスト比を小数2桁で表示します。
AA・AAAの基準を比較
通常の文字と大きい文字を分けて判定し、選んだ2色による表示例を確認できます。
黒・白との比率を確認
任意の詳細を開くと、文字色を黒と白にそれぞれ重ねた場合の比率を比べられます。
使い方
文字色を入力
HEX・RGB・HSL・HSV・CMYKから形式を選び、文字色の値を入力します。色面から選ぶとHEXへ切り替わります。
背景色を指定
背景色は3桁または6桁のHEXで入力するか、色面から選びます。#は省略できます。
コントラストを確認
「コントラストを確認」で比率、文字の表示例、AA・AAAの判定を見ます。色を変えたら再度確認します。
こんなときに便利
本文と背景の組み合わせを確認
ページで使う文字色と背景色を入力し、通常の文字が必要な比率を満たすか確認します。
見出しの配色を比べる
大きい文字の判定と表示例を見て、見出しに使う2色を検討します。
判定の読み方
AAとAAAの比率
AAは通常の文字で4.5:1以上、大きい文字で3:1以上です。AAAは通常の文字で7:1以上、大きい文字で4.5:1以上です。判定には表示用に丸める前の比率を使います。
大きい文字の条件
18pt以上、または14pt以上の太字を指します。CSSでは24px以上、太字なら約18.7px以上が目安です。表示例は16pxと24pxの通常の太さで示します。
判定できる範囲
不透明なsRGBの2色を対象にした文字コントラストの確認です。画像背景、透明度の合成、文字以外の要素やページ全体の適合は判定しません。
よくある質問
比率が基準を満たせば、ページ全体も適合しますか？
この判定は選んだ2色の文字コントラストだけを対象にしています。ページ全体の適合は別途確認してください。
黒・白の比較は何を示しますか？
指定した文字色と黒・白との比率です。入力した背景色の判定とは別で、比率が高い方を示します。
透明な文字色や画像の上の文字も判定できますか？
透明度や画像背景は扱いません。不透明な文字色と背景色を入力してください。
入力と結果
- 文字色
- HEX・RGB・HSL・HSV・CMYKの数値、または色選択。CMYKはICCを使わない概算です。
- 背景色
- 3桁・6桁のHEX、または色選択。透明度は扱いません。
- 結果
- コントラスト比、通常・大きい文字のAA・AAA判定、文字の表示例。結果の保存はありません。