색상 대비 검사기(WCAG)
두 색상을 16진수(#1f2937) 또는 rgb(31, 41, 55) 형식으로 입력하세요.
결과
4.54:1대비율
- AA, 일반 텍스트(4.5:1)
- ✓
- AA, 큰 텍스트(3:1)
- ✓
- AAA, 일반 텍스트(7:1)
- ✕
- AAA, 큰 텍스트(4.5:1)
- ✓
- 읽은 색상
- #767676 / #ffffff
입력값
- 텍스트 색상
- #767676
- 배경 색상
- #ffffff
계산 방법
각 색상의 상대 휘도는 선형화된 sRGB 채널로 계산합니다.
결과
대비율
- AA, 일반 텍스트(4.5:1)
- ✓
- AA, 큰 텍스트(3:1)
- ✓
- AAA, 일반 텍스트(7:1)
- ✕
계산 방법
- 각 색상의 상대 휘도는 선형화된 sRGB 채널로 계산합니다.
- 비율 = (더 밝은 L + 0.05) ÷ (더 어두운 L + 0.05), 범위는 1:1~21:1입니다.
- 반올림하지 않은 비율을 WCAG 2 기준과 비교합니다.
예시
흰색 배경의 #767676은 4.54:1로 일반 텍스트 AA는 충족하지만 AAA는 충족하지 않습니다.
참고 사항
- 큰 텍스트는 최소 24px 또는 굵은 글씨 기준 18.66px입니다.
- 투명도와 그라데이션은 계산에 포함되지 않습니다.
사용 시기
- 웹페이지의 텍스트와 배경 색상 간 가독성을 확인하세요.
- 색상 조합이 WCAG AA 또는 AAA 대비 목표를 충족하는지 점검하세요.
자주 묻는 질문
일반 텍스트의 WCAG AA 기준은 얼마인가요?
WCAG 2는 일반 텍스트에 최소 4.5:1의 대비율을 요구합니다.
WCAG에서 큰 텍스트는 무엇인가요?
24 CSS px 이상이거나 굵은 글씨 기준 약 18.66 CSS px 이상인 텍스트입니다.
투명도나 그라데이션도 검사하나요?
아니요. 입력한 단색만 비교하며 투명도와 그라데이션은 계산하지 않습니다.