SPONSORED ADVERTISEMENT
Placeholder (banner)

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

文字色(前景色)と背景色のカラーコードを入力することで、コントラスト比(Luminance Contrast Ratio)を瞬時に算出し、Webアクセシビリティ基準(WCAG 2.1)に適合しているかをテストします。不適合な場合は、基準を満たす最も近い類似色を自動で計算して提案します。

カラーパレット設定
背景色と文字色の組み合わせを設定します。
文字色の輝度: 0.2
背景色の輝度: 1
コントラスト比4.5 : 1基準クリア (AA)

WCAG 2.1 適合チェック

通常のテキスト (AA) (要 4.5:1)合格 (PASS)
大きなテキスト (AA) (要 3.0:1)合格 (PASS)
通常のテキスト (AAA) (要 7.0:1)不合格 (FAIL)
大きなテキスト (AAA) (要 4.5:1)合格 (PASS)
UIコンポーネント・アイコン (要 3.0:1)合格 (PASS)
テキスト描画プレビュー
現在設定したコントラストでの表示例です。
大きなテキスト (18px / 1.125rem 以上)

これは大きなテキストの表示確認用見出しです。

通常のテキスト (14px / 0.875rem 相当)

Webアクセシビリティの規格(WCAG 2.1)では、すべてのユーザー(視覚特性を持つ方を含む)がコンテンツを不自由なく認識できるよう、十分な輝度コントラスト比を確保することを義務づけています。