「おしゃれだから」という理由で、淡いグレーの背景に薄いグレーの文字を配置していませんか？ そのデザインは、視力の弱いユーザーや、太陽光の下でスマホを見るユーザーに対する視覚的な暴力です。
このツールは、あなたが選んだ文字色と背景色の組み合わせに対し、光の反射率に基づく数学的な計算を行い、国際的なアクセシビリティ基準（WCAG）を満たしているかを残酷に判定します。デザイナーの薄弱なエゴを粉砕し、万人が視認できる「真のユニバーサルデザイン」を構築するための検問所として機能します。
目次を開く
👁️ 色彩コントラストチェッカー
モニター上の正確な色を識別するために、高演色な照明環境を手に入れてはいかがでしょうか。
スポンサーリンク
主観を排除すべき利用シーン
「私には読めるから大丈夫」という個人的な感覚は、Webの世界では通用しません。以下のような場面で、客観的な数値を根拠にデザインを決定します。
| コーポレートカラーの適用 | 会社のロゴ色をそのままボタンの背景にし、文字を白にした時、果たしてそれが高齢の顧客にも読めるのかを検証します。 |
|---|---|
| 公共機関サイトの構築 | 自治体や病院のWebサイトなど、JIS規格やWCAGに準拠する（AA以上を満たす）ことが絶対条件とされる案件での品質証明として使用します。 |
| デザイナーへの修正指示 | ディレクターが「もう少し文字を濃くして」と曖昧に伝えるのではなく、「コントラスト比が3.2しかないため、4.5を超えるまで文字を暗くして」と論理的に指示を出します。 |
機能・仕様：光の反射率による絶対評価
感覚ではなく、W3Cが定めたアルゴリズムによって冷徹に計算されます。
- 相対輝度（Luminance）の算出
入力されたHEXカラー（#FFFFFF等）をRGBに分解し、人間の目が感じる明るさの度合い（相対輝度）を数式で算出して比較します。 - テキストサイズごとの判定
細くて小さい文字ほど高いコントラストが要求されます。そのため、「通常テキスト」と「大きなテキスト」の2つの条件で同時に合否（PASS / FAIL）を叩き出します。 - リアルタイムプレビュー
数値を調整するたびに、実際の色の組み合わせが画面上のプレビューエリアに反映され、合格ラインを超える瞬間を視覚的に確認できます。
早見表：WCAGの合否基準ライン
Webサイトを構築する上で、最低限目指すべきコントラスト比のボーダーラインです。
| レベル | 通常テキスト（18pt未満） | 大きなテキスト（18pt以上等） |
|---|---|---|
| レベル AA (最低要件) | 4.5 : 1 以上 | 3.0 : 1 以上 |
| レベル AAA (理想的) | 7.0 : 1 以上 | 4.5 : 1 以上 |
よくある質問 (FAQ)
Q どうしても会社のロゴ色（薄い色）をボタンに使いたいのですが。
A. 背景が薄い色で、中の文字を白（#FFFFFF）にするとほぼ確実にFAIL判定を受けます。その場合、文字色を黒（#000000）や濃いグレーに変更するか、ボタンのサイズ自体を大きくして「大きなテキスト（3.0:1の緩和基準）」の要件に滑り込ませる工夫が必要です。
Q 判定がFAILのままだと何かペナルティはありますか？
A. 法律で罰せられるわけではありませんが（※公共機関を除く）、Googleの検索エンジンはアクセシビリティの低さをマイナス評価する傾向があります。また何より、ユーザーが「読めない」と判断して離脱する物理的な機会損失が発生します。
開発者のひとりごと
👨💻
若くて視力の良いデザイナーが高解像度のMacBookで作った「美しい淡い配色のデザイン」は、往々にして、屋外で画面の暗いスマホを見つめる一般ユーザーにとっては「ただの読めないシミ」と化します。
デザイン会議において「この色は読みにくい」「いや、これくらい淡い方が今風だ」といった不毛な口論を終わらせる唯一の方法は、数式という絶対的な神を召喚することです。
「WCAGのAA基準でFAILが出ているので修正してください」。この一言と、真っ赤に染まったFAILバッジの証拠画像さえあれば、どんな頑固なデザイナーのエゴも粉砕することができます。このツールを武器に、Webから理不尽なステルス文字を駆逐してください。