仕様と根拠

計算の式

各色の 8 ビットの値を 255 で割り、0.04045 以下なら 12.92 で割り、それ以外は (c + 0.055) ÷ 1.055 の 2.4 乗にして、0.2126・0.7152・0.0722 の重みで足し合わせると相対輝度 L です。明るい方を L1、暗い方を L2 として、比は (L1 + 0.05) ÷ (L2 + 0.05) です(WCAG 2.2)。

判定の基準

通常の文字は 4.5:1 以上、大きな文字(18pt 以上、または太字で 14pt 以上。1pt は 4/3 CSS ピクセルなので 24 ピクセル以上、太字なら約 18.7 ピクセル以上)は 3:1 以上が必要です。比は丸めずに比べます。表示は小数第 2 位を切り捨てるため、4.499 は 4.49 と表示し、4.5 に届いたようには見せません。

対象外のもの

ロゴや文字を含む装飾、使えない状態の部品の文字などには基準がありません。このツールは色の組の数値を計算するだけなので、どの文字が基準の対象になるかは利用者が判断してください。

根拠にした仕様・資料

指摘の段階

• エラー: 仕様に反していて、正しく読めない・処理できない入力です。
• 警告: 読めるものの、仕様の推奨に反する・矛盾する・意図と違う結果になりやすい入力です。
• 情報: 誤りではありませんが、知っておくとよい扱い(読み飛ばした部分や解釈)です。

入力の扱い(送信しない仕組み)

処理はすべてお使いのブラウザの中で行います。処理の本体はこのサイトから配信する小さなスクリプト(/app.js)で、外部のサービスやライブラリを読み込みません。ページはブラウザに通信を禁止させる設定(Content-Security-Policy の connect-src)つきで配信しており、入力した内容がサーバーや第三者へ送られることはありません。ファイルを選んだ場合も、端末の中で読み込むだけです。

このツールでできないこと(制約)

• 画像・写真・グラデーションの背景の上の文字、透明度(アルファ)つきの色は扱いません。重ねた後の不透明な色を入力してください。
• 色の名前(red など)・rgba()・hsl() は読めません。#rrggbb か rgb() に直して入力してください。
• 文字以外のアイコンや枠線のコントラスト(別の達成基準)は判定しません。
• 文字の大きさ・太さは入力された値だけで判断します。実際に描画されるフォントの大きさは確かめません。