1:1 to 21:1 · AA · AAA
명도 대비 검사기
흰색 위의 검정은 WCAG 대비율이 가능한 최댓값인 21:1이고, #0060fd 위의 흰색은 5.13:1입니다. 글자색과 배경색을 입력해 직접 확인하세요.
- #000000 on #ffffff = 21.00:1
- #ffffff on #0060fd = 5.13:1
- #767676 on #ffffff = 4.54:1
- #777777 on #ffffff = 4.47:1
입력하는 대로 대비율과 다섯 가지 검사가 갱신됩니다. 대비율은 소수 둘째 자리에서 버림하며 올림하지 않으므로 4.499는 4.49:1로 표시되고 4.5:1 검사를 통과하지 못합니다.
Scanned by 
NortonTM Safe Web
한눈에 보기
- 가격
- 비용 없음
- 계정
- 필요 없음
- 업로드
- 해당 없음 — 색상을 입력할 뿐이며 어디로도 전송되지 않습니다
- 공식
- (밝은 쪽 휘도 + 0.05) ÷ (어두운 쪽 휘도 + 0.05)
- 기준값
- AA: 일반 4.5:1, 큰 텍스트 3:1. AAA: 일반 7:1, 큰 텍스트 4.5:1. 인터페이스 요소 3:1
- 표준
- WCAG 2.2의 상대 휘도와 대비율 정의
잘 알려진 색상 조합의 대비율
이 행들은 검사기와 같은 코드로 만들었습니다. 체크 표시는 그 조합이 요건을 충족한다는 뜻이고, 가위표는 충족하지 못한다는 뜻입니다.
| 글자색 | 배경 | 대비율 | AA 일반 | AA 큰 텍스트 | AAA 일반 | AAA 큰 텍스트 | 인터페이스 요소 |
|---|---|---|---|---|---|---|---|
| #000000 | #ffffff | 21.00:1 | ✓ | ✓ | ✓ | ✓ | ✓ |
| #ffffff | #0060fd | 5.13:1 | ✓ | ✓ | ✗ | ✓ | ✓ |
| #767676 | #ffffff | 4.54:1 | ✓ | ✓ | ✗ | ✓ | ✓ |
| #777777 | #ffffff | 4.47:1 | ✗ | ✓ | ✗ | ✗ | ✓ |
| #0060fd | #ffffff | 5.13:1 | ✓ | ✓ | ✗ | ✓ | ✓ |
| #ffffff | #ffffff | 1.00:1 | ✗ | ✗ | ✗ | ✗ | ✗ |
| 검사 | 최소 대비율 |
|---|---|
| AA, 일반 텍스트 | 4.5:1 |
| AA, 큰 텍스트 | 3:1 |
| AAA, 일반 텍스트 | 7:1 |
| AAA, 큰 텍스트 | 4.5:1 |
| AA, 인터페이스 요소와 그래픽 | 3:1 |
색상 조합을 검사하는 방법
두 색상 입력
글자색과 배경색을 CSS 표기로 입력하거나 색상 선택기를 사용하세요. 교환 버튼으로 둘을 바꿀 수 있어 어두운 배경 위의 밝은 글자를 확인할 때 편리합니다.
대비율 읽기
대비율은 1:1(같은 색)부터 21:1(흰색 위의 검정)까지입니다. 입력 필드 아래 예시는 그 조합을 16 px와 24 px로 보여 주므로 눈으로 직접 판단할 수 있습니다.
다섯 가지 검사 보기
각 타일은 WCAG 요건 하나에 대해 통과 또는 실패를 알려 줍니다. 일반 텍스트의 AA와 AAA, 큰 텍스트의 AA와 AAA, 인터페이스 요소의 AA입니다. 일반 텍스트가 AA를 통과하지 못하면 통과하는 가장 가까운 글자색을 제안합니다.
대비율은 어떻게 계산하나요
WCAG는 색의 밝기를 0(검정)에서 1(흰색)로 나타내는 상대 휘도로 대비를 측정합니다. 빨강, 초록, 파랑 채널을 각각 255로 나눕니다. 값이 0.04045 이하이면 12.92로 나누고, 그보다 크면 (값 + 0.055)를 1.055로 나눈 뒤 2.4제곱합니다. 휘도는 0.2126 × 빨강 + 0.7152 × 초록 + 0.0722 × 파랑이며, 이는 눈이 각 색에 반응하는 정도를 반영합니다. 대비율은 밝은 쪽 휘도에 0.05를 더한 값을 어두운 쪽 휘도에 0.05를 더한 값으로 나눈 것입니다.
WCAG 2의 AA 수준은 일반 텍스트에 4.5:1 이상, 큰 텍스트에 3:1 이상을 요구하고, AAA 수준은 각각 7:1과 4.5:1을 요구합니다. 큰 텍스트는 18포인트(24 CSS 픽셀) 이상이거나, 굵은 글씨라면 14포인트(약 18.66픽셀) 이상입니다. 성공 기준 1.4.11은 필드 테두리나 차트 선처럼 사용자가 봐야 하는 인터페이스 요소와 그래픽에 3:1을 요구합니다. 대비율은 반올림하지 않고 각 기준값과 비교합니다. 색에 투명도가 있으면 측정 전에 투명한 배경은 흰색 위에, 투명한 글자색은 배경 위에 겹쳐 계산합니다. 이 페이지는 WCAG 2.x만 구현하며, 이후 버전의 지침에서 논의되는 APCA는 계산하지 않습니다.
명도 대비 질문
WCAG는 텍스트에 어느 정도의 대비율을 요구하나요?
AA 수준에서 일반 텍스트는 4.5:1 이상, 큰 텍스트는 3:1 이상이 필요합니다. AAA 수준에서는 일반 텍스트 7:1, 큰 텍스트 4.5:1입니다. 대비율은 글자색과 바로 뒤에 있는 색 사이에서 측정합니다.
큰 텍스트는 어떤 기준인가요?
WCAG는 큰 텍스트를 18포인트(24 CSS 픽셀) 이상, 또는 굵은 글씨의 14포인트(약 18.66 CSS 픽셀) 이상으로 정의합니다. 그보다 작은 텍스트는 일반 텍스트로 보며 더 높은 대비율이 필요합니다.
흰색 위에서 AA를 통과하는 가장 밝은 회색은 무엇인가요?
흰색 위의 #767676은 대비율 4.54:1로 일반 텍스트의 4.5:1 검사를 통과합니다. 그보다 한 단계 밝은 회색 #777777은 4.47:1로 통과하지 못합니다. 7:1(AAA)의 경우 가장 밝은 회색은 7.00:1인 #595959입니다.
4.49는 4.5처럼 보이는데 왜 실패하나요?
검사는 정확한 대비율을 기준값과 비교합니다. 4.499는 4.5보다 작으므로 실패하며, 페이지는 올림하지 않고 4.49:1로 표시합니다. 흰색 위의 순수한 빨강이 실제 예입니다. 3.99:1은 기준에 가까워도 일반 텍스트의 4.5:1 검사에 실패합니다.
아이콘, 테두리, 입력 필드에는 어느 정도의 대비가 필요한가요?
WCAG 2.1에서 추가된 성공 기준 1.4.11 비텍스트 대비는 필드 테두리, 포커스 링, 차트 선처럼 사용자가 봐야 하는 인터페이스 요소나 그래픽과 그 옆 색 사이에 3:1 이상을 요구합니다. 비활성화된 컨트롤과 순수한 장식 그래픽은 제외됩니다.
대비율을 통과하면 접근성이 확보된 페이지인가요?
아니요. 대비는 여러 요건 중 하나입니다. 글꼴 크기와 굵기, 줄 간격, 색만으로 의미를 전달하는지, 포커스 표시, 이미지와 그라데이션 위의 텍스트, 색각이 다른 사람들이 페이지를 보는 방식도 모두 중요합니다. 이 결과는 참고 자료 중 하나로 쓰고, 실제 콘텐츠로 페이지를 테스트하세요.