{ "@context": "https://schema.org", "@type": "Article", "@id": "https://appstoryo.com/ja/blog/check-text-contrast-picked-color-ui", "url": "https://appstoryo.com/ja/blog/check-text-contrast-picked-color-ui", "identifier": "https://appstoryo.com/ja/blog/check-text-contrast-picked-color-ui", "name": "選んだ色のテキストコントラストをUIに使う前に確認する方法", "headline": "選んだ色のテキストコントラストをUIに使う前に確認する方法", "description": "WCAGのコントラスト比を確認し、HSLで色を調整してUIを常にアクセシブルで読みやすくする方法を学びましょう。", "inLanguage": "ja", "datePublished": "2026-08-29", "dateModified": "2026-08-29", "author": { "@type": "Person", "name": "Lubor Šimůnek" }, "publisher": { "@type": "Organization", "name": "lapnito.cz s.r.o.", "url": "https://appstoryo.com" }, "isPartOf": { "@type": "WebSite", "name": "AppStoryo", "url": "https://appstoryo.com" }, "license": "https://creativecommons.org/licenses/by/4.0/", "keywords": [ "デザイン", "article", "AppStoryo" ], "articleSection": "デザイン", "image": "https://appstoryo.com/upload/blog/check-text-contrast-picked-color-ui-hero.jpg", "encoding": [ { "@type": "MediaObject", "contentUrl": "https://appstoryo.com/ja/blog/check-text-contrast-picked-color-ui.pdf", "encodingFormat": "application/pdf" }, { "@type": "MediaObject", "contentUrl": "https://appstoryo.com/ja/blog/check-text-contrast-picked-color-ui.md", "encodingFormat": "text/markdown" }, { "@type": "MediaObject", "contentUrl": "https://appstoryo.com/ja/blog/check-text-contrast-picked-color-ui.txt", "encodingFormat": "text/plain" }, { "@type": "MediaObject", "contentUrl": "https://appstoryo.com/ja/blog/check-text-contrast-picked-color-ui.json", "encodingFormat": "application/json" }, { "@type": "MediaObject", "contentUrl": "https://appstoryo.com/ja/blog/check-text-contrast-picked-color-ui.epub", "encodingFormat": "application/epub+zip" }, { "@type": "MediaObject", "contentUrl": "https://appstoryo.com/ja/blog/check-text-contrast-picked-color-ui.jats.xml", "encodingFormat": "application/xml" }, { "@type": "MediaObject", "contentUrl": "https://appstoryo.com/ja/blog/check-text-contrast-picked-color-ui.bib", "encodingFormat": "application/x-bibtex" }, { "@type": "MediaObject", "contentUrl": "https://appstoryo.com/ja/blog/check-text-contrast-picked-color-ui.ris", "encodingFormat": "application/x-research-info-systems" }, { "@type": "MediaObject", "contentUrl": "https://appstoryo.com/ja/blog/check-text-contrast-picked-color-ui.csl.json", "encodingFormat": "application/vnd.citationstyles.csl+json" } ], "cite": "Lubor Šimůnek (2026). 選んだ色のテキストコントラストをUIに使う前に確認する方法. AppStoryo, lapnito.cz s.r.o. https://appstoryo.com/ja/blog/check-text-contrast-picked-color-ui", "sections": [ { "level": 2, "heading": "なぜコントラストが重要なのか", "text": "世界中で約3億人が何らかの色覚異常を持っています。良好なコントラストで設計することは、単なる美観の問題ではなく、多くの地域で法的要件となっています。基準となる規格はWCAG 2.1で、次の2つのレベルを定めています。\n\n- レベルAA：通常テストで4.5:1、大きなテキスト（18px以上または14px太字）で3:1のコントラスト比。\n- レベルAAA：通常テキストで7:1。" }, { "level": 2, "heading": "よくあるミス", "text": "最も多いのは、白背景上の薄いグレー（1.5:1程度になることも）、視覚的には問題なく見えてもAAを通過しないカラーボタンの白テキスト、ライトモードでは合格してもダークモードで失敗する色などです。" }, { "level": 2, "heading": "実践的なワークフロー", "text": "1. 背景色を取得する。Color Picker Camera: HEX RGB (https://apps.apple.com/us/app/color-picker-camera-hex-rgb/id6759371237)を開き、カメラを表面に向けてタップするだけでHEX値が即座に得られます。アプリはHSLも同時に表示します。\n2. テキストの色も同様に取得します。\n3. コントラストチェッカーでペアを確認する — WebAIM Contrast Checker、DevToolsのアクセシビリティパネル、またはFigmaのContrastプラグインなど。\n4. HSLで明度を調整して基準値をクリアする。H（色相）とS（彩度）を保ちながら、Lの値を下げて色を暗くします。" }, { "level": 2, "heading": "HSLがコントラスト調整に最適な理由", "text": "RGBとHEXは明度を直感的に操作できません。HSLは色相・彩度・明度を分離します。Color Picker Camera: HEX RGB (https://play.google.com/store/apps/details?id=com.tomas.color_picker)はHEX、RGB、HSL、CMYKを同時に表示するため、手動変換不要です。" }, { "level": 2, "heading": "実例", "text": "中程度の青（#4A90E2）に白テキストのボタンは約3.1:1 — AAに届きません。ダークネイビー（#1A3A6B）に変えると9.4:1となり、AAAも余裕で超えます。" }, { "level": 2, "heading": "WCAG 3.0とAPCAについて", "text": "次世代のガイドラインではAPCA（知覚的コントラストモデル）が導入されます。WCAG 2.1 AAが現時点の標準ですが、長期的なプロジェクトにはAPCAのテストも検討する価値があります。\n\nColor 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)版とも無料でダウンロードできます。広告なし、トラッキングなし、完全オフラインで動作します。" } ], "text": "なぜコントラストが重要なのか\n\n世界中で約3億人が何らかの色覚異常を持っています。良好なコントラストで設計することは、単なる美観の問題ではなく、多くの地域で法的要件となっています。基準となる規格はWCAG 2.1で、次の2つのレベルを定めています。\n\n- レベルAA：通常テストで4.5:1、大きなテキスト（18px以上または14px太字）で3:1のコントラスト比。\n- レベルAAA：通常テキストで7:1。\n\nよくあるミス\n\n最も多いのは、白背景上の薄いグレー（1.5:1程度になることも）、視覚的には問題なく見えてもAAを通過しないカラーボタンの白テキスト、ライトモードでは合格してもダークモードで失敗する色などです。\n\n実践的なワークフロー\n\n1. 背景色を取得する。Color Picker Camera: HEX RGB (https://apps.apple.com/us/app/color-picker-camera-hex-rgb/id6759371237)を開き、カメラを表面に向けてタップするだけでHEX値が即座に得られます。アプリはHSLも同時に表示します。\n2. テキストの色も同様に取得します。\n3. コントラストチェッカーでペアを確認する — WebAIM Contrast Checker、DevToolsのアクセシビリティパネル、またはFigmaのContrastプラグインなど。\n4. HSLで明度を調整して基準値をクリアする。H（色相）とS（彩度）を保ちながら、Lの値を下げて色を暗くします。\n\nHSLがコントラスト調整に最適な理由\n\nRGBとHEXは明度を直感的に操作できません。HSLは色相・彩度・明度を分離します。Color Picker Camera: HEX RGB (https://play.google.com/store/apps/details?id=com.tomas.color_picker)はHEX、RGB、HSL、CMYKを同時に表示するため、手動変換不要です。\n\n実例\n\n中程度の青（#4A90E2）に白テキストのボタンは約3.1:1 — AAに届きません。ダークネイビー（#1A3A6B）に変えると9.4:1となり、AAAも余裕で超えます。\n\nWCAG 3.0とAPCAについて\n\n次世代のガイドラインではAPCA（知覚的コントラストモデル）が導入されます。WCAG 2.1 AAが現時点の標準ですが、長期的なプロジェクトにはAPCAのテストも検討する価値があります。\n\nColor 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)版とも無料でダウンロードできます。広告なし、トラッキングなし、完全オフラインで動作します。", "markdown": "## なぜコントラストが重要なのか\n\n世界中で約3億人が何らかの色覚異常を持っています。良好なコントラストで設計することは、単なる美観の問題ではなく、多くの地域で法的要件となっています。基準となる規格は**WCAG 2.1**で、次の2つのレベルを定めています。\n\n- **レベルAA**：通常テストで4.5:1、大きなテキスト（18px以上または14px太字）で3:1のコントラスト比。\n- **レベルAAA**：通常テキストで7:1。\n\n## よくあるミス\n\n最も多いのは、白背景上の薄いグレー（1.5:1程度になることも）、視覚的には問題なく見えてもAAを通過しないカラーボタンの白テキスト、ライトモードでは合格してもダークモードで失敗する色などです。\n\n## 実践的なワークフロー\n\n1. **背景色を取得する。**[Color Picker Camera: HEX RGB](https://apps.apple.com/us/app/color-picker-camera-hex-rgb/id6759371237)を開き、カメラを表面に向けてタップするだけでHEX値が即座に得られます。アプリはHSLも同時に表示します。\n2. **テキストの色**も同様に取得します。\n3. **コントラストチェッカーでペアを確認する** — WebAIM Contrast Checker、DevToolsのアクセシビリティパネル、またはFigmaのContrastプラグインなど。\n4. **HSLで明度を調整して基準値をクリアする。**H（色相）とS（彩度）を保ちながら、Lの値を下げて色を暗くします。\n\n## HSLがコントラスト調整に最適な理由\n\nRGBとHEXは明度を直感的に操作できません。HSLは色相・彩度・明度を分離します。[Color Picker Camera: HEX RGB](https://play.google.com/store/apps/details?id=com.tomas.color_picker)はHEX、RGB、HSL、CMYKを同時に表示するため、手動変換不要です。\n\n## 実例\n\n中程度の青（#4A90E2）に白テキストのボタンは約3.1:1 — AAに届きません。ダークネイビー（#1A3A6B）に変えると9.4:1となり、AAAも余裕で超えます。\n\n## WCAG 3.0とAPCAについて\n\n次世代のガイドラインではAPCA（知覚的コントラストモデル）が導入されます。WCAG 2.1 AAが現時点の標準ですが、長期的なプロジェクトにはAPCAのテストも検討する価値があります。\n\n**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)版とも無料でダウンロードできます**。広告なし、トラッキングなし、完全オフラインで動作します。", "html": "

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

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

よくあるミス

最も多いのは、白背景上の薄いグレー（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版とも無料でダウンロードできます。広告なし、トラッキングなし、完全オフラインで動作します。

" }