コントラストチェッカーの基本仕様と評価範囲
当カラーコントラストチェッカーは，利用者が指定した二つの不透明なsRGB単色について，文字色と背景色のコントラスト比を算出するツールです．比較対象は入力欄やカラーピッカーで指定した二色であり，Webページ全体を自動走査するアクセシビリティ監査機能ではありません．
入力欄では，シャープ記号に続く3桁または6桁の16進数，つまり「#RGB」か「#RRGGBB」の形式を受け付けます．例えば#fffは#ffffffへ，#38aは#3388aaへ展開して計算します．R・G・Bを別々に入力する欄，rgba()やhsl()を直接解釈する欄，アルファチャンネルを含む8桁HEXには対応していません．
形式が不完全な間はエラーを表示し，輝度，比率，合否，代替色候補を計算しません．
各色はカラーピッカーから選ぶこともできます．文字色と背景色を入れ替えるボタンがあるため，同じ二色で前景と背景を反転した見た目も確認できます．コントラスト比そのものは明るい側と暗い側から求めるので，二色を入れ替えても数値は変わりません．ただし，画面のテキストプレビューでは前景と背景の役割が変わります．
画面には相対輝度，コントラスト比，通常テキストとlarge-scale textのAA・AAA結果を並べます．下部のプレビューは選んだ二色を20pxの太字見出しと通常文へ適用した表示例です．実際のサイトからCSSやDOMを読み取るわけではないため，利用先の文字サイズ，太さ，状態，周辺色を確認し，該当する行を利用者自身が選ぶ必要があります．
WCAGのAA・AAA基準と3対1の参考表示
WCAG 2.1および2.2の達成基準1.4.3「Contrast (Minimum)」はレベルAAです．通常のテキストは4.5:1以上，large-scale textは3:1以上が基準になります．より高い達成基準1.4.6「Contrast (Enhanced)」はレベルAAAで，通常テキストは7:1以上，large-scale textは4.5:1以上です．
本ツールは入力した二色をこれら四つの閾値と比較します．
コントラスト比に独立したレベルAの数値閾値があるわけではありません．レベルAの1.4.1「Use of Color」は，色だけを情報伝達の唯一の視覚的手段にしないという別の達成基準です．このツールが表示するのはAAとAAAの文字コントラストであり，A・AA・AAAの三段階を一つの比率だけで総合判定するものではありません．
画面には，UI部品の境界などに関する3:1も参考として表示します．達成基準1.4.11「Non-text Contrast」はレベルAAで，UIコンポーネントを識別するために必要な視覚情報や，内容理解に必要なグラフィカルオブジェクトと隣接色との間に3:1以上を求めるものです．ボタン内の文字を常に3:1へ下げられるという意味ではなく，文字そのものには1.4.3の基準が関係します．
本ツールは，コンポーネントのどの線が識別に必要か，どの色が隣接するか，通常・ホバー・フォーカス・選択・無効などの各状態がどう変わるかを解析しません．そのため3:1の欄は「参考値以上」「参考値未満」と表示し，この二色だけで1.4.11全体の合格・不合格を確定しません．
また，数値上の閾値を満たすことと，あらゆる利用者にとって実際に読みやすいことは同義ではありません．細い書体や特殊なフォントは，指定色の比率を満たしていてもアンチエイリアス後の表示が薄く見える場合があります．この結果だけでページ全体のWCAG適合や可読性を保証せず，実際の端末と表示条件でも確認してください．
相対輝度とコントラスト比の計算方法
HEXから得た赤・緑・青の各8bit値は，まず255で割って0から1のsRGB成分へ正規化します．現在のW3C定義では，正規化した成分Cが0.04045以下ならCを12.92で割り，それより大きければ「(C + 0.055) / 1.055」の2.4乗を用いて線形化します．
以前のWCAG資料では分岐値に0.03928が使われていましたが，現在は0.04045です．本ツールも現在の値へ合わせています．なお8bitチャンネルでは10/255が約0.039216，11/255が約0.043137であり，二つの境界値の間に整数チャンネル値がありません．そのため#RGBや#RRGGBBに限れば，この境界変更だけで実際の計算結果が変わるわけではありません．
線形化したR・G・Bから，相対輝度Lを「0.2126R + 0.7152G + 0.0722B」で求めます．相対輝度は黒が0，白が1です．緑の係数が最も大きいのは，sRGBの各成分を同じ重みで平均するのではなく，規定された輝度係数を用いるためです．
二色のうち明るい側の相対輝度をL1，暗い側をL2として，コントラスト比は「(L1 + 0.05) / (L2 + 0.05)」で求めます．同じ色同士は1:1，黒と白は21:1です．初期値の文字色#3b82f6と背景色#ffffffでは，未丸めの比率は約3.6779:1になり，画面では3.68:1と表示されます．
この組み合わせはlarge-scale textのAAで使う3:1を超えますが，通常テキストAAの4.5:1には届きません．
合否判定には未丸めの比率を使い，丸めは画面表示にだけ適用します．例えば内部値が4.499:1なら表示上は4.50:1になりますが，4.5:1以上という閾値には達していないため通常テキストAAは不合格です．候補色を探すときも同様に，返却するHEXの未丸め比率が目標値以上であることを確認します．
large-scale textの定義とプレビューの読み方
WCAGのlarge-scale textは，18pt以上，または14pt以上の太字，CJKではそれに相当するサイズと定義されています．WAIのUnderstanding文書ではCSS換算の目安として18ptを約24px，14ptを約18.5pxと説明しています．
ただし，このpx値を日本語を含むすべての書体に対する絶対的な境界として扱うのではなく，フォントや言語を含めた相当サイズを考える必要があります．
「太字であればサイズを問わずlarge-scaleになる」という基準ではありません．例えば小さな太字はlarge-scale textの閾値をそのまま適用できません．反対に，十分に大きな通常ウェイトの文字であれば18pt以上の条件に該当します．デザイン仕様のfont-sizeとfont-weightを確かめてから，通常またはlarge-scaleの結果を選んでください．
ツール内の大きなテキスト例は20pxの太字，通常テキスト例は14px相当で表示します．これは二色を実際の文字へ当てたときの見え方を並べるための簡易プレビューです．利用先のフォントファミリー，文字の太さ，OSやブラウザの文字描画まで再現するものではありません．
また，本ツールはURLを入力してWebページを解析したり，要素のfont-sizeやfont-weightを取得したりしません．通常文字AA，大きな文字AA，通常文字AAA，大きな文字AAAの四行を同時に表示するのは，自動判定した結果ではなく，同じ二色を各数値閾値と比較して選択材料を示すためです．
文字画像にもコントラスト要件が関係する場合がありますが，このツールは画像内の文字領域を認識しません．画像から色を取得する場合は，文字の縁や背景の変化を考慮し，実際に接している色の組み合わせを別途選んで入力してください．
HSL明度を変えた文字色候補の仕組み
通常テキストAAの4.5:1またはAAAの7:1に届かない場合，本ツールは背景色を固定して代替の文字色候補を探します．元の文字色をHSLへ変換し，色相Hと彩度Sを固定したまま，明度Lだけを0%から100%まで1%刻みで試します．全101点のうち，目標比率を未丸め値で満たし，元のHSL明度との差が最も小さいHEXを候補として示します．
候補のHEXへ変換するときはRGBチャンネルが整数へ丸められます．そのため探索中の浮動小数点RGBだけで通過を決めず，実際に画面へ返すHEXをもう一度RGBへ戻し，その色と背景色の比率が閾値を満たすことを確認します．「適用」を押すと候補を文字色へ入れ，比率と各結果を再計算できます．
この方式で最小にしているのはHSLのL値の差だけです．RGB空間の距離，LabやOKLab，色差ΔEを使った知覚的な近さではなく，連続する全色を探索するものでもありません．そのため「最も近い色」「最適色」「最短の色変更」ではなく，色相・彩度を固定した1%刻みの明度候補として利用してください．
背景色によっては，文字色だけを変更しても通常テキストAAAの7:1を達成できません．背景の相対輝度が0.10より大きく0.30未満なら，白との比も黒との比も7:1未満です．白と黒は不透明sRGBの明暗の両端なので，この範囲では他の文字色でも7:1へ届きません．その場合は未達成の現在色を候補として表示せず，背景色も変更する案内を出します．
AAの4.5:1は，同じ不透明sRGBの前提なら黒または白のどちらかが到達できる範囲です．ただし実際のブランド色やデザイン要件に合うとは限りません．候補をそのまま確定せず，色の役割，状態変化，実際の文字表示を見ながら調整してください．
透明度・画像背景・UI状態などの非対応範囲
本ツールは二つの不透明なsRGB単色だけを比較します．alpha付きHEX，rgba()，CSSのopacity，半透明レイヤーは受け付けず，背後の色との合成結果も計算しません．半透明要素では祖先背景や重なった要素によって最終色が変わるため，画面に実際に描画される合成後の色を別途確認する必要があります．
グラデーション，写真，模様，背景画像では，文字の背後の色が位置によって変化します．このツールへ一つの代表色だけを入力しても，すべての文字位置を評価したことにはなりません．文字へ接する複数箇所を確認し，最もコントラストが低くなる組み合わせを含めて個別に検討してください．
Display-P3，Lab，LCH，OKLCHなどの色空間を直接解析する機能もありません．CSS変数，継承，疑似要素，ホバー・フォーカス・選択・無効状態を走査せず，色覚タイプ別の見え方を再現するシミュレーションも行いません．色だけで情報を伝えていないか，フォーカス表示が見えるか，状態ごとの境界が識別できるかといった課題は別に確認します．
入力したHEXの検証，相対輝度，比率，HSL候補の計算は，画面上のJavaScriptとしてブラウザ側で実行します．これは計算対象の二色を外部サービスへ送って解析する専用APIを使わないという処理範囲の説明です．ページ表示，広告，アクセス解析，共通機能，ブラウザ拡張などの通信まで否定するものではなく，サイト全体の完全オフラインや安全性を保証する表現ではありません．
このチェッカーは配色を検討する一つの数値確認手段です．数値基準，実際の文字，画像や透明度，操作状態，色以外の手掛かりを組み合わせて確認し，必要に応じてページ全体を対象にした別のアクセシビリティ監査も行ってください．