こんにちは、Kaedeです🌿
「背景と文字が同化して読みにくい！」そんな経験、ありませんか？
今回はたった5秒でできるコントラスト比チェックを紹介します。画像ゼロ＆ツール不要、覚えておくだけで配色事故を回避できるので、ぜひ試してみてください。
1. まず“明度差”を目視で見る
-
背景色と文字色をグレースケールに変換（頭の中でOK）
-
2段階以上の明度差があれば読みやすいサイン
-
迷ったら“#000（黒）→#FFF（白）”を基準に距離感をつかむ
2. スマホ輝度を50％に落とす
-
実機で輝度を半分以下へ
-
それでも可読なら、ほぼ合格
-
夜間モードや屋外でも視認性が保てるか確認を
3. コントラスト早見表を暗記する📋
| 状況 | 最低コントラスト比 | 覚え方 |
|---|---|---|
| 小さな本文 | 4.5:1 | “しっかり読もうヨンゴ” |
| 見出し・大文字 | 3:1 | “見出しはミツ” |
| UIアイコン | 3:1 | 同上 |
🌱ポイント：太字・大文字は面積が増えるので、若干コントラストを下げてもOK。
4. 最終テスト：スクリーンショットを縮小
-
スクショを25％まで縮小
-
縮小しても文字が読めない＝コントラスト不足
-
時間がないときの最速チェック！
☕まとめ
-
明度差をグレースケールで確認
-
実機輝度50％テスト
-
早見表の数字を暗記
-
スクショ縮小でダブルチェック
4ステップを守れば、配色ミスによる読みにくさとはサヨナラです✨
今回も画像なし・テキストのみのライトなTipsでした。
次回はフォント選びのコツも紹介する予定なのでお楽しみに！
#デザインTips #コントラスト比 #アクセシビリティ #UIUX #Kaede