コントラスト確認

テキストと背景色の任意の組み合わせについてWCAG AAおよびAAAへの準拠を確認。

Text color

Contrast ratio

Background color

Large Text Example (18pt+)

Normal text: The quick brown fox jumps over the lazy dog. This is regular body text to test readability and contrast against the selected background color.

AA Normal-

≥ 4.5:1 required

AA Large-

≥ 3:1 required

AAA Normal-

≥ 7:1 required

AAA Large-

≥ 4.5:1 required

Large text = 18pt (24px) normal or 14pt (18.67px) bold. WCAG 2.1 guidelines. AA is the minimum standard; AAA is enhanced.

WCAGコントラスト準拠とは?

WCAG(ウェブコンテンツアクセシビリティガイドライン)は、低視力や色覚異常の人々の読みやすさを確保するために、テキストと背景の最小コントラスト比を定義しています。AA レベルは通常テキストで4.5:1、大きなテキストで3:1以上が必要です。

AA対AAA - どちらを目指すべき?

AAはほとんどのアクセシビリティ規制の法的最低基準です。AAAはゴールドスタンダードで、本文テキストや重要なインターフェースに推奨されます。ほとんどのチームはすべてのテキストにAAを、可能な場合は本文にAAAを目指します。

"大きなテキスト"とは何か?

WCAGは大きなテキストを通常の太さで18pt(24px)以上、または太字で14pt(18.67px)以上と定義しています。大きなテキストはサイズ自体が読みやすさを助けるため、より緩やかなコントラスト比(AAで3:1)が適用されます。

このツールの使い方

カラーピッカーを使うかhexコードを直接入力して、テキストカラーと背景色を選択します。コントラスト比は即座に更新され、4つのWCAGチェック(AA通常、AA大、AAA通常、AAA大)がリアルタイムで合否を表示します。