ツール ガイド
design 無料 サインアップ不要

カラーコントラストチェッカー

前景色と背景色のペアのWCAG 2.1コントラスト比を確認し、合否結果を即座に取得します。

ツールを読み込み中…

このツールについて

16進カラーピッカーまたはテキストフィールドを使用して前景色と背景色を入力してください。ツールはWCAG 2.1コントラスト比を計算し、4つのしきい値すべての合否バッジを表示します:AAノーマルテキスト(4.5:1)、AA大きなテキスト(3:1)、AAAノーマルテキスト(7:1)、AAA大きなテキスト(4.5:1)。ライブプレビューが選択した色で通常サイズと大きなサイズのサンプルテキストをレンダリングします。各色の相対輝度も表示されます。現在の色がAAに合格しない場合、ツールは標準を満たす調整された色(暗くまたは明るくされた)を提案します。

使い方

  1. 1 カラーピッカーを使用するか、16進値を入力して前景色を選択してください。
  2. 2 同じ方法で背景色を選択してください。
  3. 3 コントラスト比を読んで、どのWCAGレベルが合格または不合格かを確認してください。
  4. 4 ライブテキストプレビューを表示し、AAコンプライアンスを達成するために必要に応じて提案された色を使用してください。

よくある質問

{# Alpine.js — self-hosted. (The previous jsdelivr CDN tag had a stale SRI integrity hash, so the browser refused to run it and window.Alpine was never defined — silently breaking every FAQ accordion and Alpine tool.) #}