Auto Lab
使い方ガイド

Webアクセシビリティ配色チェッカーの使い方｜WCAG基準の見方

Auto Lab

サイトの配色を決めるとき、この文字色と背景色の組み合わせで本当に読みやすいのかを数値で確認できず、なんとなくの感覚で決めていませんか。WCAG（Web Content Accessibility Guidelines）には、文字色と背景色のコントラスト比についての明確な基準があります。この記事では、Webアクセシビリティ配色チェッカーを使って、AA・AAA基準を満たすコントラスト比を確認し、基準を満たさない場合の代替カラーを選ぶ手順を解説します。

無料で今すぐこのツールを使う

登録不要・ブラウザだけで完結します

使い方

  1. 確認したい文字色（前景色）と、背景色をそれぞれ入力します。
  2. 入力した2色から算出されたコントラスト比が、その場で自動的に表示されます。
  3. AA・AAAそれぞれの基準を満たしているかどうかが、判定結果として示されます。
  4. 基準を満たさない場合は、元の色のイメージを保ったまま基準をクリアできる代替カラーが自動で提示されます。

仕組みについて

WCAGでは、通常サイズの文字はコントラスト比4.5:1以上でAA基準、7:1以上でAAA基準を満たすとされています（大きな文字はそれぞれ3:1・4.5:1に緩和されます）。コントラスト比は、2色それぞれの相対輝度（人の目に感じられる明るさを数値化したもの）から算出されます。このツールは、入力された2色の相対輝度を計算してコントラスト比を求め、AA・AAAそれぞれの基準値と自動的に比較しています。

こんな場面で使えます

  • Webサイトのデザインを作る際に、本文の文字色と背景色がアクセシビリティ基準を満たしているか確認したいとき。
  • 社内のデザインガイドラインが、WCAG基準に沿っているかをチェックしたいとき。
  • 既存サイトの配色を見直す際に、基準を満たさない箇所を洗い出し、代替カラーの候補を探したいとき。
  • 行政機関や企業サイトなど、アクセシビリティ対応が求められる案件で、根拠となる数値を示したいとき。

よくある質問

  • Q. WCAGのAA基準とAAA基準の違いは何ですか？

    A. AAは標準的な基準（通常文字でコントラスト比4.5:1以上）、AAAはより厳しい基準（同7:1以上）です。AAAの方がより幅広い利用者にとって読みやすい配色になります。

  • Q. コントラスト比はどうやって計算しているのですか？

    A. 文字色と背景色それぞれの相対輝度（明るさを表す数値）を求め、その比率からコントラスト比を算出しています。

  • Q. 基準を満たさない配色の場合はどうすればいいですか？

    A. このツールでは、元の色味のイメージをできるだけ保ちながら、基準を満たす代替カラーを自動で計算して提示します。

  • Q. 入力した色の情報はどこかに保存されますか？

    A. いいえ。計算はすべてブラウザ内で完結し、入力した色の情報が外部サーバーへ送信されることはありません。

関連する計算ツール・解説記事

無料で今すぐこのツールを使う

登録不要・ブラウザだけで完結します