コントラストチェッカー

コントラストチェッカーは前景色と背景色の2つを比較し、その組み合わせで書いたテキストが読みやすいかどうかを判定するツールです。WCAGのコントラスト比を計算し、標準の4つの基準(通常テキストのAA、大きいテキストのAA、通常テキストのAAA、大きいテキストのAAA)と照らし合わせます。カラーピッカーで選ぶか、HEXコードを直接入力すると、プレビューがその場で更新されます。

コントラスト比はどう計算されますか?

このツールはWCAG 2の計算式をそのまま実装しています。まず各色のsRGBチャンネルを線形化し(モニターが適用するガンマカーブを打ち消す処理です)、赤21.26%・緑71.52%・青7.22%という標準的な重み付けで相対輝度を求めます。この重みは人間の目が各色にどれだけ敏感かを反映したものです。次に、2色の輝度のうち明るい方を暗い方と比較し、周囲光の影響を考慮した小さな定数を両方に加えることで、1:1(同一色)から21:1(純粋な黒と白)までの比率を算出します。この比率を4つの基準値と照合します。通常テキストのAAは4.5:1、大きいテキストのAAは3:1、通常テキストのAAAは7:1、大きいテキストのAAAは4.5:1です。入力は3桁・6桁のHEXカラーのみ受け付けます。常に完全に不透明な2色を比較するため、アルファ値やその他の記法は必要ありません。

データはどこかにアップロードされますか?

されません。計算はすべてブラウザ内で完結し、サーバーには何も送信されません。確認した色が外部に送信されることはないため、社内のデザインシステムやクライアントのカラーパレットのブランドカラーを、どこにも送らずにチェックできます。

WCAGで「大きいテキスト」とはどの範囲を指しますか?

WCAGでは18pt(24px)の標準ウェイト以上、または14pt(18.66px)の太字以上を大きいテキストと定義しています。文字が大きく太いストロークは、コントラストが低くても視認性を保ちやすいため、本文テキストより緩い基準が設定されています。デザインを公開する前に本文テキストがWCAG AAを満たしているか確認したり、ボタンのラベルが背景に対して読みやすいか調べたり、既存サイトのカラーパレットのアクセシビリティを監査したりするのに使えます。基準の正確な計算式と考え方はW3CのUnderstanding Contrast Minimumを、平易な解説はWebAIMのコントラスト記事を参照してください。