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

すべての人に、
読みやすい配色を。

文字色と背景色のコントラスト比をチェック。
WCAGの基準を、その場で確認できます。

読みやすさは、
デザインの一部です。

小さな文字でも、適切なコントラストがあれば情報はより多くの人に届きます。

CONTRAST RATIO13.71: 1
AAA すべての基準に合格

アクセシビリティ判定

通常文字18px未満 / 太字14px未満
AA
AAA
大きな文字18px以上 / 太字14px以上
AA
AAA

AA基準を満たす近似色

候補を選ぶと文字色に適用されます。

コントラスト比の目安

3 : 1

大きな文字の AA

18px以上、または14px以上の太字に推奨される最低基準です。

4.5 : 1

通常文字の AA

本文など通常サイズの文字に広く推奨される基準です。

7 : 1

通常文字の AAA

より高い読みやすさを目指す場合の強化された基準です。

よくある質問

コントラスト比とは何ですか?

文字色と背景色の相対的な明るさの差を表した値です。

WCAG AAを満たす基準は?

通常文字は4.5:1以上、大きな文字は3:1以上です。

文字色と背景色を入れ替えられますか?

はい。中央の入れ替えボタンを利用できます。