›
ツール一覧
›
コントラスト比チェッカー
その薄いグレーの注釈、屋外では読めていない。
数字で確かめて、通る色まで提案する。
コントラスト不足は、レビューで指摘しづらいバグです。指摘する側も「なんとなく薄い」としか言えず、直す側も「デザインの意図です」と返せてしまう。数字にすれば話が終わります。WCAGは通常サイズの文字に4.5対1を求めていて、満たすか満たさないかのどちらかです。ここでは判定に加えて、落ちたときに元の色みを保ったまま基準を通る色を提案します。計算はすべてブラウザ内で行っています。
大きい文字のサンプル 24px
通常サイズの本文です。この明るさで、日光の下でも読めるでしょうか。16px
注釈やキャプションに使う小さめの文字 12px
ボタンのラベル日本人男性のおよそ20人に1人、女性のおよそ500人に1人が、一般的な色覚と異なる見え方をしていると言われます。「赤が必須項目、緑が完了」のように色だけで意味を分けていると、その区別が届きません。以下は、指定した2色がどう見えるかの近似です。
| 対象 | レベルAA | レベルAAA |
|---|---|---|
| 通常サイズの文字 | 4.5 : 1 | 7 : 1 |
| 大きい文字（24px以上／太字18.5px以上） | 3 : 1 | 4.5 : 1 |
| UI部品・図（ボタンの枠線、アイコン、グラフ） | 3 : 1 | — |
| 装飾・無効状態の要素・ロゴ | 対象外 | |
実務ではまずAAの4.5を基準にしてください。多くの企業サイトや公共調達で求められるのがこの水準です。AAAは本文全体に適用すると配色の自由度がかなり落ちるため、重要な情報に絞るのが現実的です。
見落としやすいのは文字以外です。入力欄の枠線、チェックボックスの輪郭、グラフの色分け、アイコン単体のボタン——これらも3対1が必要ですが、デザインカンプの段階では話題に上がりません。UI部品ごとの名前と観点は UIコンポーネント名鑑 にまとめています。
なお、この比率はあくまで機械的な計算です。実際の読みやすさには、文字の細さ・字間・画面の明るさ・周囲の照明も効きます。数字が通っていても細い明朝体の12pxが読みにくいことはあります。基準は下限であって目標ではありません。
UI部品ごとの名前とよくあるバグは UIコンポーネント名鑑、画面まわりの観点は TESTパターン集、リリース前の確認項目は リリース前チェックリスト集 をどうぞ。
