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

カラーコントラストチェッカーとは#

カラーコントラストチェッカーは、文字色と背景色のコントラスト比を求め、WCAGの基準で合否を判定します。2色を入力すると、通常テキストと大きな文字それぞれのAA・AAAの結果、APCAの参考値、サンプル記事のプレビューが表示され、調整しながら読みやすい組み合わせを確かめられます。

使い方#

文字色と背景色を、スウォッチから選ぶかhexの値を入力して設定します。どちらの色を変えても、コントラスト比とAA・AAAの合否、プレビューはすぐに更新されます。明度スライダーを使うと、それぞれの色をその場で微調整できます。

結果の見方#

• コントラスト比: 1.00〜21.00の値です。大きいほど2色の明るさの差が大きくなります。
• AA・AAA: WCAG 2.xの段階です。AAは一般的な最低基準、AAAはより厳しい基準です。通常テキストはAAが4.5以上、AAAが7以上。大きな文字はAAが3以上、AAAが4.5以上です。大きな文字は24px以上、または太字で18.66px以上を指します。
• APCA: 新しいコントラストのモデルです。Lcの値と帯を示します。Lc75以上は通常の文字、60以上は大きな文字に使え、60未満は不足です。WCAGの結果と並べる参考値として扱います。

活用シーン#

• デザインを実装する前に、文字色がAAを満たすか確認する。
• 色付きの背景に乗せる文字色を探す。
• ブランドカラーがボタンのラベルや注釈に使えるか確かめる。
• 配色を決める前に、WCAGとAPCAの両方で見比べる。

よくある質問#