ToolzPod

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

WCAGカラーコントラスト比をチェック

大きいテキスト (24px)

通常テキスト — 素早い茶色の狐は怠惰な犬を飛び越えます。

コントラスト比
21:1
WCAG AA (4.5:1)
合格
WCAG AAA (7:1)
合格
AA 大きいテキスト (3:1)
合格
AAA 大きいテキスト (4.5:1)
合格

カラーコントラストとは?

カラーコントラストは、テキストとその背景の間で知覚される明るさの差です。Webコンテンツアクセシビリティガイドライン(WCAG)は、低視力や色覚異常を含むさまざまな視覚能力を持つ人々がテキストを読めるように、具体的なコントラスト比を定義しています。

WCAGコントラスト要件

  • AA 通常テキスト:18pt未満(または14pt太字未満)のテキストに対して最低コントラスト比4.5:1。
  • AA 大きいテキスト:18pt以上(または14pt太字以上)のテキストに対して最低コントラスト比3:1。
  • AAA 通常テキスト:最高レベルのアクセシビリティのための強化コントラスト比7:1。
  • AAA 大きいテキスト:大きいテキストの最高アクセシビリティレベルの強化コントラスト比4.5:1。

よくある質問

コントラスト比はどのように計算されますか?

比率は各色の相対輝度を使用して計算されます。式は(L1 + 0.05) / (L2 + 0.05)で、L1は明るい色の輝度、L2は暗い色の輝度です。輝度は線形化されたsRGBチャネル値から導出されます。

どのレベルを目指すべきですか?

AA準拠が最低基準であり、ほとんどの法的要件を満たします。AAAはすべてのユーザーに最高の読みやすさを提供し、特に本文テキストでは可能な限り推奨されます。

関連ツール