カラーコントラスト判定ツール

文字色と背景色を選ぶだけで、コントラスト比と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準拠が推奨されており、公共・自治体案件では実質的な要件になります。
薄いグレーの文字はなぜ問題なのですか?

デザイン上は上品に見えても、高齢の方・視力の弱い方・屋外でスマホを見ている人には読めなくなります。白背景に #999999 のグレーはコントラスト比2.85で、AAの4.5に届きません。補足テキストやプレースホルダーによく使われる色ですが、読めなくてよい文字はそもそも表示する意味がない、という考え方をするとよいです。

ブランドカラーが基準を満たしません

よくある悩みです。現実的な対処は3つあります。(1) そのブランドカラーは面積の大きい背景や見出しに使い、本文の文字色には使わない、(2) 文字に使う用の「濃いめの派生色」をブランドカラーとは別に定義する、(3) 白抜き文字にできる濃さまで落とす。多くの企業がブランドカラーとは別に「テキスト用の色」を持っています。

コントラスト比はどう計算されているのですか?

各色の相対輝度(人間の目の感じ方に合わせてRGBを重み付けした明るさ)を求め、(明るい方 + 0.05) ÷ (暗い方 + 0.05) で算出します。1:1(同じ色)から21:1(黒と白)の範囲になります。単純な明度差ではなく、緑が明るく、青が暗く評価されるのが特徴です。

🔒 調査結果と一時データの取り扱い

  • 調査結果を検索履歴として蓄積・公開しません。調べた対象を利用者別に一覧化したり、他の利用者が検索できる履歴として公開したりする機能はありません。
  • 検索履歴を残しません。誰が何を調べたかを紐づけて蓄積することはしません。会員登録・ログインも不要です。
  • 第三者に提供・販売しません。営業リストや広告目的での利用もありません。
  • サーバー負荷を抑えるため、判定結果を有効期間最大1時間の一時キャッシュとして保持する場合があります。連続アクセスの制限には、IPアドレスをハッシュ化した値と実行回数を使い、最終受付から10分間の有効期限を設けています。この制限用データに元のIPアドレスは保存しません。
  • 調べた対象は共有用にURLの#以降に付きますが、この部分は通常のHTTPリクエストでは送信されません。URLを共有すると、受け取った方には調査対象が伝わります。

同じ分類のツール(制作の道具・アクセス環境の確認)

🧭アクセス情報チェックあなたのIPアドレス・ブラウザ・OSなど、サーバーに送られている情報を表示します。IP制限の設定に。🔤URLエンコード・デコード日本語URLをパーセントエンコーディングに変換、またはその逆に戻します。複数行まとめて処理できます。⌨️HTML特殊文字変換HTMLやコードをページに載せるための実体参照変換。逆方向にも対応しています。🎯カラーコード変換HEX・RGB・HSLで入力した色をHSV・CMYKなどに変換し、明度違いのバリエーションも自動生成します。🔑パスワード生成推測されにくいランダムなパスワードを生成します。強度と解読にかかる時間の目安も表示します。🚪.htpasswd 生成(ベーシック認証)ベーシック認証に必要な .htpasswd と .htaccess の記述を作ります。公開前のサイトを隠すときに。📐Excel表 → HTMLテーブル変換ExcelやスプレッドシートからコピーしてHTMLテーブルに変換します。Markdown表にも対応。🔀.htaccessリダイレクト生成旧URLと新URLの対応表から301リダイレクトの記述を生成します。www統一や常時SSL化の定番も。⭐ファビコン一式生成画像1枚から favicon.ico・各サイズPNG・manifest・HTMLの記述までまとめて作ります。🎨OGP画像ジェネレータータイトルを入れるだけで、SNSシェア用の1200×630px画像をその場で作ります。🗜️画像のWebP変換・リサイズ画像をまとめてWebPに変換・リサイズし、前後のファイルサイズを比較できます。👁️カラーコントラスト判定(表示中)文字色と背景色のコントラスト比とWCAG判定。基準を満たす色も自動で提案します。

すべてのツールを見る(37種類) →

運営:WEBツール箱(MOTOKI合同会社)
WordPress専門のホームページ制作会社です。日々の制作で「毎回調べるのが面倒だった」ことを、そのままツールにして公開しています。
診断結果の見方や改善のご相談も承っています。お問い合わせ