なぜコントラストが重要なのか

世界中で約3億人が何らかの色覚異常を持っています。良好なコントラストで設計することは、単なる美観の問題ではなく、多くの地域で法的要件となっています。基準となる規格はWCAG 2.1で、次の2つのレベルを定めています。

  • レベルAA：通常テストで4.5:1、大きなテキスト（18px以上または14px太字）で3:1のコントラスト比。
  • レベルAAA：通常テキストで7:1。

よくあるミス

最も多いのは、白背景上の薄いグレー（1.5:1程度になることも）、視覚的には問題なく見えてもAAを通過しないカラーボタンの白テキスト、ライトモードでは合格してもダークモードで失敗する色などです。

実践的なワークフロー

  1. 背景色を取得する。Color Picker Camera: HEX RGBを開き、カメラを表面に向けてタップするだけでHEX値が即座に得られます。アプリはHSLも同時に表示します。
  2. テキストの色も同様に取得します。
  3. コントラストチェッカーでペアを確認する — WebAIM Contrast Checker、DevToolsのアクセシビリティパネル、またはFigmaのContrastプラグインなど。
  4. HSLで明度を調整して基準値をクリアする。H（色相）とS（彩度）を保ちながら、Lの値を下げて色を暗くします。

HSLがコントラスト調整に最適な理由

RGBとHEXは明度を直感的に操作できません。HSLは色相・彩度・明度を分離します。Color Picker Camera: HEX RGBはHEX、RGB、HSL、CMYKを同時に表示するため、手動変換不要です。

実例

中程度の青（#4A90E2）に白テキストのボタンは約3.1:1 — AAに届きません。ダークネイビー（#1A3A6B）に変えると9.4:1となり、AAAも余裕で超えます。

WCAG 3.0とAPCAについて

次世代のガイドラインではAPCA（知覚的コントラストモデル）が導入されます。WCAG 2.1 AAが現時点の標準ですが、長期的なプロジェクトにはAPCAのテストも検討する価値があります。

Color Picker Camera: HEX RGBはiOS版・Android版とも無料でダウンロードできます。広告なし、トラッキングなし、完全オフラインで動作します。