--- title: "選んだ色のテキストコントラストをUIに使う前に確認する方法" author: "Lubor Šimůnek" date: 2026-08-29 modified: 2026-08-29 language: "ja" url: "https://appstoryo.com/ja/blog/check-text-contrast-picked-color-ui" publisher: "AppStoryo (lapnito.cz s.r.o.)" license: "CC BY 4.0" license_url: "https://creativecommons.org/licenses/by/4.0/" category: "デザイン" keywords: ["デザイン", "article", "AppStoryo"] --- # 選んだ色のテキストコントラストをUIに使う前に確認する方法 > UIに色を適用する前に、コントラストを確認しましょう。HEX値からアクセシブルなデザインへ移行するための具体的なワークフローを紹介します。 ## なぜコントラストが重要なのか 世界中で約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: 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