WCAGコントラストチェッカー
テキストと背景の色を入力するだけで、コントラスト比と WCAG 2.x の適合状況を即時確認できます。
HEX カラー入力対応。AA / AAA 適合チェック・ライブプレビュー・改善カラーの提案まで揃っています。
| 適合レベル | 通常テキスト | 大きなテキスト |
|---|---|---|
|
WCAG AA
通常 4.5:1 ／ 大きな 3:1
|
— | — |
|
WCAG AAA
通常 7:1 ／ 大きな 4.5:1
|
— | — |
- 「文字色」欄に文字色コード（HEX。例: #333333）を入力します。
- 「背景色」欄に背景色コード（例: #FFFFFF）を入力します。
- コントラスト比と WCAG 2.x AA/AAA の適合結果がリアルタイムで表示されます。
- 「色改善提案」から目標レベルを満たす代替色を確認し、クリックで適用できます。
ヒント：本文テキストは 4.5:1 以上（WCAG AA）、重要な情報は 7:1 以上（WCAG AAA）を目安にすると安心です。
どんなときに使う？
- Web サイト、スライド、管理画面、アプリ画面で、文字と背景の見やすさをすぐ確認したいとき。
- ブランドカラーや UI 配色は決まっているが、アクセシビリティ基準を満たすか不安なとき。
- デザインや実装を引き渡す前に、読みにくい配色を先に見つけておきたいとき。
なぜ 4.5:1 や 7:1 がよく出てくるのですか？
4.5:1 は通常文字に対する WCAG AA の代表的な基準で、7:1 はより厳しい AAA の目安です。前景色と背景色の明るさの差を表していて、一般的には数値が高いほど読みやすくなります。
大きい文字と普通の文字で基準が違うのはなぜ？
大きい文字や太字はもともと判別しやすいため、WCAG では大きい文字に少し低いコントラスト基準が認められています。ただし重要な内容は、できるだけ高いコントラストを確保した方が安全です。
AA を満たせば十分ですか？
多くの製品では AA が実用的な基準ですが、それで十分とは限りません。情報量が多い画面、見づらい環境、低視力ユーザーが多い利用場面では AAA を目指した方が安心です。
提案された色はそのまま使って大丈夫ですか？
修正の出発点としては有効ですが、実際の画面で必ず確認してください。ブランドとの整合、視覚の優先順位、hover や disabled、ダークモード時の状態まで見てから最終決定するのが安全です。
比率が良ければ読みやすさは保証されますか？
完全には保証されません。コントラスト比は重要ですが、文字サイズ、太さ、行間、背景の模様、実際の表示環境も読みやすさに影響します。数値と実画面の確認を併用してください。
SNS投稿の画像編集フロー：サイズ設計・ビジュアル統一・書き出し設定
SNS用クリエイティブの品質は、アイデアだけでなく制作フローで決まります。サイズ、構図、ブランド統一、書き出し設定まで、再現性のある画像編集手順を解説します。
カラーコード完全ガイド：RGB・HEX・HSL の変換原理とデザイン活用
RGB・HEX・HSL はすべて同じ色を表しますが、まったく異なる方法で記述します。本記事では各色モデルの設計思想・変換の数学・使い分けの基準から、WCAG アクセシビリティ対応まで徹底解説します。