WCAGカラーコントラストチェッカーは 2 つの入力ボックスを持つツールです. ページには前景色のボックスと背景色のボックスがあり, それぞれカラーピッカーとテキストボックスを備えます. その下には結果として, リアルタイムのプレビュー, コントラスト比, 4 枚の合格/不合格カードがあります. 実行ボタンはなく, 調整できる項目もありません. いずれかの色を変えると, すべての数値がその場で更新されます. どこにも送信されません. 輝度の計算は端末のブラウザ内で実行されます.
2 つのカラー入力とリアルタイムプレビュー
前景はテキストの色, 背景はその奥にある色です. デフォルトは白地に黒, #FFFFFF に対して #000000 です. 各ボックスは #F00 のような 3 桁の 16 進や #767676 のような 6 桁を受理し, 先頭の # は省略可能なので, 000000 も #000000 と同じに解析されます. 各ボックスの横にはカラーピッカーがあり, 選ぶとテキストボックスが自動で埋まります. 2 色とも有効になると結果領域が現れます: 選択した色の組み合わせで 3 つの文字サイズのサンプルテキストをレンダリングするプレビュー, 比, 4 枚の WCAG カード. どちらかのボックスに 3 桁または 6 桁の 16 進以外が入ると, 結果領域全体が消え, 推測値を表示しません.
コントラスト比の計算方法
ツールは標準の WCAG 式に従います. 各 16 進カラーは 0 から 255 の RGB 値に変換され, 各チャンネルは sRGB 曲線から線形化され, 係数 0.2126(赤), 0.7152(緑), 0.0722(青)で重み付けられて相対輝度になります. 比は明るい側の輝度に 0.05 を足した値を, 暗い側の輝度に 0.05 を足した値で割ったものなので, 常に 1 以上で, 純黒と純白の差である 21 を超えません. 数は小数点 2 桁で, 後ろにコロンと 1 が付いて表示され, 白地に黒は 21.00:1, 同じ色同士は 1.00:1 と読めます. 比はどちらの色を前景と呼ぶかに依存しません. 2 つのボックスを入れ替えても同じ数になります.
4 つの固定閾値と境界値
4 枚のカードが比を 4 つの固定の下限値に対して判定します: 通常テキストの AA が 4.5:1, 大号テキストの AA が 3:1, 通常テキストの AAA が 7:1, 大号テキストの AAA が 4.5:1. 各カードは判定の下にその下限値を表示します. 境界は込みなので, 下限値ちょうどでも合格です. 実務でよく見る値: #767676 を白地にすると 4.54:1 で AA 通常に合格, #777777 を白地にすると 4.48:1 で不合格, 合格線から 16 進で 1 ステップ違いです. #808080 を白地にすると 3.95:1 で大号テキストのみ合格, #595959 を白地にすると 7.00:1 で 4 枚すべて合格, AAA 通常を含む.
大号テキストの基準: 3:1 と 4.5:1 の 2 枚の読み方
WCAG での大号テキストは, 18 ポイント以上の通常, または 14 ポイント以上の太字です. おおよそ 24px 以上の通常, または 19px 以上の太字に相当します. ツールは文字サイズを測定せず, サイズの入力もありません. 常に 4 つの判定をすべて計算するので, 結果を読むのは 2 段階です. まず 4 枚のカードを見て, 次に自分のデザインが実際に使うテキストサイズがどちらかを決めます. 大号テキストなら 3:1 と 4.5:1 の大号カードが適用され, 通常サイズなら 4.5:1 と 7:1 の通常カードが適用されます. たとえば 4:1 の比は AA 大号カードに合格し, AA 通常には届かず, 2 枚の AAA にもどちらも届きません.
境界ケース: 無効な 16 進と同色
パーサーは先頭の # を 1 個除去した後, 3 桁または 6 桁の 16 進のみを受理します. それ以外は結果を非表示にします: 5 桁, alpha チャネル付きの 8 桁, 16 進外の文字, いずれもページを 2 つの入力ボックスだけ残します. 前景と背景が同じ色だと 1.00:1 となり 4 枚すべて不合格. これはテキストが背景と同じ色であるときの誠実な判定です. 16 進の大文字小文字は同じ扱いで, 3 桁の省略形は桁ごとに展開されるので, #F00 は #FF0000 です. 結果領域にバリデーションメッセージはなく, 非表示が唯一の合図です. カードが消えたときは, その理由を知っておく価値があります.
完全にクライアントサイド, 保存はしません
2 つの 16 進値はブラウザの外に出ることはありません. 送信も履歴も保存した色のペアもコピーボタンもありません. 計算は 2 つの現在の入力の純関数で, ページを再読み込みすると白地に黒のデフォルトに戻ります. 2 つのボックスの間に入れ替えコントロールはなく, ペアを反転するには 2 つの値を打ち直す必要があります. 近い合格色を教えてくれる提案機能もありません. ツールは比と 4 つの判定を報告し, 調整はあなた自身が行います.
ツールが保持するものと, 次の一手先
保持するのは何もありません. ネットワーク要求は発されず, 何も保存されず, 再読み込みで 2 つのボックスは #000000 と #FFFFFF に戻ります. カラーと CSS のワークフローの残りについては, カラー変換で 16 進値を HEX, RGB, HSL の間で相互変換し, CSS単位変換で px, rem, em, pt を換算して, 文字サイズを大号の線に照合し, CSS フォーマッタでこれらの色を運ぶスタイルシートを整えます. 同じページのマークアップ側を広く見たい場合は, HTML フォーマットガイドを参照してください.