Search for a command to run...
2色のWCAG 2.1コントラスト比を計算し、AAとAAAの判定をその場で確認できます。
#RGB、#RRGGBB、#RRGGBBAA、rgb()/rgba()、hsl()/hsla()に対応しています。CSSの色名には対応していません。
アルファは測定前に背景と合成し、半透明の背景は白の上に合成します。
合格する色の提案
前景色の明度を黒方向と白方向に動かし、AA 4.5:1を満たす最も近い色を探します。
コントラスト比
3.66:1
#7B8794 / #FFFFFF
AA 通常テキスト
最低 4.5:1
AA 大きいテキスト
最低 3.0:1
AAA 通常テキスト
最低 7.0:1
AAA 大きいテキスト
最低 4.5:1
非テキスト・UIコンポーネント
最低 3.0:1
プレビュー
本文でよく使われる16pxの通常テキストです。
大きいテキスト 24px 太字
What
コントラスト比チェッカーは前景色と背景色の相対輝度の比を求めるツールで、この値はWCAG 2.1がテキストの読みやすさを判断する基準になります。hex、rgb()、hsl()を解析し、アルファを背景に合成したうえでAAとAAAのすべてのしきい値を判定します。
Cases
デザインシステムのトークンを配布する前に本文の比率を確認する
薄いグレーのプレースホルダーがAAを満たすか確かめる
ボタンやアイコンの色を非テキスト3:1の基準で点検する
ダークモードのパレットをライトモードと合わせて監査する
ブランドカラーがAAに届かないとき最も近い代替色を探す
アクセシビリティレビューの記録に判定結果を残す
How To
前景色と背景色を入力すると、WCAGの判定がすぐに表示されます。
カラーピッカーを使うか、hex・rgb()・hsl()の値を直接入力します。
同じ手順で背景色を指定し、必要なら入れ替えボタンで前後を反転します。
比率とAA・AAA・非テキストの合否バッジを確認します。
基準に届かない場合は提案色を適用し、結果をコピーします。
Knowledge
FAQ