appstoryoAppStoryolapnito.cz s.r.o.blog/check-text-contrast-picked-color-ui/ko선택한 색상의 텍스트 대비를 UI에 적용하기 전에 확인하는 방법Lubor Šimůnek29082026© 2026 lapnito.cz s.r.o.2026lapnito.cz s.r.o.CC BY 4.0WCAG 대비율을 확인하고 HSL로 색상을 조정하여 항상 접근 가능하고 읽기 쉬운 UI를 만드는 방법을 알아보세요.
디자인articleAppStoryo대비가 중요한 이유전 세계적으로 약 3억 명이 어떤 형태로든 색각 이상을 가지고 있습니다. 충분한 대비로 디자인하는 것은 미적인 문제만이 아닙니다 — 많은 지역에서 법적 요구사항이기도 합니다. 기준이 되는 표준은 WCAG 2.1로, 두 가지 주요 레벨을 정의합니다.
AA 레벨: 일반 텍스트 4.5:1, 큰 텍스트(18px 이상 또는 14px 굵은체) 3:1의 대비율.
AAA 레벨: 일반 텍스트 7:1.
흔한 실수들가장 자주 발생하는 문제는 흰색 배경 위의 연한 회색(1.5:1 수준), 시각적으로 문제없어 보이지만 AA를 통과하지 못하는 컬러 버튼의 흰색 텍스트, 라이트 모드에서는 통과하지만 다크 모드에서는 실패하는 색상입니다.
실용적인 워크플로배경 색상을 캡처합니다. Color Picker Camera: HEX RGB를 열고 카메라를 표면에 향한 후 탭하면 즉시 HEX 값을 얻습니다. 앱은 HSL도 동시에 표시합니다.
텍스트 색상도 같은 방식으로 캡처합니다.
대비 검사기에서 쌍을 확인합니다 — WebAIM Contrast Checker, DevTools 접근성 패널, 또는 Figma의 Contrast 플러그인.
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 테스트도 고려할 만합니다.
iOS 또는 Android에서 Color Picker Camera: HEX RGB 앱을 무료로 다운로드하세요 — 광고도, 추적도 없으며 완전히 오프라인으로 작동합니다.