디자인 검증 도구 · 브라우저 안에서 계산
한글 UI 색상 대비 검사기
브랜드색을 버튼에 적용하기 전에 글자가 읽히는지 확인하세요. 두 색의 대비를 계산하고, 판단 근거를 DESIGN.md와 함께 보관할 수 있습니다. 입력한 색은 서버에 저장하지 않습니다.
#FFF 또는 #FFFFFF처럼 3자리·6자리 HEX를 입력하세요. 알파값은 지원하지 않습니다.
대비 4.92:1
- 일반 텍스트 AA (4.5:1): 기준 충족
- 큰 텍스트 AA (3:1): 기준 충족
- 일반 텍스트 AAA (7:1): 기준 미달
예약 내용을 확인해 주세요
10월 15일 · 성인 2명 · 합계 60,000원
수록 팔레트에서 시작하기
각 스타일의 첫 번째 강조색과 흰 글자를 비교한 값입니다. 값은 이 사이트의 구현 제안이며 브랜드 공식 사양이 아닙니다.
| 스타일 | 배경 | 대비 / 일반 AA | 계산기에 적용 |
|---|---|---|---|
| Naver | #03C75A | 2.25:1 / 미달 | |
| Kakao | #FEE500 | 1.28:1 / 미달 | |
| Toss | #0064FF | 4.92:1 / 충족 | |
| Coupang | #E52528 | 4.54:1 / 충족 | |
| Baemin | #2AC1BC | 2.22:1 / 미달 | |
| 29CM | #111111 | 18.88:1 / 충족 | |
| Musinsa | #000000 | 21.00:1 / 충족 | |
| Kurly | #5F0080 | 11.68:1 / 충족 | |
| Yanolja | #FF3478 | 3.49:1 / 미달 | |
| Daangn | #FF6F0F | 2.79:1 / 미달 | |
| Watcha | #FF0558 | 3.88:1 / 미달 | |
| Zigbang | #FF5A36 | 3.10:1 / 미달 |
계산 결과를 화면 수정으로 연결하기
예를 들어 흰 글자에 노란 배경 #FEE500을 사용하면 대비가 1.28:1입니다. 작은 버튼 문구에 사용하기에는 기준에 미달합니다. 배경을 유지하고 글자를 #000000으로 바꾸면 16.42:1이 됩니다. 이것은 색 조합의 계산 예시이며 특정 서비스의 실제 화면 평가가 아닙니다.
- 실제 글자와 바로 뒤 배경의 CSS 색을 입력합니다. 팔레트의 강조색만 보고 판단하지 않습니다.
- 일반 본문·버튼은 4.5:1을 기준으로 확인합니다. 큰 글자는 18pt 이상 또는 굵은 14pt 이상에 해당할 때 3:1 기준을 적용합니다.
- 미달이면 글자를 더 어둡거나 밝게 조정하고 다시 계산합니다. 색만으로 오류를 표시하지 말고 설명 문장도 추가합니다.
- 결과 파일을 구현 지시문과 함께 저장하고 실제 모바일 화면에서 글자 크기·줄바꿈·키보드 포커스를 추가 점검합니다.
계산 방법과 한계
sRGB 채널을 0~1로 변환한 뒤 0.04045 이하에서는 12.92로 나누고, 나머지는 ((채널+0.055)/1.055)의 2.4제곱으로 선형화합니다. 상대 휘도는 R×0.2126 + G×0.7152 + B×0.0722이며, (밝은 휘도+0.05)/(어두운 휘도+0.05)를 계산합니다. 판정에는 반올림 전 값을 사용합니다.
이 도구는 불투명 sRGB 단색 조합만 다룹니다. 이미지·투명도·그라데이션·글꼴 렌더링·비텍스트 요소는 별도 점검해야 합니다. 계산 결과는 WCAG 전체 인증이나 전문가 검토가 아닙니다.