コントラストチェッカー
前景色と背景色を選ぶと、コントラスト比がリアルタイムで表示され、通常のテキストと大きなテキストに対するWCAG AAおよびAAAアクセシビリティガイドラインを満たしているかどうかがわかります。ライブプレビューで組み合わせの実際の見え方も確認できます。
前景色
背景色
いろはにほへと ちりぬるを わかよたれそ
通常のテキスト
AA 合格 AAA 合格
大きなテキスト
AA 合格 AAA 合格
使い方
カラーピッカーまたは16進数コードの入力で前景色と背景色を選んでください。コントラスト比は両方の色の相対輝度から計算され、通常のテキスト(AAは4.5:1、AAAは7:1)と大きなテキスト(AAは3:1、AAAは4.5:1)のWCAGしきい値と比較されます。
ヒント
組み合わせが不合格の場合は、暗い方の色をさらに暗く、または明るい方の色をさらに明るくしてみてください。わずかな調整でも比率が次のしきい値を超えることがあります。
「大きなテキスト」とは何ですか?
WCAGでは大きなテキストを18pt(24px)以上、または太字の14pt(約18.5px)以上と定義しています。見出しなどの目立つテキストには、より緩やかな大きなテキストのしきい値を使用できます。
このカテゴリの他のツール
露出計算機
絞り、シャッタースピード、ISOの間で等価露出を求めます。
アスペクト比計算機
画像や動画を比率を保ったまま拡大縮小し、簡略化した比率を求めます。
CSSグラデーションジェネレーター
線形または放射状のCSSグラデーションをデザインし、生成されたコードをコピーします。
カラーパレットジェネレーター
任意のベースカラーから、補色・類似色・トライアド配色のパレットを生成します。
カラーフォーマット変換ツール
色をHEX、RGB、HSL、CMYKの間で即座に変換。各形式をワンクリックでコピーできます。
タイポグラフィスケールジェネレーター
基準フォントサイズと拡大比率から、調和の取れたフォントサイズのセットを生成し、CSSカスタムプロパティとしてコピーできます。