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

コントラスト比とは

コントラスト比は、文字色と背景色の明るさの差を1 : 1から21 : 1までの数値で表した指標です。黒と白の組み合わせが最大の21 : 1で、同じ色どうしは最小の1 : 1になります。

• 計算の仕組み：コントラスト比は、2色をsRGBの相対輝度に変換し、明るい方の輝度と暗い方の輝度にそれぞれ0.05を足して割り算した値です。
• 数値の目安：白い背景（#FFFFFF）に対して、灰色の#777777は4.47 : 1、#999999は2.84 : 1、黒（#000000）は21 : 1のコントラスト比になります。

WCAGのAAとAAAの違い

WCAGはWebコンテンツのアクセシビリティに関する国際的なガイドラインで、コントラスト比の合格ラインをAAとAAAの2段階で定めています。

• AA（標準の水準）：AAは普通の文字で4.5 : 1以上、大きな文字で3.0 : 1以上を求める基準で、一般的なWebサイトが目標にする水準です。
• AAA（より厳しい水準）：AAAは普通の文字で7 : 1以上、大きな文字で4.5 : 1以上を求める基準で、視力の低い人にも読みやすいことを目指す水準です。

大きな文字の定義

WCAGの大きな文字とは、おおよそ18ポイント（24px）以上、または太字で14ポイント（約18.7px）以上の文字を指します。

• 普通の文字：普通の文字は大きな文字に当てはまらないサイズの文字で、本文や注釈などの読み物が該当し、4.5 : 1以上のコントラスト比が必要です。
• 見出しとの関係：見出しでも24px未満で太字でなければ普通の文字として扱われるため、サイズだけでなく太さも確認が必要です。