コントラスト確認

比率と、AA・AAA の合否を読む。

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

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

  • 2色を入力
  • 1つの比率
  • AAと AAA
  • 0件の送信
仕様

コントラスト確認の仕様

入力
文字と背景の2色
出力
比率と2サイズの判定
方式
WCAG の相対輝度と比率
対象外のこと
1組の色だけ、他は対象外
料金
無料
登録の要否
不要
処理する場所
あなたの端末の中
使い方

コントラスト確認の使い方

  1. 1

    2つの色を決める

    2色を設定する

  2. 2

    比率を読む

    比率を読む

  3. 3

    合格するまで調整

    合格するまで調整

よくある質問

よくある質問

比率が合格ならアクセシブル？

いいえ。1組の色が十分読めるという意味だけです。フォーカスの見え方、ラベル、読み上げ順、代替手段は、いずれもご自身で確認が必要です。

大きい文字が別扱いなのはなぜ？

文字が大きいと低い比率でも読めるため、基準がゆるく設定されています。この画面は両方を示すので、どちらを満たしているか分かります。

どの色を入れる？

実際に文字が塗られている色と、そのすぐ後ろの色です。グラデーションや画像の上の文字には、検査できる単一の値がありません。

どこかに送信される？

されません。2つの色はこのブラウザのタブの中で比較され、アップロードも保存もありません。

解説

結果を正直に読む

2つの色を決めます。比率が出て、通常サイズと大きい文字それぞれで AA・AAA の合否が示され、実物の見本も並びます。

  • 半透明の層の上に文字がある場合は、実際に出来上がる色を求めて、それを検査してください。
  • プレースホルダー、無効状態、アイコンも意味を持ちます。それぞれ別の組み合わせとして検査してください。
  • 大きい文字でしか合格しない組み合わせは、誰かが本文に使い回した瞬間に不合格になります。
  • コントラストは多くの要件のひとつで、比率の合格は適合の宣言ではありません。

仕様をすべて見る

コントラスト確認ツールの仕様
入力前景色と背景色。
出力コントラスト比と、通常サイズ・大きい文字それぞれの AA・AAA 判定。
方式WCAG の相対輝度を求め、標準のコントラスト比を計算します。
対象外のことアクセシビリティ確認の他の項目すべて。フォーカス、順序、ラベル、代替手段など。
料金無料。作業領域の外に、広告と分かる形で広告を出しています。
登録の要否不要。
処理する場所このブラウザのタブの中。入力がアップロードされることはありません。
次にできること

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

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