🌗 색상 대비 검사기 (WCAG 2.2)

사용법

1. 왼쪽 색 상자를 눌러 고르거나, 옆 칸에 #767676, #777, rgb(118,118,118)처럼 직접 넣어요. 투명도가 있는 색(#00000080, rgba(0,0,0,.5))은 배경과 섞은 색으로 계산해요.
2. 오른쪽에 대비율과 실제 미리보기, 기준별 통과·미달이 바로 나와요.
3. 미달이면 아래 추천 색을 눌러 적용해 보세요. 글자색만 바꾸는 안과 배경색만 바꾸는 안을 함께 보여 줘요.
4. '링크 복사'를 누르면 지금 색 조합이 담긴 주소가 복사돼 디자이너·개발자에게 그대로 공유할 수 있어요.

WCAG 2.2 명도 대비 기준

로고와 비활성(disabled) 상태의 버튼, 순수한 장식용 글자는 대비 기준에서 빠져요. 우리나라 한국형 웹 콘텐츠 접근성 지침(KWCAG 2.2)도 텍스트 명도 대비 4.5:1(큰 글자 3:1)을 같은 방식으로 요구해요.

대비율 계산 공식

1. RGB 각 값(0~255)을 255로 나눠 0~1로 바꿔요.
2. 감마를 풀어요: 값이 0.04045 이하면 ÷ 12.92, 아니면 ((값 + 0.055) ÷ 1.055)^2.4.
3. 상대 휘도 L = 0.2126 × R + 0.7152 × G + 0.0722 × B (사람 눈은 초록에 가장 민감해요).
4. 대비율 = (밝은 쪽 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로 본문에는 부족해요. 라이트·다크 두 테마를 모두 검사하세요.

회색 단계별 대비율 미리 계산표

무채색 회색을 흰 배경, 검정 배경, 다크 모드에서 흔히 쓰는 #121212 배경에 올렸을 때의 값이에요. 셋째 자리에서 버렸어요.

표에서 보듯 #767676은 흰 배경과 검정 배경 양쪽에서 4.5:1을 넘는 거의 유일한 중간 회색이에요. 다크 모드 본문 회색은 #808080보다 밝게 잡아야 안전해요.

예시 계산 3가지

1. 파란 버튼 고치기 — 흰 글자에 #3B82F6은 3.67:1로 본문 미달이에요. 한 단계 진한 #2563EB는 5.16:1, #1D4ED8은 6.70:1이라 둘 다 AA 통과예요. 버튼 글자가 16px 보통 굵기라면 4.5:1을 기준으로 골라야 해요.
2. 초록 버튼은 글자를 검정으로 — #03C75A 배경에 흰 글자는 2.25:1이지만 검정 글자는 9.32:1로 AAA까지 통과해요. 브랜드 색을 바꾸기 어렵다면 글자색을 바꾸는 쪽이 빨라요. 초록을 유지하면서 흰 글자를 쓰려면 #15803D(5.01:1)처럼 훨씬 어둡게 해야 해요.
3. 반투명 글자 — 흰 배경에 rgba(0,0,0,.5)를 넣으면 배경과 섞인 #808080 근처 색으로 계산돼 3.97:1, 미달이에요. 불투명도를 0.6으로 올리면 5.74:1로 AA를 통과해요. 디자인 툴에서 "검정 50%"로 지정한 안내문이 자주 걸리는 이유예요.

WCAG 2.2에서 달라진 것과 달라지지 않은 것

2023년 10월 W3C 권고안이 된 WCAG 2.2는 2.1의 대비 기준(1.4.3 · 1.4.6 · 1.4.11)과 계산식을 그대로 이어받았어요. 새로 생긴 것은 포커스 관련 기준이에요.

기준별 해설은 W3C의 Understanding 1.4.3 대비(최소), Understanding 1.4.11 비텍스트 대비에 예시와 함께 나와 있어요. 초안 단계인 WCAG 3의 APCA 같은 새 계산법은 아직 표준이 아니라서, 지금 심사·인증은 이 페이지의 4.5:1 · 3:1 계산을 기준으로 해요.

흔한 실수

• 4.48을 "거의 4.5"로 통과 처리 — 기준은 넘었는지 아닌지만 봐요. 반올림하지 마세요.
• 그라데이션·사진 위 글자를 한 점만 검사 — 글자 뒤에서 가장 밝은(또는 어두운) 지점의 색으로 검사해야 해요.
• 호버·포커스·선택 상태를 빼먹기 — 상태마다 색이 바뀌면 상태별로 따로 재야 해요.
• px와 pt 혼동 — 큰 글자 기준 18pt는 24px, 14pt는 약 18.66px이에요. CSS 18px 굵은 글씨는 큰 글자가 아니에요.

HEX·RGB·HSL 변환과 셰이드 팔레트는 색상 코드 변환기에서, 계산 원리와 실무 예시는 WCAG 명도 대비 4.5:1 기준 정리에서 더 자세히 볼 수 있어요.

추천 색은 HSL의 색상·채도를 그대로 두고 밝기만 바꿔 찾은 값이라, 디자인 의도에 맞는지 눈으로 꼭 확인하세요. 대비율만으로 가독성이 모두 보장되지는 않아요(글꼴 굵기·크기·배경 무늬도 영향을 줘요). 모든 계산은 브라우저 안에서만 이뤄져요.

자주 묻는 질문

이 도구와 함께 보면 좋은 글

관련 도구