WCAG アクセシビリティのコントラスト比を確認する

前景色と背景色のコントラスト比を測定し、WCAG AA または AAA のしきい値を満たしているか確認します。

1

WCAG は最小コントラスト比を要求します:通常のテキストで 4.5:1(AA)、大きなテキストで 3:1、通常のテキストで 7:1(AAA)。不十分なコントラストは、ロービジョンのユーザーにとってコンテンツを読めなくします。自動チェックで準拠を確保しましょう。
2

コントラストチェッカー →
前景色と背景色を入力します。ツールはコントラスト比を計算し、WCAG AA(通常・大)と AAA(通常・大)の合格/不合格を報告します。
3

カラーコンバーター →
色の形式が異なる場合は、まずここで変換しましょう。コントラストチェッカーは一貫した入力を必要とします。

よくある質問

WCAG の「大きなテキスト」とは?: 大きなテキストとは、18pt(24px)の通常の字重、または 14pt(18.66px)の太字です。大きなテキストはコントラストのしきい値が低く(AA で 3:1)、大きいサイズが低いコントラストを補うためです。
コントラスト比は透過を考慮するの?: いいえ。比は不透明な色について計算されます。前景色にアルファがある場合は、まず背景と合成してから(fg×alpha + bg×(1−alpha))コントラストを確認しましょう。両方の色にアルファを付けて入力すれば、ツールが自動で処理する場合もあります。

このタスクを解決するワークフロー

Hex カラーから RGB とコントラストチェック

Hex カラーを RGB に変換し、その後 WCAG コントラスト比をチェックする。

パイプライン

関連ツール

コントラストチェッカー

Check WCAG color contrast ratio between foreground and background colors and verify AA/AAA compliance。無料、プライベート、100%クライアントサイド。

カラーコンバーター

Convert colors between HEX, RGB, HSL, HSV, and CMYK color spaces. Auto-detects input format。無料、プライベート、100%クライアントサイド。

画像カラーピッカー

Extract dominant colors from image。無料、プライベート、100%クライアントサイド。