실용 가이드 · 웹과 코드
명암비를 반올림해 통과시키지 않는 확인 방법
색이 달라 보여도 글자를 읽기 어려운 조합일 수 있습니다. 실제 글자색과 배경색을 측정하고 크기와 화면 상태까지 확인하세요.
1. 실제 표시되는 두 색 확인
글자와 바로 뒤 배경색을 확인합니다. 같은 글자가 여러 표면에 있다면 대표 팔레트만으로 판단할 수 없습니다.
도구는 불투명한 두 16진수 색을 비교합니다. 전체 페이지를 검사하거나 투명도, 이미지, 그라데이션의 합성을 자동 재현하지 않습니다.
2. 글자에 맞는 기준 선택
WCAG AA 일반 글자는 4.5:1 이상, 큰 글자는 3:1 이상이 기준입니다. 제목인지보다 크기와 두께를 포함한 정의를 확인하세요.
한글을 라틴 문자 포인트 기준만으로 기계적으로 분류하지 마세요. 큰 글자 조건이 분명하지 않다면 더 엄격한 4.5:1로 확인하는 편이 판단에 도움이 됩니다.
색상 대비 검사3. 비율과 판정을 함께 읽기
두 색을 입력하고 해당 글자 범주의 판정을 읽습니다. 소수 두 자리 표시라도 기준 근처에는 반올림 전 차이가 남습니다.
부족한 값을 올려서 통과로 만들지 마세요. 도구는 표시용 반올림 전 값으로 판정하므로 숫자와 결과 문구를 함께 확인합니다.
4. 예시: 가까운 두 회색
흰 배경의 #777777은 약 4.48:1로 일반 글자 AA를 충족하지 않습니다. #767676은 약 4.54:1로 그 기준을 충족합니다. 시각적 차이는 작아도 조건은 정확합니다.
같은 흰색 위의 두 회색
- 입력 예시
- 배경 #FFFFFF, 글자 #777777 또는 #767676
- 결과
- 약 4.48:1은 일반 AA 미충족, 약 4.54:1은 충족
색상 견본은 설명용입니다. 색, 비율, 결과를 문장으로도 표시해 외형에만 의미를 맡기지 않습니다.
-
#777777과 #FFFFFF
약 4.48:1 — 일반 글자 AA에 부족.
-
#767676과 #FFFFFF
약 4.54:1 — 해당 기준 충족.
5. 테마와 상태별로 시험
본문, 링크, 보조 문구, 버튼 글자를 실제 배경에서 시험합니다. 어두운 테마와 관련 조작 상태도 확인하며 단순 색 반전으로 충분하다고 보지 마세요.
배경이 바뀌면 불리한 조합도 포함해 확인합니다. 이미지의 한 지점에서 뽑은 색으로 전체 표면을 대표할 수 없습니다.
| 조건 | 최소 비율 |
|---|---|
| AA 일반 | 4.5:1 |
| AA 큰 글자 | 3:1 |
| AAA 일반 | 7:1 |
6. 비율 외의 가독성 검토
명암비 충족만으로 접근성 전체를 증명하지 않습니다. 글자 크기, 굵기, 간격, 의미와 색에만 의존하는지도 확인하세요.
기준에 겨우 걸친다면 여유를 더 확보하는 방법을 고려합니다. 색으로 결과를 나타낼 때는 글이나 모양으로도 같은 정보를 전달합니다.
실제 사례를 측정한 값이 아닌 예제 입력값입니다. 실제 도구와 같은 계산 엔진을 사용합니다. 결과를 가이드의 계산 과정과 비교한 뒤 확인 항목을 체크하세요.
출처와 확인 방법
자주 묻는 질문
통과하면 WCAG 적합을 인증하나요?
아니요. 입력한 색과 조건의 해당 대비를 검사한 결과입니다. 다른 요건은 따로 확인해야 합니다.
반투명 레이어 색을 넣어도 되나요?
배경에 합성한 뒤의 실제 색이 필요합니다. 불투명한 두 색 검사는 전체 페이지 합성을 자동 계산하지 않습니다.