誰もが読みやすいテキストに
白地に薄いグレーのテキスト、パステルカラーのボタンに白いテキスト、暗い背景に青いリンクなどは、デザイン上は美しく見えても、実際のユーザーにとっては読みにくい場合があります。このコントラストチェッカーは、任意のテキストと背景色のコントラスト比を測定し、Web Content Accessibility Guidelines (WCAG) のレベルAAおよびAAAの基準を満たしているかを瞬時に判定します。満たしていない場合は、基準をクリアする最も近い色を提案します。
主な機能
- コントラスト比: 1:1から21:1まで測定可能。
- WCAG 2 AA / AAA 判定: 通常サイズのテキスト、大きなテキスト、UIコンポーネントの適合結果を表示。
- あらゆるカラーフォーマットに対応: HEX、RGB、HSL、CSSカラー名。
- ライブプレビュー: 見出し、本文、小さなテキストで実際の見え方を確認。
- アクセシブルな色の提案: 元の色相を保ちながら基準を満たす色を提案。
- 入れ替えボタン: テキストと背景色を反転させてチェック。
WCAG基準の早見表
| コンテンツ | AA | AAA |
|---|---|---|
| 通常サイズのテキスト | 4.5:1 | 7:1 |
| 大きなテキスト (≥ 24 px、または ≥ 19 px 太字) | 3:1 | 4.5:1 |
| UIコンポーネントとグラフィックス | 3:1 | — |
| ロゴと装飾テキスト | 要件なし | 要件なし |
よくある色の組み合わせ
| テキスト | 背景 | コントラスト比 | AA (通常サイズのテキスト) |
|---|---|---|---|
| #000000 | #FFFFFF | 21:1 | 合格 |
| #767676 | #FFFFFF | 4.54:1 | 合格 (基準を満たす最も明るいグレー) |
| #999999 | #FFFFFF | 2.85:1 | 不合格 |
| #FFFFFF | #0EA5E9 | 2.77:1 | 不合格 |
| #FFFFFF | #0369A1 | 5.93:1 | 合格 |
関連ツール
カラーコードの変換にはカラーコンバーター、配色パレットの作成にはカラーパレットジェネレーター、スクリーンショットからの色抽出には画像カラーピッカーをご利用ください。