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

文字色と背景色を選び、読みやすさの目安を確認します。

開発者向けツール

読みやすい文字の見本

通常サイズの文章もここで確認できます。

コントラスト比

15.74:1

AA / Normal

適合

AA / Large

適合

AAA / Normal

適合

AAA / Large

適合

できること

  • デザイン入稿前に文字色を確認する
  • ブランドカラーを比べる
  • ボタンや資料の配色を見直す

使い方

  1. 文字色と背景色を入力または選択します。
  2. 見本とコントラスト比を確認します。
  3. 使う文字サイズに合わせてAA・AAAの結果を見ます。

濃い文字と白背景

入力

#1B2522 / #FFFFFF

出力

約15.7:1 / AA・AAA適合

知っておきたいこと

  • 比率を満たすだけで画面全体のアクセシビリティが保証されるわけではありません。文字以外の要素、状態、書体、文脈も確認してください。

FAQ

通常文字のWCAG AA基準はいくつですか?
WCAG 2.2の1.4.3では通常文字は4.5:1以上、大きな文字は3:1以上です。
表示を丸めてから合否を決めますか?
いいえ。判定には計算した比率をそのまま使い、表示だけ読みやすく丸めます。

近い用途のツールです。

すべてのツールを見る