入力
ワークスペースを準備中…
使い方
- 不透明な前景色と背景色を入力します。
- プレビュー、コントラスト比、各判定を確認します。
- 色を調整するか「色を入れ替え」を使い、必要な比率をコピーします。
コントラスト結果の読み方
ある背景で読みやすい前景色も、別の背景では見えにくくなることがあります。このツールは色の組み合わせを比較し、通常の文字、大きな文字、UI グラフィックスの要件を分けて表示します。
プレビューで見た目を確認でき、合否は計算した比率で判定します。文字サイズ、太さ、周囲のデザインは完成した UI で別途確認してください。
比率の計算
線形化した sRGB チャンネルから相対輝度を求めます。明るい色の輝度に 0.05 を加えた値を、暗い色の輝度に 0.05 を加えた値で割ります。
白地に黒文字の例は 21:1 です。前景と背景を入れ替えても比率は変わりませんが、見た目は変化します。
#000000 on #ffffff21.00:1 · AA and AAA pass白地の黒文字は WCAG の最大コントラスト比 21:1 になります。
基準と丸め
通常の文字は AA が 4.5:1、AAA が 7:1、大きな文字はそれぞれ 3:1 と 4.5:1 です。該当する UI グラフィックスの基準には 3:1 を使います。
表示は小数点以下 2 桁ですが、合否には丸める前の値を使います。透明色は背後の色で実効色が変わるため受け付けません。
完成した UI で確認する
実際の文字サイズ、太さ、コンポーネントの状態と併せて判断してください。色の組み合わせが合格しても、フォーカスの見やすさ、キーボード操作、適切なラベルなど、ページ全体を評価したことにはなりません。
テキスト入力は最大 1 MiB。CSS と HTML の変換は Worker 内で実行し、制限時間は 30 秒です。色のツールは sRGB を使用します。生成したスタイルはプレビューのため、実際のレイアウトでテストしてください。
よくある質問
表示比率が基準に達しているのに不合格になるのは？
小数点以下 2 桁への丸めで値が切り上がることがあります。判定には計算値全体を使うため、基準をわずかに下回る値は不合格です。
透明色は入力できますか？
できません。対象の背景と合成した後の、不透明な最終色を指定してください。
色を入れ替えると比率は変わりますか？
いいえ。輝度比は対称です。入れ替えはプレビューを変え、2 つの見せ方を比較するための操作です。
AA 判定ならページ全体がアクセシブルですか？
いいえ。この配色を表示中の基準に照らして確認するだけです。適用する文字やコンポーネントの基準と、その他の要件は別途確認が必要です。
結果を保存できますか？
「コピー」で表示比率をコピーできます。アクセシビリティレポートの作成やページの認証は行いません。