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

機能の説明

前景色と背景色の間の WCAG 2.2 コントラスト比を計算し、アクセシビリティのしきい値に対して判定します。通常テキストの AA（≥ 4.5:1）、大きいテキストの AA large（≥ 3:1）、そして AAA（≥ 7:1）です。計算は本物の相対輝度の式です - 各 sRGB チャンネルを線形化し、WCAG の係数で合成し、比は (lighter + 0.05) / (darker + 0.05) となります。

#rgb と #rrggbb の HEX 色を受け付け（大文字小文字を区別せず、先頭の # はあってもなくても可）、3 つのしきい値すべての合否バッジを一度に表示し、ライブプレビューパネル - パングラムとグリフ/数字の行を指定された色のペアで描画 - を表示します。100% クライアント側です。

使い方

1. 前景色を設定します: スウォッチをクリックしてカラーピッカーを開くか、テキストフィールドに HEX 値を入力します。
2. 同じ方法で背景色を設定します。ツールは #07070b の上の #e9e9f1 で開きます - 設計上 AAA を満たすペアです。
3. スワップをクリックして 2 色を入れ替えます - テーマの暗色地に明色と明色地に暗色の両方を確認するのに便利です。
4. 結果を読みます: 比率（小数 2 桁）と AA、AA large、AAA の 3 つのバッジ。それぞれ緑（合格）か赤（不合格）です。
5. 下のプレビューブロック - 選んだペアで描かれたテキスト - で自分の目で確認します。
6. どちらかの値が有効な HEX 色でない場合、ツールはエラーを表示し、修正するまで結果を非表示にします。

例

src/lib/color.ts の contrastRatio()（ツールが使うのと同じ関数）を実行して検証:

#e9e9f1 on #07070b   16.65:1   AA pass · AA large pass · AAA pass   (tool defaults)
#ffffff on #000000   21.00:1   AA pass · AA large pass · AAA pass   (the maximum)
#f8fafc on #1e293b   13.98:1   AA pass · AA large pass · AAA pass
#abc    on #000000   10.69:1   AA pass · AA large pass · AAA pass   (3-digit shorthand works)
#767676 on #ffffff    4.54:1   AA pass · AAA fail                   (the classic "just barely AA" gray)
#777777 on #ffffff    4.48:1   AA fail · AA large pass              (one notch darker fails AA)
#3b82f6 on #ffffff    3.68:1   AA fail · AA large pass              (Tailwind blue-500 on white)

#767676 と #777777 のペアは、正確な計算が目測に勝つ理由を示します - HEX の 1 単位の差が 4.5:1 の AA ラインを跨ぎます。

補足事項

• プライベート: 計算はすべてブラウザー内で実行され、どこにも送信されません。
• カラー名（red、white）やその他の CSS 色形式は拒否されます - HEX のみです。#rgb または #rrggbb を入力してください。
• AAA-large の独立したバッジはありません - ツールはコードの通り AA（通常）、AA large、AAA（通常）を表示します。
• 比率は対称です - 前/背景を入れ替えても数値は変わらず、プレビューを読む方向だけが変わります。
• 関連ツール: カラーピッカー & コンバーター、Color Palette Generator、CSS Gradient Generator