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

文字色と背景色のコントラスト比を計算し、WCAG の AA / AAA 基準を満たすか判定します。アクセシビリティ対応の配色チェックに。

文字色

背景色

見本

ふつうの文字(16px)

大きな文字(24px)

—
AAふつうの文字4.5 : 1—
AA大きな文字3 : 1—
AAAふつうの文字7 : 1—
AAA大きな文字4.5 : 1—

使い方・しくみ

文字色と背景色を入れると、コントラスト比と WCAG の判定が出ます。まるを押すと色をえらべます。

WCAG の目安は、ふつうの文字で AA=4.5 : 1/AAA=7 : 1、大きな文字(およそ 24px 以上、太字は 18.7px 以上)で AA=3 : 1/AAA=4.5 : 1。数が大きいほど読みやすい配色です。

計算はこのブラウザの中だけで、入れた内容はどこにも送りません。