GUIDE
配色コントラスト改善ツールの使い方
配色コントラスト改善ツールは、文字色と背景色からWCAG 2.2のコントラスト比を計算し、通常文字・大きな文字のAA・AAA基準を確認する無料ツールです。基準に足りない場合は、元の文字色からなるべく離れずに通常文字のAA基準を満たす色を提案し、実際の見出し・本文・ボタンで比較できます。
このツールでできること
01
文字とUI部品のWCAG基準を判定
通常文字と大きな文字のAA・AAAに加え、操作に必要なUI部品のAA基準も判定し、現在のコントラスト比を小数2桁で確認できます。
02
近い合格色を自動提案
通常文字のAA基準に足りない場合、背景との関係を計算し、元の文字色から黒または白の方向へ最小限調整した候補を提示します。
03
カラーピッカー・実表示・CSS
色選択とカラーコード入力に対応し、見出し・本文・ボタンのプレビューと、採用色のCSS変数をそのままコピーできます。
かんたん3ステップ
- 1文字色と背景色をカラーピッカーまたは16進カラーコードで入力します。必要なら入れ替えボタンで反転した配色も試します。
- 2コントラスト比と通常文字・大きな文字の合否を確認し、右側のプレビューで実際の文章量とボタンの見え方を確認します。
- 3通常文字のAA基準を満たさない場合は近似色を適用し、CSS変数をコピーします。実サイトでも文字サイズや操作状態を含めて再確認します。
こんな方におすすめ
ブランドカラーを使いながら読みやすいWebサイトを作りたいデザイナー、CSS実装前に配色を確認するフロントエンド開発者、既存サイトのアクセシビリティを改善したい運営者やレビュー担当者に向いています。
利用上の注意
- 通常文字のAAは4.5:1以上、大きな文字のAAは3:1以上を基準に判定します。大きな文字に該当するかはフォントサイズと太さによって異なるため、安易に大文字扱いにしないでください。
- 配色の合格だけでWebアクセシビリティ全体が保証されるわけではありません。フォーカス表示、リンクの識別、色以外の手掛かり、画像内文字、ホバー・無効状態なども確認してください。
よくある質問
提案された色を使えばWCAGに完全対応できますか？
提案色は入力した文字色と背景色のコントラストだけを判定します。ページ全体の構造、キーボード操作、代替テキストなど別の要件は含まれないため、総合的な確認が必要です。
通常文字と大きな文字は何が違いますか？
WCAGでは大きな文字に低めのコントラスト基準が認められますが、該当条件は文字のサイズと太さで決まります。迷う場合は通常文字の4.5:1以上を目標にしてください。
半透明の文字やグラデーションも判定できますか？
初期版は不透明な単色同士を対象にしています。透明度、背景画像、グラデーションがある場合は実際に合成された色が場所ごとに変わるため、専用の検査ツールやブラウザ開発者機能でも確認してください。
Web制作・改善
Web制作・改善をすべて見る →次に使える関連ツール
同じ目的の作業を続けて進められる無料ツールです。