コントラスト比チェック

WCAG AA・AAA を見本つきで確認。

無料 · 登録不要 · 端末内で処理

処理はブラウザの中だけ

  • 即時結果
  • 0送信
  • 1 tapコピー可
  • 無料登録不要
実際の使い勝手

安心して使えるポイント

  • 0件の送信
    • 入力はこの端末に残ります
    • 処理のための送信はなし
  • 即時つの出力
    • 作業エリアで結果を更新
    • 入力を変えてすぐ比較
  • 1 tap回でコピー
    • 結果をコピー
    • 登録もインストールも不要
仕様

コントラスト比チェックツールの仕様一覧

入力
前景色と背景色
出力
比率と2サイズの AA・AAA
方式
WCAG の相対輝度と比率
入力とプレビュー
HEX 入力・16/24px 見本
料金
無料
処理する場所
あなたの端末の中
使い方

コントラスト比チェックツールの使い方

  1. 1

    2つの色を決める

    組み合わせて使う予定の文字色と背景色を選びます。

  2. 2

    比率を確認する

    見本が16pxと24pxで表示され、比率と4段階の合否が出ます。

  3. 3

    判定をコピーする

    「結果をコピー」で、比率と4つの判定をまとめて控えられます。

よくある質問

よくある質問

アップロードなしで使える？

はい。入力はブラウザのタブの中で処理されます。処理用のサーバーに送られることも、アカウントに保存されることもありません。

コピーする前に結果を変えられる？

はい。操作するたびに結果が更新されます。求めている出力になってからコピーしてください。

対応ブラウザは？

Chrome・Edge・Firefox・Safari の最新版であれば、ここで使う機能に対応しています。かなり古いブラウザでは必要な機能がないことがあります。

解説

AA と AAA の判定が意味すること

AA は通常の文字で 4.5:1、大きい文字で 3:1、AAA は 7:1 が必要です。大きい文字とは 24px、太字なら 18.66px 以上を指します。

  • コントラストは文字の実際の背景色に対して測ります。カードやボタン、画像の上に載る文字は、それぞれ別に確認してください。
  • 数値の上で通っても、読みやすいとは限りません。細いウェイトの書体は、数字が示すより読みにくくなります。

仕様をすべて見る

コントラスト比チェックツールの仕様
入力前景色と背景色。
出力コントラスト比と、2つの文字サイズでの AA・AAA の判定。
方式WCAG の相対輝度とコントラスト比の計算。
入力とプレビュー各色にピッカーと HEX 欄。見本は選んだ 2 色で 16px 通常と 24px 太字を描画。
料金無料。作業領域の外に、広告と分かる形で広告を出しています。
処理する場所このブラウザのタブの中。入力がアップロードされることはありません。
次にできること

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

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