6XC

WCAG 명암 대비 검사기

텍스트와 배경 색상의 명암비를 WCAG AA·AAA 기준으로 확인 — 일반 및 큰 텍스트 크기의 실시간 미리보기 제공.

조회수 800회

명암비—
AA 일반 (≥4.5)—
AA 큰 텍스트 (≥3)—
AAA 일반 (≥7)—
AAA 큰 텍스트 (≥4.5)—

빠른 갈색 여우가 게으른 개를 뛰어넘는다

큰 텍스트 예시 24px

명암비가 의미하는 것

명암비는 두 색상의 상대 휘도를 비교한 값으로, 1:1(동일)부터 21:1(흰 바탕에 검정)까지 있습니다. WCAG는 일반 텍스트에 4.5:1(AA), 큰 텍스트(24px 이상 또는 굵게 18.7px 이상)에 3:1을 요구합니다. 더 엄격한 AAA 등급은 각각 7:1과 4.5:1을 요구합니다. UI 구성 요소와 그래픽은 인접 색상과 3:1이 필요합니다.

계산 과정은 각 sRGB 채널을 선형화하고 가중치를 적용한 뒤(L = 0.2126R + 0.7152G + 0.0722B), (L₁+0.05)/(L₂+0.05)를 구합니다. 직관은 여기서 자주 빗나갑니다 — 흰 바탕의 중간 회색 #777은 많은 사람에게 충분히 읽기 편해 보이지만 실제로는 4.48:1로 AA 기준에 살짝 못 미칩니다. 이 여유분은 저시력 사용자, 야외 햇빛, 저가형 화면을 위한 것입니다.

자주 묻는 질문

텍스트와 배경을 서로 바꾸면 명암비도 바뀌나요?

아닙니다 — 공식은 항상 더 밝은 색을 분자에 놓기 때문에 명암비는 대칭입니다. 가독성은 주관적으로 다르게 느껴질 수 있지만(어두운 배경 위 밝은 텍스트의 번짐 효과 등), WCAG 점수는 동일합니다.

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

24px(18pt) 이상의 일반 굵기이거나, 굵게 약 18.7px(14pt) 이상입니다. 큰 텍스트는 글자가 커서 대비가 낮아도 읽기 쉽기 때문에 AA 기준에서 3:1만 요구됩니다.

브랜드 컬러가 기준을 통과하지 못하면 어떻게 하나요?

장식용으로는 그대로 사용하고, 텍스트 용도로는 기준을 통과할 때까지 더 어둡게 또는 밝게 조정하세요. 톤 단계별 팔레트를 만들어두면 도움이 됩니다. 플레이스홀더 텍스트와 비활성 상태는 기준 대상에서 제외되지만, 그래도 적당한 수준을 유지하는 것이 좋습니다.

비슷한 도구

JSON 포맷터 무료 온라인 JSON 유효성 검사기, 정렬(예쁘게 출력) 및 압축(minify) 도구입니다. 사용하기 내 IP 주소 확인 공인 IPv4/IPv6 주소, 인터넷 제공업체, 대략적인 위치, 브라우저 정보를 즉시 확인하세요 — 클릭 한 번으로 복사할 수 있습니다. 사용하기 색상 변환기 HEX, RGB, HSL 색상 코드를 즉시 상호 변환합니다. 색상 선택기 포함, 무료. 변환하기 진법 변환기 숫자를 2진수, 8진수, 10진수, 16진수, 그리고 2부터 36까지의 임의의 진법으로 변환합니다 — 아무리 큰 값이라도 정확합니다. 변환하기