ブランドカラー×文字色 自動提案
背景色を選ぶだけで、読みやすい文字色をWCAG基準で自動提案。コントラスト比・プレビュー・コピーに対応。
ブランドカラー（背景色）を選ぶ
おすすめの文字色: #FFFFFF
見出しテキストの見え方
この背景色に対して自動で選んだ文字色でのプレビューです。本文がストレスなく読めるかを確認できます。
ボタン枠線ボタン
文字色の候補と読みやすさ（WCAG判定）
Aa
白 #FFFFFF
コントラスト比 10.98:1
AA ○AAA ○大AA ○
Aa
明るいトーン #78B1ED
コントラスト比 4.87:1
AA ○AAA ×大AA ○
Aa
黒 #000000
コントラスト比 1.91:1
AA ×AAA ×大AA ×
本文には「AA○」以上（コントラスト比4.5:1以上）、見出しなど大きな文字は「大AA○」（3:1以上）を目安にしてください。
相性のよいアクセントカラー
タップするとその色を背景色として読み込みます。
使い方
- カラーピッカーまたはHEX入力でブランドカラー（背景色）を指定する
- ライブプレビューで見出し・本文・ボタンの見え方を確認する
- 文字色候補のWCAG判定（AA / AAA）を見て、本文に使える色を選ぶ
- HEX・RGB・CSS・Tailwind形式でコピーしてそのまま使う
背景色と文字色の相性で読みやすさが決まる
Webサイトやバナーで「なんとなく読みにくい」と感じる原因の多くは、背景色と文字色のコントラスト不足です。濃い背景には白、明るい背景には黒が基本ですが、中間の明るさの色は白でも黒でも4.5:1に届かないことがあります。数値で確認せずに感覚で決めると、スマホの屋外や高齢者の環境で読めなくなることがあるため、コントラスト比での確認が確実です。
関連ツール
- ・2色だけ細かく確認したいときは コントラスト比チェッカー
- ・配色全体をまとめて確認する 配色アクセシビリティチェッカー
- ・色覚の見え方を確認する 色覚シミュレーター
広告