無料ツール
WCAGコントラストチェッカー
WCAG AAとAAAに対する色コントラストをチェック。通過するワンクリック修正 — 通常テキスト、大型テキスト、UIコンポーネントをカバー。
プレビュー — 背景上のテキスト
素早いキツネ
Lorem ipsum dolor sit amet, consectetur adipiscing elit. これは小さなテキストのコントラストをチェックするための14pxの本文テキストです。
ボタン
プレビュー — 入れ替え
素早いキツネ
同じテキストと背景を入れ替えました。一部の色のペアは一方向にしか機能しません。
ボタン
WCAGコントラストについて
- AAはほとんどの管轄区域の法的標準です: 通常のテキストには4.5:1、大きなテキスト(18pt以上または14pt太字)には3:1。
- AAAは「強化」: 通常7:1、大きい4.5:1。可能であれば本文テキストでこれを目指してください。
- UIコンポーネント(ボタン、フォームの境界線、アイコン)は、隣接する色に対して3:1が必要 — 大きなテキストと同じ。
- 色だけの意味に注意してください。色をアイコン、下線、ラベルとペアにして、色覚異常のユーザーも信号を得られるようにしてください。
- Apple HIGとMaterialはどちらもアプリ内のテキストに最低4.5:1を要求します — これに失敗すると、App Storeのアクセシビリティレビューフラグとして知られています。
アクセシブルなアプリのスクリーンショットも必要?
LaunchShotsにはエディターに組み込まれたコントラストヒントが付属しています — お試しください。
エディターを開く →
☕LaunchShotsを気に入っていただけましたか？
永久無料 — 時間を節約できたなら、コーヒーをおごっていただけます。
応援する →