appstoryoAppStoryolapnito.cz s.r.o.blog/check-text-contrast-picked-color-ui/ja選んだ色のテキストコントラストをUIに使う前に確認する方法Lubor Šimůnek29082026© 2026 lapnito.cz s.r.o.2026lapnito.cz s.r.o.CC BY 4.0WCAGのコントラスト比を確認し、HSLで色を調整してUIを常にアクセシブルで読みやすくする方法を学びましょう。
デザインarticleAppStoryoなぜコントラストが重要なのか世界中で約3億人が何らかの色覚異常を持っています。良好なコントラストで設計することは、単なる美観の問題ではなく、多くの地域で法的要件となっています。基準となる規格はWCAG 2.1で、次の2つのレベルを定めています。
レベルAA：通常テストで4.5:1、大きなテキスト（18px以上または14px太字）で3:1のコントラスト比。
レベルAAA：通常テキストで7:1。
よくあるミス最も多いのは、白背景上の薄いグレー（1.5:1程度になることも）、視覚的には問題なく見えてもAAを通過しないカラーボタンの白テキスト、ライトモードでは合格してもダークモードで失敗する色などです。
実践的なワークフロー背景色を取得する。Color Picker Camera: HEX RGBを開き、カメラを表面に向けてタップするだけでHEX値が即座に得られます。アプリはHSLも同時に表示します。
テキストの色も同様に取得します。
コントラストチェッカーでペアを確認する — WebAIM Contrast Checker、DevToolsのアクセシビリティパネル、またはFigmaのContrastプラグインなど。
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版とも無料でダウンロードできます。広告なし、トラッキングなし、完全オフラインで動作します。