アクセシビリティ
カラーコントラストチェッカー
文字色と背景色が WCAG のコントラスト要件を満たしているかを確認し、満たさない場合は最も近い基準適合色を提案します。
大きな文字のサンプル
ページの大部分で使われる、通常の本文のサンプルです。
コントラスト比
4.83:1
- WCAG AA・通常の文字 (4.5:1) 合格
- WCAG AA・大きな文字 (3:1) 合格
- WCAG AA・UI部品とアイコン (3:1) 合格
- WCAG AAA・通常の文字 (7:1) 不合格
- WCAG AAA・大きな文字 (4.5:1) 合格
表示される内容
読みやすい配色に必要な情報をすべて表示します。
コントラスト比
2色間の正確な WCAG コントラスト比。
AA と AAA の判定
通常テキスト、大きなテキスト、UI コンポーネントを WCAG の基準値で判定します。
リアルタイムプレビュー
調整しながらサンプルテキストで配色を確認できます。
基準を満たす色の提案
AA を満たす、文字色に最も近い色合いを提案します。
使い方
2色を選ぶ
カラーピッカーを使うか、HEX または RGB の値を入力します。
結果を確認
比率と各 WCAG レベルの合否がすぐに更新されます。
修正を適用
組み合わせが不合格の場合は提案された色を使います。
コントラストは WCAG の多くの要件のひとつです。ページ全体を確認するには、アクセシビリティ監査をご利用ください。
FAQ
よくある質問
WCAG AA では通常テキストに 4.5:1、大きなテキストと UI コンポーネントに 3:1 が必要です。AAA では 7:1 と 4.5:1 です。
通常の太さで 24px 以上、または太字で約 18.7px 以上（18pt または太字 14pt）です。
いいえ、確認するのは1組の配色です。公開中のページのコントラストはアクセシビリティ監査で確認できます。