選んだ色のテキストコントラストをUIに使う前に確認する方法
=============================

UIに色を適用する前に、コントラストを確認しましょう。HEX値からアクセシブルなデザインへ移行するための具体的なワークフローを紹介します。

Author: Lubor Šimůnek
Published: 2026-08-29
Category: デザイン

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

世界中で約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 (https://apps.apple.com/us/app/color-picker-camera-hex-rgb/id6759371237)を開き、カメラを表面に向けてタップするだけでHEX値が即座に得られます。アプリはHSLも同時に表示します。
2. テキストの色も同様に取得します。
3. コントラストチェッカーでペアを確認する — WebAIM Contrast Checker、DevToolsのアクセシビリティパネル、またはFigmaのContrastプラグインなど。
4. HSLで明度を調整して基準値をクリアする。H（色相）とS（彩度）を保ちながら、Lの値を下げて色を暗くします。

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

RGBとHEXは明度を直感的に操作できません。HSLは色相・彩度・明度を分離します。Color Picker Camera: HEX RGB (https://play.google.com/store/apps/details?id=com.tomas.color_picker)は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 (https://apps.apple.com/us/app/color-picker-camera-hex-rgb/id6759371237)版・Android (https://play.google.com/store/apps/details?id=com.tomas.color_picker)版とも無料でダウンロードできます。広告なし、トラッキングなし、完全オフラインで動作します。

--
Source: https://appstoryo.com/ja/blog/check-text-contrast-picked-color-ui
License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)
Cite as: Lubor Šimůnek (2026). 選んだ色のテキストコントラストをUIに使う前に確認する方法. AppStoryo, lapnito.cz s.r.o. https://appstoryo.com/ja/blog/check-text-contrast-picked-color-ui