TH01-12
「おしゃれな雰囲気を出そうとして、背景に近い薄いグレーで文字を書いたら、目が疲れて読めなかった」
Webデザインにおいて、このような「視認性の欠如」は致命的なミスです。
対比（コントラスト）は単なる演出ではなく、情報を届けるための「インフラ」であり、そこには明確な数値基準が存在します。
目次
デザインは「読めて」初めて成立する
本サイトの観点では、読めないデザインはデザインではありません。
特にWebサイトは、屋外の明るい場所で見ている人、視力が低下している人、色覚特性を持つ人など、多様な状況のユーザーが閲覧します。
背景と文字のコントラストを正しく設計することは、すべてのユーザーに情報を届ける「アクセシビリティ」の第一歩です。
誰にでも読みやすい「コントラスト比」の基準
感覚で「見やすい」と判断するのではなく、世界標準のガイドライン（WCAG）が定める数値を指標にします。
- 最低基準（Level AA）：コントラスト比 4.5：1 以上
- より厳格な基準（Level AAA）：コントラスト比 7：1 以上
- ※大きな文字（18pt以上や太字）の場合は、少し緩和され 3：1 以上が目安となります。
「色」だけに頼らない対比の作り方
色覚特性（特定の色の区別が難しい特性）を持つユーザーにとって、色だけで情報を区別させるのは不親切です。
- NG：エラーメッセージを「赤い文字」にするだけ。
- OK：赤い文字に加えて「警告アイコン（⚠︎）」を添える、または下線を引く。
「色」という対比に「形」や「記号」という対比を掛け合わせることで、ロジックの強度はさらに増します。
ツールでロジカルにチェックする
現在のデザインツール（Figmaなど）には、コントラスト比を瞬時に測定するプラグインが多数存在します。
制作の途中で「これ、ちょっと読みづらいかな？」と感じたら、自分の目を疑う前に数値を測ってください。
ツールが「Pass（合格）」を出さない限り、その配色は採用しない。
この徹底したルール作りが、優れた品質を担保します。
視認性は「優しさ」の数値化
コントラスト比を守ることは、自由な表現を制限することではありません。
「誰もが迷わず情報を取得できる」という強固なロジックを担保した上で、その範囲内で美しさを追求する。
それが、Webデザインにおける正しい対比のあり方です。