コントラストチェッカー
文字や UI の色の WCAG コントラストを確認
例:
透明度を含むあらゆる CSS の色が使えます: #rgb、#rrggbbaa、rgb()、hsl()、oklch()、navy などの色名。
見出しテキストのサンプル
大きなテキスト: 14pt 太字または 18pt
読みやすさを確認するための本文テキストです。
小さな文字や注釈には最も高いコントラストが必要です。
ボタン
コントラスト比
4.83:1
達成レベル: AA
- AA · 通常テキスト4.5:1合格
- AA · 大きなテキスト3:1合格
- AAA · 通常テキスト7:1不合格
- AAA · 大きなテキスト4.5:1合格
- AA · アイコン・枠線・操作部品3:1合格
大きい文字：18pt 以上、または太字 14pt 以上
基準を満たす最も近い色
色相と彩度はそのまま、明度を最小限だけ変えた色です。クリックで適用。
よくある質問
関連ツール
サーバーではなく、お使いの端末で動作します
このページはブラウザの API（Canvas、WebAssembly、Worker など）を使うため、ファイルはお使いの端末から出ません。
- 処理はこのタブの中で行われます。タブを閉じるとセッションは終了します。
- ZapFile のアカウントは不要で、アップロードされたファイルも保存しません（そもそもアップロードされません）。
- ダウンロードするのは選んだものだけ。「クラウド処理」のために何かが送信されることはありません。
- ご自身で確認できます：ツールを使いながら DevTools → ネットワーク を開いても、ファイルが ZapFile に送信される様子は見られません。
- ZapFile をホーム画面に追加すると、すばやく起動でき、キャッシュ済みのページにオフラインでもアクセスできます（ツールには対応ブラウザが必要です）。