カラーコード変換
HEX・RGB・HSL と透明度を変換し、色をプレビューしながら CSS の値をコピーできます。
カラーコントラストチェック
文字色と背景色の WCAG 2.2 コントラスト比を測定し、通常文字と大きな文字の適合状況を表示します。
読みやすい文字で、伝えたいことを明確に。
通常の文字 · Aa 123
コントラスト比
WCAG 2.2 に基づく計算です。透明な背景は白に重ねて評価します。
このツールについて
実際に重なる文字色と背景を使って確認してください。この項目の合格だけでページ全体のアクセシビリティを保証するものではありません。
使い方
前景と背景を選ぶとプレビューが更新されます。通常文字は AA 4.5:1・AAA 7:1、大きな文字は AA 3:1・AAA 4.5:1 が必要です。大きな文字は 24px 以上、太字なら約 18.67px 以上です。透明背景は白に合成します。色の確認のみで、サイト全体のアクセシビリティ判定ではありません。
よくある質問
大きな文字の基準は何ですか？
通常の太さで24px以上、太字で約18.67px以上が目安です。通常文字の AA・AAA は4.5:1・7:1、大きな文字は3:1・4.5:1です。透明な背景は白に重ねて計算します。
4.5:1と表示されるのに AA 不合格なのはなぜですか？
表示は小数点以下2桁に丸めますが、判定は丸める前の値で行います。該当する判定欄が合格になるまでコントラストを上げてください。
写真やグラデーション上の文字はどう調べますか？
文字の背後の実際の色、特に最もコントラストが弱い部分を調べます。このツールは2色の比較で、透明背景は白に重ねます。その前提がページと合うか確認してください。
関連ツール
新しいタブで開きます
コメント
0