모든 사용자가 텍스트를 읽을 수 있도록 하세요
흰색 배경의 연한 회색 텍스트, 파스텔톤 버튼의 흰색 텍스트, 어두운 배경의 파란색 링크는 디자인 파일에서는 세련되어 보일지 몰라도 실제 사용자는 읽기 어려울 수 있습니다. 이 색상 대비 검사기는 텍스트와 배경색 간의 명도 대비를 측정하여 웹 콘텐츠 접근성 지침(WCAG)의 AA 및 AAA 등급을 충족하는지 즉시 알려줍니다. 기준을 충족하지 못할 경우, 이를 만족하는 가장 유사한 색상을 추천해 줍니다.
주요 기능
- 1:1부터 21:1까지의 명도 대비 계산.
- 일반 텍스트, 큰 텍스트 및 UI 컴포넌트에 대한 WCAG 2 AA 및 AAA 결과 제공.
- 다양한 색상 형식 지원: HEX, RGB, HSL 또는 CSS 색상 이름.
- 제목, 본문 및 작은 텍스트가 포함된 실시간 미리보기.
- 기존 색조를 유지하면서 접근성을 충족하는 색상 추천.
- 어두운 배경 버전을 확인할 수 있는 색상 반전 버튼.
WCAG 요구 사항 한눈에 보기
| 콘텐츠 | AA | AAA |
|---|---|---|
| 일반 텍스트 | 4.5:1 | 7:1 |
| 큰 텍스트 (≥ 24 px, 또는 ≥ 19 px bold) | 3:1 | 4.5:1 |
| UI 컴포넌트 및 그래픽 | 3:1 | — |
| 로고 및 장식용 텍스트 | 요구 사항 없음 | 요구 사항 없음 |
자주 쓰이는 색상 조합
| 텍스트 | 배경 | 명도 대비 | AA 일반 텍스트 |
|---|---|---|---|
| #000000 | #FFFFFF | 21:1 | 통과 |
| #767676 | #FFFFFF | 4.54:1 | 통과 (기준을 충족하는 가장 밝은 회색) |
| #999999 | #FFFFFF | 2.85:1 | 실패 |
| #FFFFFF | #0EA5E9 | 2.77:1 | 실패 |
| #FFFFFF | #0369A1 | 5.93:1 | 통과 |
관련 도구
색상 변환기로 색상 형식을 변환하고, 색상 팔레트 생성기로 전체 팔레트를 만들거나, 이미지 색상 추출기를 사용해 스크린샷에서 정확한 색상을 추출해 보세요.