색상 명도 대비 검사기
누구나 텍스트를 쉽게 읽을 수 있는지 확인하고, 그렇지 않다면 해결 방법을 받아 보세요.
이 기기 안에서 봉인됨
브라우저에서 실행돼요. 아무것도 업로드되지 않아요.
봉인됨
색상
- 명도 대비
- 일반 텍스트
- AA · 4.5:1
- AAA · 7:1
- 큰 텍스트
- AA · 3:1
- AAA · 4.5:1
- 인터페이스 요소와 아이콘
- AA · 3:1
- APCA 대비(참고용)
APCA는 향후 접근성 지침을 위해 검토 중인 새로운 방식이에요. 현재 기준은 여전히 WCAG 2.2예요.
미리보기
큰 텍스트는 이렇게 보여요
일반 텍스트는 저시력인 사람을 포함해 누구나, 햇빛 아래 휴대폰이나 오래된 화면에서도 쉽게 읽을 수 있어야 해요.
작은 글씨와 캡션에는 가장 높은 대비가 필요해요.
제안하는 수정
사용 방법
-
두 색상 입력하기
텍스트 색상과 배경 색상을 입력하거나 고르세요. HEX, RGB, HSL, CSS 이름 등 어떤 형식이든 돼요.
-
결과 확인하기
명도 대비와 함께 일반 텍스트, 큰 텍스트, 인터페이스 요소가 WCAG 2.2 AA와 AAA를 통과하는지 확인하세요.
-
필요하면 수정하기
기준에 미달하면 제안된 색상 중 하나를 사용하세요. 같은 색조로 통과하는 가장 가까운 색이에요.
자주 묻는 질문
명도 대비는 얼마가 필요한가요?
WCAG 2.2 AA 수준은 일반 텍스트에 최소 4.5:1, 큰 텍스트에 3:1을 요구해요. AAA 수준은 7:1과 4.5:1이에요. 아이콘, 입력란 테두리 등 인터페이스 요소는 주변과 최소 3:1의 대비가 필요해요.
큰 텍스트의 기준은 무엇인가요?
18포인트(CSS 24픽셀) 이상, 또는 굵은 글씨라면 14포인트(CSS 약 18.7픽셀) 이상인 텍스트예요. 그보다 작으면 모두 일반 텍스트예요.
4.49:1은 4.5:1과 거의 같은데 왜 미달인가요?
WCAG 기준값은 엄격한 최솟값이라 대비를 반올림하면 안 돼요. 그래서 이 검사기는 대비를 내림해서 보여 줘요. 통과로 보이는 값은 실제로도 통과예요.
APCA란 무엇인가요?
APCA(Accessible Perceptual Contrast Algorithm)는 밝은 바탕에 어두운 글씨인지, 어두운 바탕에 밝은 글씨인지까지 고려하는 새로운 대비 측정 방식이에요. 향후 지침 버전을 위해 검토 중이며, 여기서는 참고용으로만 보여 드려요. 현재 법적 요구 사항과 감사는 WCAG 2 대비를 기준으로 해요.
제안 색상은 어떻게 고르나요?
검사기는 지각 기반 색 공간인 OKLCH에서 색조와 채도는 유지하고 밝기만 바꿔, 기준에 도달하는 가장 가까운 값을 찾아요. 색은 그대로 같은 느낌이고, 조금 더 밝거나 어두워질 뿐이에요.
투명한 색상도 쓸 수 있나요?
텍스트 색상은 돼요. 반투명한 텍스트 색상은 실제로 눈에 보이는 색이 되도록 먼저 배경과 섞어서 계산해요. 배경은 불투명한 색으로 처리해요.