본문으로 건너뛰기
ToolMug

↑ ↓로 이동, Enter로 열기, Esc로 닫기.

색상 대비 검사기

텍스트 색상과 배경 색상을 입력해 명암 대비 비율을 확인하세요. WCAG AA와 AAA 기준을 일반 텍스트와 큰 텍스트별로 보여 주며 통과할 가까운 색상도 제안해요.

브라우저에서 실행 — 입력한 내용은 업로드되지 않아요

명암 대비

4.54:1

  • AA 일반 텍스트 ≥ 4.5:1통과
  • AA 큰 텍스트 ≥ 3:1통과
  • AAA 일반 텍스트 ≥ 7:1실패
  • AAA 큰 텍스트 ≥ 4.5:1통과

큰 제목 텍스트

16px 일반 본문은 읽기 쉬워야 해요.

작은 글씨, 캡션과 각주

버튼

AAA을 통과하는 가장 가까운 텍스트 색상: #595959 (7.00:1)

사용 방법

  1. 텍스트 색상과 배경 색상을 입력하세요.
  2. 명암 대비 비율과 AA·AAA 결과를 확인하세요.
  3. 필요하면 제안된 색상을 사용해 읽기 쉬운 대비를 만드세요.

옵션 설명

색상 형식
hex, rgb(), hsl(), oklch() 또는 CSS 색상 이름을 입력할 수 있어요.
WCAG 기준
일반 텍스트와 큰 텍스트에 대해 AA와 AAA 통과 여부를 따로 계산해요.
대비 비율
두 색상의 상대적인 밝기 차이를 나타내며 값이 클수록 읽기 쉬운 조합이에요.

대비율 계산 방법

각 색은 sRGB에서 선형 광량으로 변환한 다음 상대 휘도로 바뀌어요.

linear = c ÷ 12.92                      if c ≤ 0.04045
linear = ((c + 0.055) ÷ 1.055) ^ 2.4    otherwise   (c is 0–1)
L = 0.2126 × R + 0.7152 × G + 0.0722 × B
ratio = (L_lighter + 0.05) ÷ (L_darker + 0.05)

눈이 초록에 가장 민감하기 때문에 초록의 비중이 가장 커요. 흰 배경에서의 결과 몇 가지는 다음과 같아요.

텍스트 색상 대비율 결과
#000000 21 : 1 AAA
#0066cc 5.57 : 1 AA 일반 텍스트, AAA 일반 텍스트는 아님
#767676 4.54 : 1 AA 일반 텍스트
#777777 4.48 : 1 일반 텍스트는 AA 실패, 큰 텍스트는 통과

WCAG 정의는 Understanding Success Criterion 1.4.3에서 볼 수 있어요.

자주 묻는 질문

일반 텍스트의 WCAG AA 기준은 무엇인가요?

일반 텍스트는 대비 비율 4.5:1 이상, 큰 텍스트는 3:1 이상이 일반적인 AA 기준이에요.

AAA는 무엇이 다른가요?

AAA는 일반 텍스트 7:1, 큰 텍스트 4.5:1을 요구해 AA보다 엄격해요.

색상 이름도 입력할 수 있나요?

네. hex와 rgb(), hsl(), oklch()뿐 아니라 브라우저가 아는 CSS 색상 이름도 사용할 수 있어요.

개인정보 보호

이 도구는 전적으로 브라우저에서 실행돼요. 파일과 텍스트는 기기에서 처리되며 서버로 업로드되지 않아요.

관련 도구