색상 대비 검사기
WCAG 2.1 AA 및 AAA 기준으로 글자색과 배경색의 대비를 검사하세요 — 대비비를 즉시 표시하고 실시간 미리보기와 통과/실패 배지를 제공합니다.
색상 설정
4.48:1높을수록 좋습니다. WCAG는 보통 글자에 최소 4.5:1을 요구합니다.Aa 보통 글자 — 다람쥐 헌 쳇바퀴에 타고파
Aa 큰 글자
이 도구에 대하여
이 색상 대비 검사기는 WCAG 2.1 대비 공식을 사용하여 글자가 배경 위에서 얼마나 읽기 쉬운지를 측정합니다. 글자색과 배경색을 HEX 값으로 입력하거나 시각적으로 선택하면, 대비비(예: 4.52:1)와 함께 웹 콘텐츠 접근성 지침의 AA·AAA 등급에 대한 통과 또는 실패 배지를 즉시 보여줍니다. 실시간 미리보기가 선택한 색상으로 예시 글자를 표시하여 결과를 한눈에 판단할 수 있고, 바꾸기 버튼으로 전경과 배경을 뒤바꿀 수 있습니다. 모든 처리가 브라우저에서 이루어지므로 빠르고 개인 정보가 보호되며, 한 번 로드한 뒤에는 오프라인에서도 작동합니다 — 디자이너, 개발자, 접근 가능한 인터페이스를 만드는 모든 사람에게 적합합니다.
사용 방법
- 1 글자색(전경)을 HEX 값으로 입력하거나 색상 선택기로 고르세요.
- 2 같은 방식으로 배경색을 입력하세요. #rgb와 #rrggbb 모두 지원합니다.
- 3 대비비와 보통·큰 글자의 AA·AAA 통과 배지를 확인하세요.
- 4 바꾸기 버튼으로 색을 뒤바꾸고 최소 4.5:1이 되도록 조정하세요.
작동 원리
각 색은 먼저 sRGB에서 선형광으로 변환됩니다. 각 채널을 255로 나누고, 0.03928을 넘는 값에는 감마 곡선을 적용합니다. 그다음 상대 휘도는 L = 0.2126·R + 0.7152·G + 0.0722·B로 구하며, 눈이 가장 민감한 초록에 가장 큰 가중치를 둡니다. 두 색의 대비비는 (L1 + 0.05) / (L2 + 0.05)이며, L1은 더 밝은 색, L2는 더 어두운 색입니다. 값은 1:1(같은 색)부터 21:1(순흑 위 순백)까지입니다. WCAG 2.1은 AA 등급에서 보통 글자에 최소 4.5:1, 큰 글자에 3:1을 요구하며, AAA 등급에서는 각각 7:1과 4.5:1로 높아집니다. 큰 글자는 대략 18.66px 굵게 또는 24px 보통 이상을 뜻합니다.
자주 묻는 질문
WCAG를 통과하려면 어느 정도의 대비비가 필요한가요?
WCAG 2.1 AA 등급에서는 보통 글자에 최소 4.5:1, 큰 글자에 3:1이 필요합니다. AAA 등급은 더 엄격하여 보통 글자 7:1, 큰 글자 4.5:1을 요구합니다. 대부분의 사이트는 법적·실용적 기준으로 AA를 목표로 합니다.
무엇이 큰 글자에 해당하나요?
WCAG는 큰 글자를 최소 18.66px(약 14pt) 굵게, 또는 어떤 굵기든 최소 24px(약 18pt)로 정의합니다. 큰 글자는 읽기 쉬우므로 더 낮은 대비 기준(AA 3:1, AAA 4.5:1)이 허용됩니다.
대비비는 어떻게 계산하나요?
각 색의 상대 휘도는 선형화된 빨강·초록·파랑 채널로 계산합니다(L = 0.2126R + 0.7152G + 0.0722B). 대비비는 (밝은 색 + 0.05) / (어두운 색 + 0.05)이며, 흰 바탕의 검정에서 1:1부터 21:1까지의 값을 가집니다.
왜 순흑 위 순백이 21:1인가요?
검정의 상대 휘도는 0, 흰색은 1입니다. (1 + 0.05) / (0 + 0.05)에 대입하면 21이 되며, 이는 이론상 가능한 최대 대비비입니다. 그래서 #000000 위 #ffffff는 모든 WCAG 등급을 통과합니다.
색상 대비가 SEO와 접근성 법규에 영향을 주나요?
그렇습니다. 충분한 대비는 ADA, 508조, 유럽 접근성법 같은 법률이 참조하는 접근성 표준의 일부이며, 좋은 가독성은 사용성 지표도 개선합니다. WCAG AA를 충족하면 법적 위험이 줄고, 저시력이나 색각 이상이 있는 사람도 콘텐츠를 사용할 수 있습니다.
관련 도구와 활용
대비 검사기는 접근 가능한 웹·앱 디자인에 필수입니다. 색상 변환기와 함께 쓰면 팔레트를 조정하면서 HEX·RGB·HSL을 오갈 수 있고, 여백이나 불투명도를 조정할 때는 백분율 계산기가 유용합니다. 디자이너, 프런트엔드 개발자, 콘텐츠 제작자가 버튼·라벨·본문을 모두에게 읽기 쉽게 유지하기 위해 사용합니다.