색상 대비 검사기 (WCAG)
텍스트/배경 색의 WCAG AA·AAA 대비를 실시간 비율과 합격/불합격 뱃지, 미리보기로 확인합니다. 브라우저 처리.
🔒 브라우저에서 검사합니다. 큰 텍스트 = 18pt 이상(또는 굵은 14pt 이상). 기준: AA 4.5 / AAA 7(일반), AA 3 / AAA 4.5(큰 텍스트).
접근성을 위한 색상 대비 검사
텍스트 색과 배경 색을 고르면 정확한 WCAG 대비 비율, 일반/큰 텍스트 기준 AA·AAA 합격 여부, 실시간 미리보기를 볼 수 있습니다. 공식 WCAG 2.1 상대 휘도 공식으로 브라우저에서 계산합니다.
기준의 의미
WCAG는 일반 텍스트에 최소 4.5:1(AA), 7:1(AAA)을 요구합니다. 큰 텍스트(18pt 이상, 또는 굵은 14pt 이상)는 3:1(AA) 또는 4.5:1(AAA)이면 됩니다.
4.5는 어디서 나온 숫자인가
비율은 상대 휘도로 계산합니다. 각 채널을 선형화한 뒤 빨강 0.2126·초록 0.7152·파랑 0.0722로 가중합니다. 눈이 파랑보다 초록에 훨씬 민감하기 때문입니다. 나누기 전에 양쪽 휘도에 0.05를 더하는데, 검정을 표시할 때조차 실제 화면이 반사하는 빛을 모형화한 것이고, 그래서 눈금이 무한대가 아니라 21:1에서 끝납니다. WCAG는 여기에 기준 넷을 둡니다. AA 일반 텍스트 4.5, AA 큰 텍스트 3.0, AAA 일반 텍스트 7.0, AAA 큰 텍스트 4.5입니다. "큰 텍스트"는 18pt, 굵은 글씨면 14pt로 각각 약 24px·18.66px입니다.
비율이 못 보는 것
색 두 개에 대한 공식일 뿐 나머지 디자인은 모릅니다. 같은 비율이어도 가는 글꼴이 굵은 글꼴보다 읽기 어려운데, 굵기 규정이 그에 대한 유일한 배려입니다. 사진 위의 글자는 픽셀마다 비율이 달라 한 지점이 통과했다는 사실은 별 의미가 없습니다. 반투명한 색은 뒤에 있는 것과 합성한 뒤라야 여기서 의미를 가지는데, 이 목록에서 유일하게 페이지가 대신 해 주는 항목입니다. 호버·포커스·비활성 상태는 각각 따로 확인해야 하고, 비활성 컨트롤이 기준에 못 미치는 것은 흔하고 정당한 예외입니다. 4.5를 넘기는 것은 바닥이지 목표가 아닙니다. 편안하고 잘 읽히는 글자는 대개 그보다 훨씬 위에 있습니다.
자주 묻는 질문
큰 텍스트 기준은 무엇인가요?
18pt, 굵은 글씨라면 14pt입니다. 대략 24px과 18.66px입니다. 그 아래면 AA 기준이 4.5, 그 위면 3.0입니다.
어떤 공식을 쓰나요?
브라우저 개발자 도구와 접근성 검사기가 쓰는 것과 같은 WCAG 2.1 상대 휘도 공식입니다.
투명도도 처리하나요?
네. 글자색에 알파(#1f2937cc 같은 8자리 hex, rgba() 또는 hsla())가 있으면 배경 위에 먼저 합성한 뒤 그 색으로 대비를 계산하므로 실제로 보이는 값이 나옵니다. 배경이 반투명하면 흰 페이지 위에 먼저 합성하고, 대비 계산과 미리보기 모두 그렇게 칠해진 색을 씁니다.
왜 하필 4.5인가요?
대비 감도 모형에서 나온 값입니다. 시력 20/40인 사람이 일반 텍스트를 읽는 데 필요한 정도가, 20/20인 사람이 3:1에서 읽는 것과 대략 맞먹습니다. 큰 텍스트 기준이 낮은 이유는 크기가 같은 일을 일부 해 주기 때문입니다.
이미지 위에 글자가 있으면 무엇을 재나요?
평균이 아니라 최악의 경우를 재세요. 밝은 글자 아래에서 가장 밝은 부분, 어두운 글자 아래에서 가장 어두운 부분을 찾아 확인합니다. 더 나은 방법은 글자 뒤에 불투명하거나 반투명한 층을 깔아 확인할 비율을 하나로 만드는 것입니다.