색상을 고르기 전에 텍스트 대비를 확인하세요
같은 녹색, 다른 배경, 다른 결과. 직접 시도해 볼 수 있는 네 가지 조합.
팔레트에서 잘 어울리는 녹색도 작은 라벨로는 읽기 어려울 수 있습니다. 디자인 전반에 사용하기 전에 텍스트 색상을 배경색과 함께 확인하세요.
컬러 스튜디오에서 재현할 수 있는 네 가지 조합이 있습니다. 세 번째는 두 번째와 정확히 같은 녹색을 사용하지만 배경만 다릅니다.
배경 변경 하나로 통과가 실패로 바뀔 수 있습니다
| 샘플 | 텍스트 / 배경 | 대비 비율 |
|---|---|---|
| 1 | #8DAA91 / #FFFFFF |
2.53:1 |
| 2 | #647C66 / #FFFFFF |
4.55:1 |
| 3 | #647C66 / #F3E7CE |
3.71:1 |
| 4 | #4B7051 / #F3E7CE |
4.59:1 |
샘플 2와 4는 일반 텍스트에 대한 WCAG AA 대비 기준을 통과합니다. 샘플 1과 3은 통과하지 못합니다. 여기에 표시된 숫자는 표시용으로 반올림된 값이며, 검사는 전체 계산 값을 사용합니다.
흰색을 크림색으로 바꾸자 샘플 2가 실패했습니다. 샘플 4에서 녹색을 어둡게 하여 다시 기준 이상으로 올렸습니다. 예시이므로 이 색상을 그대로 쓸 필요는 없습니다. CSS 다운로드하여 자신의 레이아웃에서 사용해 보세요.
텍스트 크기도 확인하세요
WCAG의 텍스트 대비 지침은 AA 수준에서 일반 텍스트의 최소 비율을 4.5:1로 정합니다. 큰 텍스트는 3:1로 더 낮은 기준을 적용합니다. "큰"은 일반 텍스트의 경우 최소 24 CSS 픽셀, 굵은 텍스트의 경우 약 18.67 CSS 픽셀을 의미합니다.
이 구분은 헤드라인 아래의 작은 라벨에 중요합니다. 색상 조합이 헤드라인에서는 통과해도 라벨에서는 실패할 수 있습니다. 각각 실제 표시 크기로 판단하세요. 소셜 이미지가 피드에서 축소되는 경우도 포함됩니다.
실패 값을 반올림하여 통과로 만들지 마세요. 4.499:1은 여전히 4.5:1 미만입니다.
도구에서 네 가지 조합 시도하기
- 컬러 스튜디오를 열고 대비를 선택하세요.
- 텍스트 색상과 배경 색상에 첫 번째 조합을 입력하세요.
- 일반 텍스트 AA를 확인한 다음 큰 텍스트 AA와 비교하세요.
- 다른 조합으로 반복하세요. 샘플 2와 3의 경우 배경만 변경하여 두 값이 모두 중요한 이유를 확인하세요.
- 선택한 조합을 실제 디자인에 적용하고 최종 크기로 읽어 보세요. 큰 샘플 제목뿐만 아니라 작은 라벨과 링크도 확인하세요.
휴대폰에서는 미리보기와 설정이 차례로 표시됩니다. 검사는 데스크톱과 동일한 값을 사용합니다.
단색은 시작점일 뿐입니다
검사기는 두 개의 불투명한 단색을 비교합니다. 사진이나 그라데이션에서 텍스트 뒤의 모든 픽셀을 검사하지 않으며, 부분적으로 투명한 오버레이도 고려하지 않습니다. 글자 아래의 가장 밝은 부분과 가장 어두운 부분을 확인하거나, 테스트할 수 있는 색상의 단색 패널을 텍스트에 제공하세요.
라이트 테마와 다크 테마를 모두 제공한다면 두 테마에서 디자인을 시도해 보세요. 흰색 카드에서 통과했다고 해서 어두운 메뉴에서 같은 텍스트가 통과한다는 의미는 아닙니다. 얇은 글씨는 비율이 시사하는 것보다 읽기 어려울 수 있으므로, 최소 기준에 딱 맞추기보다는 여유를 두는 것이 좋습니다.
확인한 내용
2026년 10월 5일에 네 가지 조합을 모두 컬러 스튜디오와 동일한 대비 함수로 실행했습니다. 결과 파일에는 정확한 비율과 AA 판정이 기록되어 있습니다. 다운로드 가능한 CSS와 일러스트레이션은 동일한 색상 값을 사용합니다.
이 검사는 텍스트 대비만 확인하며 전체 페이지의 접근성을 평가하지 않습니다. 키보드 접근, 라벨, 읽기 순서 또는 콘텐츠 이해 가능 여부는 평가하지 않습니다.