文字色と背景色を選ぶだけで、コントラスト比とWCAG（アクセシビリティ基準）の合否を判定します。基準を満たさない場合は合格する色を自動で提案するので、デザインの雰囲気を保ったまま調整できます。
🔒 この処理はブラウザの中だけで完結します
- 入力した色はサーバーに送信されません。計算はすべてお使いのブラウザの中で行っています。
基準について
WCAG 2.1 では、通常の文字はコントラスト比 4.5:1 以上（AA）、大きい文字（18pt≒24px以上、または太字14pt≒18.66px以上）は 3:1 以上が求められます。より厳しい AAA は通常文字で 7:1、大きい文字で 4.5:1 です。ボタンの枠線やアイコンなど文字以外のUI部品も 3:1 以上が必要です。日本では「みんなの公共サイト運用ガイドライン」でJIS X 8341-3（WCAG 2.0相当）のAA準拠が推奨されており、公共・自治体案件では実質的な要件になります。
WCAG 2.1 では、通常の文字はコントラスト比 4.5:1 以上（AA）、大きい文字（18pt≒24px以上、または太字14pt≒18.66px以上）は 3:1 以上が求められます。より厳しい AAA は通常文字で 7:1、大きい文字で 4.5:1 です。ボタンの枠線やアイコンなど文字以外のUI部品も 3:1 以上が必要です。日本では「みんなの公共サイト運用ガイドライン」でJIS X 8341-3（WCAG 2.0相当）のAA準拠が推奨されており、公共・自治体案件では実質的な要件になります。
薄いグレーの文字はなぜ問題なのですか？
デザイン上は上品に見えても、高齢の方・視力の弱い方・屋外でスマホを見ている人には読めなくなります。白背景に #999999 のグレーはコントラスト比2.85で、AAの4.5に届きません。補足テキストやプレースホルダーによく使われる色ですが、読めなくてよい文字はそもそも表示する意味がない、という考え方をするとよいです。
ブランドカラーが基準を満たしません
よくある悩みです。現実的な対処は3つあります。(1) そのブランドカラーは面積の大きい背景や見出しに使い、本文の文字色には使わない、(2) 文字に使う用の「濃いめの派生色」をブランドカラーとは別に定義する、(3) 白抜き文字にできる濃さまで落とす。多くの企業がブランドカラーとは別に「テキスト用の色」を持っています。
コントラスト比はどう計算されているのですか？
各色の相対輝度（人間の目の感じ方に合わせてRGBを重み付けした明るさ）を求め、(明るい方 + 0.05) ÷ (暗い方 + 0.05) で算出します。1:1（同じ色）から21:1（黒と白）の範囲になります。単純な明度差ではなく、緑が明るく、青が暗く評価されるのが特徴です。
🔒 調べた内容は記録・公開しません
- 検索した内容を保存・一覧化・公開しません。調査結果をデータベース化して検索できるようにしたり、他の利用者に見せたりすることは一切ありません。
- 検索履歴を残しません。誰が何を調べたかを紐づけて蓄積することはしません。会員登録・ログインも不要です。
- 第三者に提供・販売しません。営業リストや広告目的での利用もありません。
- サーバー負荷を抑えるため、判定結果のみ最大1時間の一時キャッシュに保持し、時間の経過で自動的に消えます。連続アクセスの制限用にIPアドレスをハッシュ化した値を最大10分間だけ保持します（元のIPアドレスは保存しません）。
- 調べた対象は共有用にURLの
#以降に付きますが、この部分はサーバーにもアクセス解析にも送信されません。
同じ分類のツール（制作の道具（ブラウザ内で完結））
運営：WEBツール箱（MOTOKI合同会社）
WordPress専門のホームページ制作会社です。日々の制作で「毎回調べるのが面倒だった」ことを、そのままツールにして公開しています。
診断結果の見方や改善のご相談も承っています。お問い合わせ
WordPress専門のホームページ制作会社です。日々の制作で「毎回調べるのが面倒だった」ことを、そのままツールにして公開しています。
診断結果の見方や改善のご相談も承っています。お問い合わせ