명도 대비 체크: 글자색과 배경색 대비 검사

글자색과 배경색을 입력하거나 색 선택기로 고르세요. 명도 대비 체크 도구가 W3C 정의대로 두 색의 상대 휘도와 대비율을 계산하고, WCAG 2.2의 어느 기준을 통과하는지 보여 줍니다. 대비가 모자라면 기준을 채우는 가장 가까운 글자색을 제안합니다.

출처: SC 1.4.3, W3C – WCAG 2.2: Contrast (Minimum), Level AA. 업데이트: 2026년 9월 27일.

글자색 (전경색)

HEX, rgb(), hsl() 등. 투명도도 넣을 수 있습니다

배경색

나의 도구함입력한 값은 이 브라우저에만 저장됩니다.

결과

명도 대비: 4.48 : 1
WCAG 2.2 판정: 성공 기준 최소값 결과
일반 글자: AA (1.4.3) 4.5 : 1 ✗ 미달
일반 글자: AAA (1.4.6) 7 : 1 ✗ 미달
큰 글자: AA (1.4.3) 3 : 1 ✓ 통과
큰 글자: AAA (1.4.6) 4.5 : 1 ✗ 미달
UI 요소·그래픽: AA (1.4.11) 3 : 1 ✓ 통과
AA(4.5:1)를 채우는 가까운 글자색: #767676 (4.54 : 1)
AAA(7:1)를 채우는 가까운 글자색: #595959 (7.00 : 1)
글자색의 상대 휘도: 0.1845 (#777777)
배경색의 상대 휘도: 1.0000 (#FFFFFF)

성공 기준	최소값	결과
일반 글자: AA (1.4.3)	4.5 : 1	✗ 미달
일반 글자: AAA (1.4.6)	7 : 1	✗ 미달
큰 글자: AA (1.4.3)	3 : 1	✓ 통과
큰 글자: AAA (1.4.6)	4.5 : 1	✗ 미달
UI 요소·그래픽: AA (1.4.11)	3 : 1	✓ 통과

계산 방법

명도 대비 계산 방법

WCAG 2.2는 명도 대비(대비율)를 (L1 + 0.05) ÷ (L2 + 0.05)로 정의합니다. L1은 밝은 색, L2는 어두운 색의 상대 휘도입니다. 결과는 1:1(같은 색)부터 21:1(흰 바탕에 검은 글자)까지입니다.

명도 대비 체크 순서

글자색(전경색)을 입력하거나 고릅니다.
배경색을 입력하거나 고릅니다.
대비율과 통과한 기준(AA, AAA)을 확인하고, 필요하면 제안된 색을 씁니다.

예: 흰 바탕에 검은색은 21:1입니다. 흰 바탕에 회색 #767676은 4.54:1로 일반 글자 AA를 통과하지만, 흰 바탕에 파란색 #3B82F6은 3.68:1이라 큰 글자 AA만 통과합니다. 흰 바탕에서 AAA(7:1)를 채우는 회색은 #595959(7.00:1)부터입니다.

상대 휘도는 W3C 정의대로 계산합니다. sRGB 각 채널을 255로 나눠 선형화하는데, 0.04045 이하는 12.92로 나누고 그보다 크면 ((값 + 0.055) ÷ 1.055)^2.4로 바꿉니다. 그다음 L = 0.2126 × R + 0.7152 × G + 0.0722 × B입니다.

예: 흰 바탕에 #777777 0x77 = 119, 119 ÷ 255 = 0.4667 → ((0.4667 + 0.055) ÷ 1.055)^2.4 = 0.1845. 세 채널이 같으므로 L = 0.1845이고 흰색은 L = 1입니다. 대비율 = (1 + 0.05) ÷ (0.1845 + 0.05) = 4.48:1. 큰 글자(3:1)에는 충분하지만 일반 글자(4.5:1)에는 조금 모자랍니다. 제안되는 #767676이면 4.54:1이 됩니다.

WCAG 2.2 기준

성공 기준	수준	일반 글자	큰 글자
1.4.3 대비(최소)	AA	4.5:1	3:1
1.4.6 대비(강화)	AAA	7:1	4.5:1
1.4.11 비텍스트 대비 (UI 요소, 그래픽)	AA	3:1

WCAG에서 큰 글자는 18포인트 이상 또는 14포인트 이상의 굵은 글자입니다. 브라우저에서는 대략 24px과 18.67px에 해당합니다. 로고, 순수한 장식용 글자, 비활성화된 컨트롤 등은 예외입니다.

웹 접근성 명도 대비 기준 (한국)

한국형 웹 콘텐츠 접근성 지침(KWCAG) 2.2에도 「텍스트 콘텐츠의 명도 대비」 항목이 있습니다. 행정안전부의 디지털 정부서비스 UI/UX 가이드라인(KRDS)은 이 지침을 따르며, 정보를 전달하는 콘텐츠의 전경과 배경 사이 명도 대비를 4.5:1 이상으로, 버튼 테두리나 아이콘 같은 요소와 인접 배경 사이를 3:1 이상으로 정해 두었습니다. 웹 접근성 인증 심사를 준비한다면 실제 심사 기준을 함께 확인하세요.

반올림하지 않습니다

WCAG는 정확한 값으로 비교합니다. 4.499:1은 4.5:1을 채우지 못합니다. 그래서 이 검사기는 반올림 전의 비율로 판정하고 소수점 둘째 자리까지 보여 주며, 반올림하면 기준을 채운 것처럼 보일 때는 내림으로 표시합니다(4.50이 아니라 4.49).

투명한 색 다루기

알파 값이 있는 색(예: rgba(0, 0, 0, 0.6), #00000099)은 브라우저가 그리는 것처럼 겹쳐서 계산합니다. 반투명 배경은 흰색 위에, 반투명 글자색은 배경 위에 겹칩니다. 실제 페이지 바탕이 다른 색이면 그 불투명한 색을 배경색으로 넣으세요. 색상 코드 형식을 바꾸려면 색상 코드 변환기, 대비를 갖춘 색 조합을 고르려면 색상 팔레트 만들기를 쓰세요.

자주 묻는 질문

웹 접근성에서 필요한 명도 대비는 얼마인가요?

WCAG 2.2 기준으로 일반 글자는 4.5:1 이상(AA, 성공 기준 1.4.3), 큰 글자는 3:1 이상입니다. 더 엄격한 AAA에서는 각각 7:1과 4.5:1이 필요합니다. 입력란 테두리나 아이콘 같은 UI 요소는 3:1(1.4.11)입니다.

명도 대비란 무엇인가요?

두 색의 밝기 차이를 나타내는 값으로, 상대 휘도로 (밝은 쪽 + 0.05) ÷ (어두운 쪽 + 0.05)를 계산합니다. 1:1(차이 없음)부터 21:1(흰색과 검은색)까지이며, 값이 클수록 글자를 읽기 쉽습니다.

흰 바탕에서 AA를 통과하는 회색은?

흰 바탕에서 4.5:1 이상을 지키는 가장 밝은 회색은 #767676(4.54:1)입니다. #777777은 4.48:1이라 아주 조금 모자랍니다. AAA(7:1)는 #595959부터 통과합니다.

제안되는 색은 어떻게 정하나요?

글자색의 색상과 채도는 그대로 두고 HSL 밝기만 밝은 쪽과 어두운 쪽으로 조금씩 바꿉니다. 반올림한 뒤에도 목표값을 확실히 채우는, 변화가 가장 작은 색을 제안합니다.

한국 웹 접근성 기준도 같은가요?

한국형 웹 콘텐츠 접근성 지침(KWCAG) 2.2에도 「텍스트 콘텐츠의 명도 대비」 항목이 있고, 정부 디지털 서비스 디자인 가이드(KRDS)는 콘텐츠의 전경과 배경 대비를 4.5:1 이상으로 정합니다. WCAG의 일반 글자 AA 기준과 같은 값입니다.

출처 및 근거

업데이트: 2026년 9월 27일 · 편집 원칙