🌗 색상 대비 검사기 (WCAG 2.2)
글자색과 배경색을 고르면 명도 대비율과 웹 접근성 기준(AA·AAA) 통과 여부를 알려 줘요. 기준에 못 미치면 색감은 그대로 두고 밝기만 바꾼 가장 가까운 색을 추천해요.
명도 대비율
-
본문 글자 16px · 다람쥐 헌 쳇바퀴에 타고파. The quick brown fox.
큰 글자 24px 제목
굵은 글자 18.66px (14pt bold)
버튼입력창 테두리
기준을 통과하는 가장 가까운 색 (누르면 적용)
사용법
- 왼쪽 색 상자를 눌러 고르거나, 옆 칸에
#767676,#777,rgb(118,118,118)처럼 직접 넣어요. 투명도가 있는 색(#00000080,rgba(0,0,0,.5))은 배경과 섞은 색으로 계산해요. - 오른쪽에 대비율과 실제 미리보기, 기준별 통과·미달이 바로 나와요.
- 미달이면 아래 추천 색을 눌러 적용해 보세요. 글자색만 바꾸는 안과 배경색만 바꾸는 안을 함께 보여 줘요.
- '링크 복사'를 누르면 지금 색 조합이 담긴 주소가 복사돼 디자이너·개발자에게 그대로 공유할 수 있어요.
WCAG 2.2 명도 대비 기준
| 성공 기준 | 대상 | AA | AAA |
|---|---|---|---|
| 1.4.3 · 1.4.6 텍스트 대비 | 본문 글자 | 4.5:1 이상 | 7:1 이상 |
| 1.4.3 · 1.4.6 텍스트 대비 | 큰 글자 (18pt≈24px 이상, 또는 굵게 14pt≈18.66px 이상) | 3:1 이상 | 4.5:1 이상 |
| 1.4.11 비텍스트 대비 | 버튼·입력창 테두리, 포커스 표시, 아이콘, 차트 선 등 의미 있는 그래픽 | 3:1 이상 | - |
로고와 비활성(disabled) 상태의 버튼, 순수한 장식용 글자는 대비 기준에서 빠져요. 우리나라 한국형 웹 콘텐츠 접근성 지침(KWCAG 2.2)도 텍스트 명도 대비 4.5:1(큰 글자 3:1)을 같은 방식으로 요구해요.
대비율 계산 공식
- RGB 각 값(0~255)을 255로 나눠 0~1로 바꿔요.
- 감마를 풀어요: 값이 0.04045 이하면 ÷ 12.92, 아니면 ((값 + 0.055) ÷ 1.055)2.4.
- 상대 휘도 L = 0.2126 × R + 0.7152 × G + 0.0722 × B (사람 눈은 초록에 가장 민감해요).
- 대비율 = (밝은 쪽 L + 0.05) ÷ (어두운 쪽 L + 0.05). 1:1(같은 색)부터 21:1(검정과 흰색)까지 나와요.
예시: 흰 배경(L = 1)의 #767676은 L ≈ 0.1812라 (1 + 0.05) ÷ (0.1812 + 0.05) ≈ 4.54:1로 AA를 통과하고, 한 단계 밝은 #777777은 4.47:1로 미달이에요. WCAG는 소수점을 반올림해서 기준을 넘기지 말라고 하므로, 이 검사기는 셋째 자리에서 버린 값을 보여 줘요.
자주 걸리는 경우
- 흰 글자를 올린 밝은 브랜드 컬러 버튼:
#3B82F6파랑은 흰 글자와 3.67:1,#03C75A초록은 2.25:1이라 버튼 글자로는 미달이에요. 버튼 색을 한두 단계 어둡게 하거나 글자를 검정으로 바꿔 보세요. - placeholder와 안내문: 연회색
#9CA3AF는 흰 배경에서 2.53:1이에요. 입력 예시가 꼭 읽혀야 하는 정보라면 4.5:1을 맞추세요. - 입력창 테두리:
#D1D5DB처럼 아주 연한 테두리는 1.47:1이라, 칸이 어디 있는지 알아야 하는 입력창은 1.4.11(3:1)에 걸릴 수 있어요. - 다크 모드: 검정에 가까운 배경(#121212)에서는
#6B6B6B회색이 3.51:1로 본문에는 부족해요. 라이트·다크 두 테마를 모두 검사하세요.
HEX·RGB·HSL 변환과 셰이드 팔레트는 색상 코드 변환기에서, 계산 원리와 실무 예시는 WCAG 명도 대비 4.5:1 기준 정리에서 더 자세히 볼 수 있어요.
추천 색은 HSL의 색상·채도를 그대로 두고 밝기만 바꿔 찾은 값이라, 디자인 의도에 맞는지 눈으로 꼭 확인하세요. 대비율만으로 가독성이 모두 보장되지는 않아요(글꼴 굵기·크기·배경 무늬도 영향을 줘요). 모든 계산은 브라우저 안에서만 이뤄져요.
자주 묻는 질문
웹 접근성 명도 대비 기준은 얼마인가요?
WCAG 2.2 AA 기준으로 본문 글자는 4.5:1 이상, 큰 글자(24px 이상 또는 굵게 18.66px 이상)는 3:1 이상이에요. 버튼 테두리·아이콘 같은 UI 요소도 3:1 이상이어야 해요. AAA는 본문 7:1, 큰 글자 4.5:1이에요.
흰 배경에 쓸 수 있는 가장 연한 회색은?
#767676이에요. 흰 배경과 4.54:1로 본문 AA를 통과하는 가장 밝은 무채색 회색이에요. 바로 위 단계인 #777777은 4.47:1로 미달이에요. AAA(7:1)를 원하면 #595959보다 어두워야 해요.
대비율 4.49는 반올림해서 4.5로 봐도 되나요?
안 돼요. WCAG는 기준값을 반올림으로 넘기지 말라고 명시해요. 4.499:1은 4.5:1 미달이에요. 이 검사기도 소수 둘째 자리 아래는 버려서 보여 줘요.
큰 글자의 기준은 몇 px인가요?
18pt(약 24px) 이상, 또는 굵은 글꼴 14pt(약 18.66px) 이상이에요. CSS에서 font-size 24px이거나 font-weight 700에 18.66px 이상이면 3:1만 넘어도 AA 통과예요.
로고나 비활성 버튼도 대비를 맞춰야 하나요?
로고·브랜드 이름의 글자, 비활성(disabled) 상태의 컨트롤, 순수 장식은 대비 기준에서 빠져요. 하지만 비활성 상태라도 사용자가 그 존재를 알아야 한다면 너무 흐리게 하지 않는 게 좋아요.
KWCAG와 WCAG 대비 기준은 같나요?
텍스트 명도 대비는 같은 계산식과 4.5:1(큰 글자 3:1) 기준을 써요. 공공기관 웹 접근성 인증 심사에서도 이 값으로 확인하므로 이 검사기 결과를 그대로 참고할 수 있어요.