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

文字色と背景色をふたつ指定すると、WCAG 2.1 の定義どおりにコントラスト比を計算して、AA / AAA の合否を4項目まとめて判定するツールです。数値だけでなく、その配色で実際に文字を置いたプレビューが同じ画面に出ます。「この薄いグレー、本文に使って大丈夫だろうか」と迷った瞬間にその場で確かめられるように作りました。

こんなときに使う

• サイトの本文色をグレーで揃えたいが、どこまで薄くしたら読みにくくなるか判断がつかないとき
• デザインカンプで決まった配色が、アクセシビリティの基準を満たしているか納品前に確認したいとき
• ボタンの背景色と白抜き文字の組み合わせが、小さいサイズの文字でも通用するか調べたいとき
• 文字色と背景色を入れ替えた反転パターンでも同じ比率になるのか、手を動かして確認したいとき

使い方

1. 「前景色（文字色）」の欄で、カラーピッカーを開いて色を選ぶか、右のテキスト欄に HEX を直接入力します。初期値は #1a1a1a です。
2. 同じ要領で「背景色」を指定します。初期値は #ffffff です。
3. 右側のプレビュー枠に、指定した配色で16pxの通常テキスト、24pxの太字、小さめの英文が表示されるので、目でも確かめます。
4. 下段にコントラスト比が小数点2桁で出ます。その下の4枚のカードで、AA・AAA それぞれの合否を確認します。
5. 「⇅ 前景色と背景色を入れ替え」を押すと2色が入れ替わります。反転配色を見比べたいときに使います。

仕様と機能

コントラスト比は sRGB の相対輝度を求めてから、(明るいほうの輝度 + 0.05) ÷ (暗いほうの輝度 + 0.05) で算出しています。輝度の重みは R が 0.2126、G が 0.7152、B が 0.0722 で、各チャンネルは 0.03928 を境にリニア変換をかけています。判定はこの1つの比率を4つのしきい値と突き合わせるだけです。

判定項目	必要な比率
AA・通常テキスト	4.5:1
AA・大きい文字	3:1
AAA・通常テキスト	7:1
AAA・大きい文字	4.5:1

HEX 入力は3桁の省略記法にも対応していて、#36c と書けば #3366cc として解釈します。先頭の # はあってもなくても構いません。解釈できない文字列を入れた場合は枠が警告色になり、「有効なHEX（例: #3366cc / #36c）を入力してください」というメッセージが出て、結果欄は計算を止めます。合格数は「4項目中 n 合格」という形で比率の横に添えています。

計算はすべてブラウザの中で完結します。入力した色をどこかに送信することはなく、保存もしていないので、ページを離れれば初期値に戻ります。

作るときに決めたこと

いちばん悩んだのは、判定を何項目出すかでした。WCAG の合否は「大きい文字かどうか」で基準が変わるのに、比率をひとつ出して「AA 合格」とだけ書くツールにすると、本文には足りていないのに合格だと誤解される余地が残ります。そこで通常・大の区別を潰さず、AA と AAA を掛け合わせた4項目をそのまま並べる形にしました。カードの中に「必要比 4.5:1」と数字を書いているのも、なぜ落ちたのかを比率と直接見比べてほしかったからです。

プレビューを結果より上、入力の真横に置いたのも意図的です。コントラスト比は数値だけ見ても体感と結びつきにくく、7:1 がどのくらい濃いのかは実物を見ないと分かりません。だからプレビューには16pxの本文、24pxの太字、小さめの英文を並べて、判定項目と目で対応が取れるようにしています。

一方であえて入れなかったものもあります。「基準を満たす近い色を自動で提案する」機能は候補に挙がりましたが、外しました。提案色は結局どこかで決め打ちの色相補正になり、デザイン上の意図を壊しやすいからです。このツールは判定までに留めて、色をどう直すかは人が決めるという線引きにしています。透明度（アルファ）の扱いも入れていません。半透明の重なりを正しく評価するには背景の合成結果を先に決める必要があり、不透明な2色に絞ったほうが誤解が少ないと判断しました。

注意点

• 大きい文字の定義は 18pt（およそ24px）以上、または 14pt（およそ18.66px）以上の太字です。実際の判定はページ上の実寸に依存するので、プレビューの見た目だけで決めないでください。
• 半透明の色、グラデーション、画像の上に乗せた文字は評価できません。不透明な2色の比較専用です。
• 基準を満たしていることと読みやすいことは別の話です。行間や字間、フォントの線の細さでも可読性は変わります。判定はあくまで出発点として扱ってください。