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

使い方

1. 文字色と背景色を、カラーピッカーまたはHEXコード（#333333 など）で指定します。
2. コントラスト比とWCAGのAA・AAA判定がリアルタイムで更新されます。
3. 「⇄ 入れ替え」で文字色と背景色を入れ替えて比較できます。RGB・HSLの値はそのままコピーしてCSSに使えます。

コントラスト比とは

コントラスト比は、2つの色の明るさ（相対輝度）の差を 1:1 〜 21:1 の数値で表したものです。 1:1 は同じ色、21:1 は黒と白の組み合わせを意味し、数値が大きいほど文字が読みやすくなります。 このツールはWCAG 2で定められた正式な計算式（sRGBの相対輝度に基づく式）で算出しています。

なぜコントラストが重要なのか

十分なコントラストがないと、ロービジョン（弱視）の方や色覚特性のある方にとって文字が読み取れない場合があります。 また、晴れた屋外でスマートフォンを見るときや、輝度を下げたディスプレイなど、誰にとっても読みにくい状況は日常的に発生します。 WCAGでは通常文字で 4.5:1 以上（AA）が基準とされており、公共機関のサイトや企業サイトでも達成が求められる場面が増えています。 デザインの早い段階でコントラストを確認しておくと、あとからの手戻りを防げます。

WCAGの基準値まとめ