{
    "@context": "https://schema.org",
    "@type": "Article",
    "@id": "https://appstoryo.com/ko/blog/check-text-contrast-picked-color-ui",
    "url": "https://appstoryo.com/ko/blog/check-text-contrast-picked-color-ui",
    "identifier": "https://appstoryo.com/ko/blog/check-text-contrast-picked-color-ui",
    "name": "선택한 색상의 텍스트 대비를 UI에 적용하기 전에 확인하는 방법",
    "headline": "선택한 색상의 텍스트 대비를 UI에 적용하기 전에 확인하는 방법",
    "description": "WCAG 대비율을 확인하고 HSL로 색상을 조정하여 항상 접근 가능하고 읽기 쉬운 UI를 만드는 방법을 알아보세요.",
    "inLanguage": "ko",
    "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/ko/blog/check-text-contrast-picked-color-ui.pdf",
            "encodingFormat": "application/pdf"
        },
        {
            "@type": "MediaObject",
            "contentUrl": "https://appstoryo.com/ko/blog/check-text-contrast-picked-color-ui.md",
            "encodingFormat": "text/markdown"
        },
        {
            "@type": "MediaObject",
            "contentUrl": "https://appstoryo.com/ko/blog/check-text-contrast-picked-color-ui.txt",
            "encodingFormat": "text/plain"
        },
        {
            "@type": "MediaObject",
            "contentUrl": "https://appstoryo.com/ko/blog/check-text-contrast-picked-color-ui.json",
            "encodingFormat": "application/json"
        },
        {
            "@type": "MediaObject",
            "contentUrl": "https://appstoryo.com/ko/blog/check-text-contrast-picked-color-ui.epub",
            "encodingFormat": "application/epub+zip"
        },
        {
            "@type": "MediaObject",
            "contentUrl": "https://appstoryo.com/ko/blog/check-text-contrast-picked-color-ui.jats.xml",
            "encodingFormat": "application/xml"
        },
        {
            "@type": "MediaObject",
            "contentUrl": "https://appstoryo.com/ko/blog/check-text-contrast-picked-color-ui.bib",
            "encodingFormat": "application/x-bibtex"
        },
        {
            "@type": "MediaObject",
            "contentUrl": "https://appstoryo.com/ko/blog/check-text-contrast-picked-color-ui.ris",
            "encodingFormat": "application/x-research-info-systems"
        },
        {
            "@type": "MediaObject",
            "contentUrl": "https://appstoryo.com/ko/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/ko/blog/check-text-contrast-picked-color-ui",
    "sections": [
        {
            "level": 2,
            "heading": "대비가 중요한 이유",
            "text": "전 세계적으로 약 3억 명이 어떤 형태로든 색각 이상을 가지고 있습니다. 충분한 대비로 디자인하는 것은 미적인 문제만이 아닙니다 — 많은 지역에서 법적 요구사항이기도 합니다. 기준이 되는 표준은 WCAG 2.1로, 두 가지 주요 레벨을 정의합니다.\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\niOS (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)에서 Color Picker Camera: HEX RGB 앱을 무료로 다운로드하세요 — 광고도, 추적도 없으며 완전히 오프라인으로 작동합니다."
        }
    ],
    "text": "대비가 중요한 이유\n\n전 세계적으로 약 3억 명이 어떤 형태로든 색각 이상을 가지고 있습니다. 충분한 대비로 디자인하는 것은 미적인 문제만이 아닙니다 — 많은 지역에서 법적 요구사항이기도 합니다. 기준이 되는 표준은 WCAG 2.1로, 두 가지 주요 레벨을 정의합니다.\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\niOS (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)에서 Color Picker Camera: HEX RGB 앱을 무료로 다운로드하세요 — 광고도, 추적도 없으며 완전히 오프라인으로 작동합니다.",
    "markdown": "## 대비가 중요한 이유\n\n전 세계적으로 약 3억 명이 어떤 형태로든 색각 이상을 가지고 있습니다. 충분한 대비로 디자인하는 것은 미적인 문제만이 아닙니다 — 많은 지역에서 법적 요구사항이기도 합니다. 기준이 되는 표준은 **WCAG 2.1**로, 두 가지 주요 레벨을 정의합니다.\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**[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)에서 Color Picker Camera: HEX RGB 앱을 무료로 다운로드하세요** — 광고도, 추적도 없으며 완전히 오프라인으로 작동합니다.",
    "html": "<h2>대비가 중요한 이유</h2><p>전 세계적으로 약 3억 명이 어떤 형태로든 색각 이상을 가지고 있습니다. 충분한 대비로 디자인하는 것은 미적인 문제만이 아닙니다 — 많은 지역에서 법적 요구사항이기도 합니다. 기준이 되는 표준은 <strong>WCAG 2.1</strong>로, 두 가지 주요 레벨을 정의합니다.</p><ul><li><strong>AA 레벨</strong>: 일반 텍스트 4.5:1, 큰 텍스트(18px 이상 또는 14px 굵은체) 3:1의 대비율.</li><li><strong>AAA 레벨</strong>: 일반 텍스트 7:1.</li></ul><h2>흔한 실수들</h2><p>가장 자주 발생하는 문제는 흰색 배경 위의 연한 회색(1.5:1 수준), 시각적으로 문제없어 보이지만 AA를 통과하지 못하는 컬러 버튼의 흰색 텍스트, 라이트 모드에서는 통과하지만 다크 모드에서는 실패하는 색상입니다.</p><h2>실용적인 워크플로</h2><ol><li><strong>배경 색상을 캡처합니다.</strong> <a href=\"https://apps.apple.com/us/app/color-picker-camera-hex-rgb/id6759371237\">Color Picker Camera: HEX RGB</a>를 열고 카메라를 표면에 향한 후 탭하면 즉시 HEX 값을 얻습니다. 앱은 HSL도 동시에 표시합니다.</li><li><strong>텍스트 색상</strong>도 같은 방식으로 캡처합니다.</li><li><strong>대비 검사기에서 쌍을 확인합니다</strong> — WebAIM Contrast Checker, DevTools 접근성 패널, 또는 Figma의 Contrast 플러그인.</li><li><strong>HSL에서 명도를 조정하여 기준을 통과합니다.</strong> H(색조)와 S(채도)를 유지하면서 L 값을 낮춰 색상을 어둡게 합니다.</li></ol><h2>HSL이 대비 조정에 최적인 이유</h2><p>RGB와 HEX는 밝기를 직관적으로 제어할 수 없습니다. HSL은 색조, 채도, 명도를 분리합니다. <a href=\"https://play.google.com/store/apps/details?id=com.tomas.color_picker\">Color Picker Camera: HEX RGB</a>는 HEX, RGB, HSL, CMYK를 동시에 표시하므로 수동 변환이 필요 없습니다.</p><h2>실제 예시</h2><p>중간 파란색(#4A90E2)에 흰색 텍스트 버튼은 약 3.1:1 — AA에 못 미칩니다. 다크 네이비(#1A3A6B)로 바꾸면 9.4:1이 되어 AAA도 여유 있게 초과합니다.</p><h2>WCAG 3.0과 APCA에 대하여</h2><p>다음 세대 가이드라인은 보다 세밀한 지각적 대비 모델인 APCA를 도입합니다. WCAG 2.1 AA가 현재 적용 표준이지만, 장기 프로젝트라면 APCA 테스트도 고려할 만합니다.</p><p><strong><a href=\"https://apps.apple.com/us/app/color-picker-camera-hex-rgb/id6759371237\">iOS</a> 또는 <a href=\"https://play.google.com/store/apps/details?id=com.tomas.color_picker\">Android</a>에서 Color Picker Camera: HEX RGB 앱을 무료로 다운로드하세요</strong> — 광고도, 추적도 없으며 완전히 오프라인으로 작동합니다.</p>"
}