--- title: "선택한 색상의 텍스트 대비를 UI에 적용하기 전에 확인하는 방법" author: "Lubor Šimůnek" date: 2026-08-29 modified: 2026-08-29 language: "ko" url: "https://appstoryo.com/ko/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**로, 두 가지 주요 레벨을 정의합니다. - **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 테스트도 고려할 만합니다. **[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 앱을 무료로 다운로드하세요** — 광고도, 추적도 없으며 완전히 오프라인으로 작동합니다. --- 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/ko/blog/check-text-contrast-picked-color-ui