WCAG コントラスト検査

WCAG の AA・AAA を、両方の文字サイズで。

無料 · 登録不要 · 端末内で計算

処理はブラウザのタブの中

  • AAと AAA
  • 2つの文字サイズ
  • WCAGの輝度式
  • 0件の送信
仕様

WCAG コントラスト検査の仕様

入力
文字色と背景色
計算
相対輝度から比率を計算
報告する水準
AA・AAA を2サイズで
範囲の外
1基準のみ、適合判定ではない
料金
無料
登録の要否
不要
処理する場所
あなたの端末の中
使い方

WCAG コントラスト検査の使い方

  1. 1

    組み合わせを入れる

    色の組み合わせを入力

  2. 2

    AA と AAA を読む

    AA と AAA を読む

  3. 3

    記録するか直す

    記録するか色を直す

よくある質問

よくある質問

比率が合格なら WCAG に適合？

いいえ。適合は多くの達成基準に及びます。この画面が答えるのは1組の色についてのコントラストの基準だけで、検査全体のごく一部です。

AA と AAA、どちらを目指す？

多くの方針が挙げるのは AA です。AAA はより厳しく、設計全体で満たせるとは限りません。両方を示すので、選択はご自身で決められます。

アイコンや枠線も検査できる？

入力された2色を比べるだけです。文字以外のコントラストは別の要件で基準値も違うので、別に記録してください。

計算はどこで行われる？

このブラウザのタブの中です。2つの色はアップロードされず、検査内容がアカウントや記録に残ることもありません。

解説

検査で使うときは

比率は WCAG の相対輝度の式で求め、AA と AAA を両方の文字サイズで判定します。組み合わせの見本も並びます。

  • 色の組み合わせ・比率・水準をまとめて記録してください。あとで別の人が同じ検査を再現できます。
  • 利用者が実際に見る状態を検査してください。ホバー、訪問済み、無効状態は、それぞれ別の組み合わせです。
  • 写真の上の文字には単一の背景色がないので、いちばん条件の悪い部分で検査してください。
  • 片方のテーマで合格したデザイントークンは、もう片方でも検査し直す必要があります。

仕様をすべて見る

WCAG コントラスト検査ツールの仕様
入力文字色と、その後ろの背景色。
計算各色の WCAG 相対輝度を求め、その比を取ります。
報告する水準AA と AAA を、それぞれ通常サイズと大きい文字について。
範囲の外文字以外のコントラスト、フォーカスの見え方、構造、その他すべての達成基準。
料金無料。作業領域の外に、広告と分かる形で広告を出しています。
登録の要否不要。
処理する場所このブラウザのタブの中。入力がアップロードされることはありません。
次にできること

同じファイルのまま続ける

カラーツール一覧： SPOTTOOLSのカラーツール