WCAGカラーコントラストデザイナーガイド

テキストがWCAG AAのコントラストを満たさない場合、推定2億8500万人の視覚障害者が読めません。さらに、EUや米国では法的リスクが高まっています。良いニュースは、ルールはシンプルだということです。

4.5:1ルール

本文テキストは、背景に対して少なくとも4.5:1のコントラスト比が必要です（WCAG AA合格）。大きなテキスト（24px以上の標準フォント、または18px以上の太字）は3:1と緩和されます。

AAA適合の場合：本文7:1、大きなテキスト4.5:1。

コントラスト比の計算方法

WCAGは相対輝度を使用します。各色を輝度値（0＝黒、1＝白）に変換し、特定の計算式を用いて (L1 + 0.05) / (L2 + 0.05) を計算します（L1は明るい方の色）。

計算は不要です。無料のコントラストチェッカーで任意の2色を入力し、比率を確認してください。

よくある失敗例

• 白背景に薄いグレー — #999 on #fff = 2.85（不合格）。#767676 on #fff = 4.54（合格）。
• 黄色に白文字 — ほぼ常に不合格。黄色には暗いテキストを使用。
• 本文中の色付きリンク — 多くの青リンクは白背景で合格しますが、薄いグレー背景では不合格。実際の周囲背景でテストしてください。
• 見た目が良いブランドカラー — しばしば不合格。オフホワイトの背景を追加するか、テキストを暗くしてください。

アクセシブルな色の組み合わせの選び方

信頼性の高い3つのパターン：

1. 明るい背景に暗いテキスト — #1f2937 on #fff = 14:1（完璧）。
2. 暗い背景に白テキスト — #fff on #1f2937 = 14:1（完璧）。
3. アクセントカラーに暗いテキスト — #1f2937 on #fbbf24 = 9:1（ボタンに最適）。

テキスト以外への適用

WCAG 2.1では、テキスト以外の要素（ボタン、フォーカスリング、フォームの境界線）にも3:1が必要です。チェッカーは両方に対応しています。

ウィジェットと干渉しない壁紙

時計ウィジェットや通知の背後に壁紙を設定するデザイナー向け：ウィジェットゾーンでコントラストが5:1未満の壁紙を選んでください。当社のガウシアンブラーツールで、壁紙の複雑な部分をぼかし、ウィジェットの可読性を向上できます。

無料ツールをお試しください

これらのガイドの多くは、すぐに使える実践的なツールと連携しています。初回はサインアップ不要です：

• 画像リサイザー — ピクセル単位のダウンスケール＋アップスケール。
• WebPに変換 — JPG比30～50%のファイルサイズ削減。
• 背景削除 — ワンクリックで切り抜き、透明PNGに。
• ファビコン生成 — 1つのソースから全ブラウザサイズに対応。
• SNSテンプレート — 各プラットフォームの正確な寸法。
• 一括処理 — 最大200枚の画像に任意のツールを一括適用。

全ツールカタログをご覧ください。