색상 대비·WCAG 검사

색상 대비·WCAG 검사

로컬 처리

글자색과 배경색의 명암비를 계산하고 WCAG AA·AAA 통과 여부와 읽기 좋은 글자색을 알려 줍니다

사용 방법과 처리 기준

글자색과 배경색의 명암비를 계산하고 WCAG AA·AAA 통과 여부와 읽기 좋은 글자색을 알려 줍니다

도구의 계산과 파일 처리는 브라우저 안에서 이루어집니다. 계산기·단위 변환의 공유 링크를 직접 만들면 값이 URL에 포함됩니다. 계정·방문 통계·광고 관련 정보 처리는 개인정보처리방침을 확인하세요.

현재 제한

  • 최대 입력 길이 100,000자

"작업"에서 명암비, WCAG AA, WCAG AAA, 글자색 추천을 고릅니다. 일반 텍스트는 AA 4.5:1·AAA 7:1, 큰 텍스트(18pt 이상 또는 굵은 14pt 이상)는 AA 3:1·AAA 4.5:1이 기준입니다.

WCAG 계산식에 따른 수치이며 접근성 인증을 대신하지 않습니다.

이 도구로 할 수 있는 일

명암비
두 색의 상대 휘도로 1:1~21:1 명암비를 계산합니다.
AA·AAA 판정
일반·큰 텍스트 기준으로 통과·미달을 알려 줍니다.
글자색 추천
배경에 검정·흰색 중 더 잘 보이는 글자색을 고릅니다.

색상 대비·WCAG 검사 사용 방법

  1. 1
    작업 고르기계산·판정·추천 중 고릅니다.
  2. 2
    색 입력글자색(전경)과 배경색을 고릅니다.
  3. 3
    결과 확인명암비와 통과 여부를 봅니다.

활용 예시

흰 배경의 회색 글자
입력: #777777 / #ffffff
결과: 4.48:1
AA 일반 텍스트
입력: #777777 / #ffffff
결과: 미달 (기준 4.5:1)
AAA 일반 텍스트
입력: #333333 / #ffffff
결과: 12.63:1, 통과 (기준 7:1)
남색 배경 글자색
입력: #1e3a8a
결과: 추천 #ffffff (흰색 대비 10.36:1)

이럴 때 유용해요

  • 웹 접근성 점검에서 글자 대비를 확인할 때
  • 브랜드 색 배경 위에 쓸 글자색을 정할 때

자주 묻는 질문 (FAQ)

#777777은 4.48:1인데 AA가 안 되나요?

네. 기준은 4.5:1 이상이라 반올림해서 통과시키지 않습니다. 조금 더 진한 #767676이면 4.54:1로 통과합니다.

이 도구에 바라는 점이 있나요? 제안 및 문의하기 →