명암대비 검사기

명암대비 검사기란?

명암대비 검사기는 글자색(전경색)과 배경색 사이의 색상 대비 비율(contrast ratio)을 계산해, 텍스트가 얼마나 읽기 쉬운지를 객관적으로 알려주는 도구입니다. 대비가 낮으면 저시력자나 색각 이상자뿐 아니라 일반 사용자도 글자를 읽기 어렵기 때문에, 웹·앱 디자인에서 접근성과 가독성을 확보하는 핵심 지표로 사용됩니다.

대비 비율은 1:1(완전히 같은 색)부터 21:1(순수한 검정과 흰색)까지의 값을 가집니다. 이 도구는 W3C가 정한 정확한 상대휘도 공식을 사용하며, WCAG AA·AAA 기준에 대해 일반 텍스트와 큰 텍스트의 통과/실패 여부를 각각 표시합니다.

WCAG 기준

AA · 일반 텍스트	4.5:1 이상
AA · 큰 텍스트	3:1 이상
AAA · 일반 텍스트	7:1 이상
AAA · 큰 텍스트	4.5:1 이상

큰 텍스트는 18pt(약 24px) 이상이거나 14pt(약 18.66px) 이상의 굵은 글자를 의미합니다. 일반 웹사이트는 보통 AA 기준을 목표로 하고, 고대비가 필요한 경우 AAA를 권장합니다.

사용법

• 전경(글자)색과 배경색을 컬러 피커로 고르거나 HEX 코드를 직접 입력합니다. #RGB 세 자리와 #RRGGBB 여섯 자리를 모두 인식합니다.
• 값을 바꾸는 즉시 미리보기의 글자색·배경색이 바뀌어 실제 느낌을 볼 수 있습니다. 큰 제목과 작은 본문이 함께 표시됩니다.
• 아래 대비 비율과 AA·AAA 네 가지 기준의 통과·실패 표를 확인합니다.
• 복사 버튼을 누르면 두 색과 대비율, 네 기준의 판정 결과가 한 덩어리 글로 복사됩니다.

계산 원리

대비 비율은 두 색의 상대휘도를 비교해 구합니다. 먼저 R·G·B 각 채널을 0~1로 나눈 뒤 sRGB 감마를 되돌려 선형값으로 바꾸고, 사람 눈이 초록에 가장 민감한 점을 반영해 0.2126R + 0.7152G + 0.0722B로 합칩니다. 이렇게 얻은 두 휘도를 (밝은 쪽 + 0.05) ÷ (어두운 쪽 + 0.05)에 넣으면 대비 비율이 나옵니다.

단순히 색이 얼마나 달라 보이는지가 아니라 밝기 차이만 따지기 때문에, 색상은 전혀 다른데 밝기가 비슷한 두 색은 낮은 값이 나옵니다. 예를 들어 중간 밝기의 빨강과 초록처럼 화면에서 확 달라 보여도 대비는 부족할 수 있습니다.

가까운 통과 색 제안

AA 일반 텍스트 기준인 4.5:1에 못 미치면 결과 아래에 가까운 통과 색이 나타납니다. 지금 전경색을 검정 쪽과 흰색 쪽으로 조금씩 섞어 보며, 가장 적게 바꾸고도 4.5:1을 넘기는 지점을 찾아 제안합니다. 제안된 HEX를 클릭하면 전경색에 바로 적용되고 클립보드에도 복사됩니다. 배경색은 그대로 두고 글자색만 손보고 싶을 때 유용합니다.

색각 이상 시뮬레이션

미리보기 아래에는 같은 색 조합이 적색맹·녹색맹·청황색맹 눈에 어떻게 보일 수 있는지를 세 칸으로 함께 보여 줍니다. Brettel/Viénot 근사 행렬로 계산한 참고용 결과이며 실제 보임에는 개인차가 있습니다. 대비 수치는 통과하더라도 특정 색 조합이 구분되지 않는 경우를 미리 확인할 때 도움이 됩니다.

활용 예시

• 본문 글자색과 배경색이 최소 기준을 넘는지 확인하기
• 브랜드 색을 버튼 배경으로 쓸 때 흰 글자와 검은 글자 중 어느 쪽이 나은지 비교하기
• 회색 톤의 보조 설명 문구가 너무 흐리지 않은지 점검하기
• 다크 모드 색상을 정하며 라이트 모드와 각각 검사하기
• 공공기관·교육 사이트처럼 접근성 요구가 높은 화면에서 AAA 기준까지 확인하기

주의점과 팁

• 대비 기준은 텍스트와 그 배경을 기준으로 합니다. 아이콘이나 입력창 테두리 같은 요소는 별도 기준(3:1)이 적용됩니다.
• 글자 위에 반투명 배경이나 그라데이션이 깔려 있으면 실제로 겹쳐진 색을 계산해 넣어야 정확합니다.
• 큰 텍스트 기준은 크기와 굵기를 함께 봅니다. 24px이라도 얇은 서체는 실제로 읽기 어려울 수 있으니 여유를 두세요.
• 정보를 색만으로 구분하지 말고 아이콘·밑줄·문구를 함께 쓰면 색각 이상 사용자에게도 전달됩니다.
• 모든 계산은 브라우저 안에서 이루어지며 입력한 색값은 서버로 전송되지 않습니다.

자주 묻는 질문

명암대비 비율은 어떻게 계산하나요?

두 색의 상대휘도(L)를 각각 구한 뒤 (밝은색 L + 0.05) ÷ (어두운색 L + 0.05) 공식으로 계산합니다. 상대휘도는 RGB 각 채널을 sRGB에서 선형값으로 변환한 후 0.2126R + 0.7152G + 0.0722B로 구합니다. 대비 비율은 1:1부터 21:1까지의 값을 가집니다.

WCAG AA와 AAA 기준의 차이는 무엇인가요?

AA는 일반 텍스트 4.5:1, 큰 텍스트 3:1 이상을 요구하는 최소 권장 기준이고, AAA는 일반 텍스트 7:1, 큰 텍스트 4.5:1 이상을 요구하는 강화 기준입니다. 대부분의 웹사이트는 AA를 목표로 하며, 고대비가 필요한 서비스는 AAA를 권장합니다.

큰 텍스트의 기준은 무엇인가요?

WCAG에서 큰 텍스트는 18pt(약 24px) 이상이거나, 14pt(약 18.66px) 이상의 굵은(bold) 글자를 의미합니다. 큰 텍스트는 더 낮은 대비 비율(AA 3:1, AAA 4.5:1)이 허용됩니다.

대비 비율 21:1은 어떤 경우인가요?

가장 높은 대비 비율인 21:1은 순수한 검정(#000000)과 순수한 흰색(#FFFFFF) 조합에서만 나옵니다. 반대로 같은 색끼리는 1:1이 되어 글자가 전혀 보이지 않습니다.

기준에 미달하면 어떻게 고치나요?

결과 아래에 AA 일반 텍스트 4.5:1을 통과하는 가장 가까운 색이 제안됩니다. 지금 전경색을 검정 쪽이나 흰색 쪽으로 조금씩 섞어 찾은 값이며, HEX를 클릭하면 전경색에 바로 적용되고 복사도 됩니다.

색각 이상 시뮬레이션은 어떤 기준인가요?

Brettel/Viénot 근사 행렬로 적색맹·녹색맹·청황색맹에서 같은 조합이 어떻게 보일 수 있는지 계산해 보여 줍니다. 참고용 근사치이므로 실제 보임에는 개인차가 있습니다.

HEX 말고 다른 형식도 입력할 수 있나요?

이 도구는 HEX 코드를 입력받습니다. #RGB 세 자리와 #RRGGBB 여섯 자리를 모두 인식하며, 컬러 피커로 고르면 입력칸에도 같은 값이 채워집니다.

입력한 색이 저장되나요?

저장되지 않습니다. 계산은 모두 브라우저 안에서 이루어지고 색값이 서버로 전송되지 않으며, 새로고침하면 기본값으로 돌아갑니다.