ウェブツール
カラーコントラストチェッカー - WCAGコントラスト比計算
背景色と文字色のコントラスト比をWCAG 2.1基準で計算し、AAとAAAの合格状況を表示します。
コントラスト比
0.00
通常テキスト
AA: -
AAA: -
大きなテキスト
AA: -
AAA: -
素早い茶色の狐
Aa
アクセシビリティはもはや選択肢ではありません
ウェブアクセシビリティはもはや選択肢ではなく、法的義務化する国が増えており、コントラストが低いと弱視のユーザーは文字を読めません。WCAG 2.1は通常テキストに対してAAで4.5:1、AAAで7:1、大きなテキストに対してAAで3:1、AAAで4.5:1のコントラスト比を求めています。
このツールはコントラスト比を計算し、各等級の合格状況を表示します。色を変えると結果が即座に更新されます。
こんな方に特に役立ちます
- ウェブデザイナー・パブリッシャー — デザイン案のコントラストを点検する時
- アクセシビリティ担当者 — WCAG準拠を確認する時
- フロントエンド開発者 — テキストの可読性を高める時
よくある質問
AAは通常テキスト4.5:1、大きなテキスト3:1以上のコントラスト比を求めます。AAAはより厳しく、通常テキスト7:1、大きなテキスト4.5:1以上が必要です。AAがほとんどの規制で基準となります。
WCAG 2.1では、大きなテキストは通常フォントで18pt（24px）以上、または太字フォントで14pt（18.5px）以上を指します。大きなテキストは可読性が高いため、相対的に低いコントラスト比も許容されます。
現在はHEXコード入力に対応しています。カラーピッカーも併せて提供しているため、視覚的に色を選ぶこともできます。
Share this page