カラーコントラストチェッカー:WCAG AA/AAAアクセシビリティテスト | 無料
4 回使用サンプルテキスト
The quick brown fox jumps over the lazy dog. 0123456789
15.39:1
コントラスト比
コントラストチェックのヒント
WCAG AA/AAAテスト
テキストと背景色がWCAG 2.1アクセシビリティ基準を満たしているか確認します。
即座にコントラスト比表示
WCAG輝度公式に基づく正確なコントラスト比を計算します。
アクセシビリティを簡単に
視覚障がいのあるユーザーにも読みやすい色の組み合わせを見つけます。
色を入れ替え
テキストと背景色をワンクリックで入れ替え。
よくある質問
WCAGコントラスト比とは?
WCAGでは通常テキストに4.5:1(AA)、7:1(AAA)の最低コントラスト比が要求されます。
なぜカラーコントラストが重要?
十分なコントラストにより、ロービジョンや色覚異常のユーザーもテキストを読めるようになります。
無料ですか?
はい、完全無料です。
グラデーション背景上のテキストの色のコントラストはどのようにテストしますか?
無料のカラーコントラストチェッカーは、単色のペア向けです。グラデーション上にテキストを配置する場合、テキストの色が*最も低い*コントラストを示すグラデーションのポイントを特定してください。WCAG AAまたはAAA準拠を全体で確保するため、前景のテキスト色をグラデーション背景の最も明るい部分と最も暗い部分の両方でテストする必要があります。
選んだブランドカラーがWCAGコントラストに不合格だった場合、どうすればよいですか?
ブランドカラーがWCAGコントラストに不合格だった場合、前景(テキスト)または背景色のいずれかを調整する必要があります。当社の無料のカラーコントラストチェッカーは、迅速な反復作業を支援します。不合格となった色の色相、彩度、または明度をわずかに変更してください。新しいカラーコードをツールに再入力し、即座に再テストします。すべてのユーザーにとっての読みやすさを優先しつつ、ブランドパレットに可能な限り近い状態で、最小合格比率を目指しましょう。
コントラストの確認方法
- テキスト色と背景色を設定
- コントラスト比とWCAG結果を確認
- AA/AAAに合格するまで色を調整
- 入れ替えボタンで逆の組み合わせもテスト