명도 대비 검사기 (WCAG)

글자색과 배경색의 명도 대비를 계산해, 웹 접근성 기준(WCAG 2.1)으로 본문에 쓸 수 있는지(AA 4.5:1), 넉넉한지(AAA 7:1), 큰 글씨에만 되는지(3:1) 판정해요. 두 색으로 칠한 견본 문장으로 바로 확인해요.

색 변환

HEX
—
RGB
—
HSL
—

명도 대비 (WCAG)

이 조합에서 글자가 이렇게 보여요

—

색 조합 고르기

이 도구에 대해

이렇게 써요

  1. 1 글자색과 배경색 칸에 #HEX나 rgb() 값을 넣어요.
  2. 2 대비 비율이 바로 나오고, 아래에 AA·AAA 판정이 붙어요.
  3. 3 견본 문장을 보며 기준을 넘을 때까지 색을 조금씩 바꿔 봐요.

알아 두세요

  • 페이지 점검은 붙여 넣은 HTML 만 읽어요 — 주소는 주소 점검기로
  • YAML 은 널리 쓰이는 문법만 읽어요
  • JWT 는 내용만 펴 보고 서명은 확인하지 않아요

자주 묻는 질문

큰 글씨는 기준이 다른가요?

달라요. 18pt(약 24px) 이상이거나 14pt 이상의 굵은 글씨는 3:1이면 AA예요. 본문 크기는 4.5:1이 필요해요.

버튼이나 아이콘도 이 기준인가요?

아이콘·입력칸 테두리 같은 그래픽 요소는 배경과 3:1 이상이 기준이에요.

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

두 색의 상대 휘도를 구해 (밝은 쪽 + 0.05) ÷ (어두운 쪽 + 0.05)로 계산해요. WCAG가 정한 식 그대로예요.

Esc