명도 대비 검사
애초에 읽히기는 하는가.
예제는 입력과 설정을 일시적으로 바꿉니다. 이전 작업을 복원할 수 있습니다.
0자
출력
위에 붙여넣거나 입력하면 여기에 결과가 표시됩니다.
파일은 내 기기 밖으로 나가지 않습니다
이 도구는 브라우저 안에서만 작동합니다. 붙여넣은 내용은 기기에서 처리되고 서버로 전송되지 않으므로 토큰, 키, 공개 전 문서도 안심하고 사용할 수 있습니다.
사용 예시
사용 예제 — 명도 대비 검사
입력 줄을 순서대로 입력하고 아래 설정을 사용하세요. 결과를 출력 줄과 비교하세요.
| 항목 | 값 |
|---|---|
| 입력 1 | #000000 |
| 색을 하나만 적었을 때의 배경색 | #ffffff |
| 출력 1 | #000000 / 배경 #ffffff |
| 출력 2 | 명암비 21.00 : 1 |
| 출력 3 | 본문 AA 통과 (기준 4.5) |
| 출력 4 | 본문 AAA 통과 (기준 7) |
| 출력 5 | 큰 글자 AA 통과 (굵게 18.66px 또는 24px 이상, 기준 3) |
| 출력 6 | 큰 글자 AAA 통과 (기준 4.5) |
| 출력 7 | 테두리·아이콘 통과 (기준 3) |
흰색 배경의 검정은 명암비가 21:1이며 도구의 AA 및 AAA 텍스트 검사를 통과합니다.
사용 방법
- 한 줄에 한 쌍씩 #333 on #fff 처럼 입력합니다. 쉼표든 슬래시든 공백이든 됩니다.
- 색을 하나만 적으면 위에서 지정한 배경색과 비교합니다.
- 먼저 비율을 보세요. 나머지는 모두 거기서 나옵니다.
- 본문이라면 넘어야 할 숫자는 4.5 입니다.
자주 묻는 질문
- AA 와 AAA 는 구체적으로 무엇을 요구하나요?
- AA 는 본문에 4.5대1, 큰 글자에 3대1을 요구합니다. 큰 글자란 24px, 또는 굵은 18.66px 이상입니다. AAA 는 각각 7대1과 4.5대1. 테두리·아이콘·입력란의 경계는 3대1입니다.
- 이 회색이 떨어지는 이유는요?
- 흰 바탕의 #777 은 4.48대1 로 AA 에 0.02 모자랍니다. 흔한 아슬아슬한 실패이고 사람들이 굳이 확인하는 이유이기도 합니다. 고른 본인에게는 멀쩡해 보이고 상당수의 사람에게는 실제로 읽기 어렵습니다. #757575 면 통과합니다.
- 어느 색을 먼저 쓰는지가 영향을 주나요?
- 불투명한 색이면 영향이 없습니다. 비율은 대칭이라 글자색과 배경색을 바꿔 써도 같은 숫자가 나옵니다. 반투명한 색(#33333380, rgba(…))이 있으면 달라집니다. 먼저 쓴 색을 뒤의 색 위에 겹치고, 반투명 배경색은 흰 페이지 위에 겹쳐 판정하므로 글자색을 먼저 쓰세요.
- 비율이 통과하면 접근성이 확보된 건가요?
- 아닙니다. 대비는 여러 요건 중 하나일 뿐이고, 포커스 표시, 누를 수 있는 크기, 움직임, 색만으로 뜻을 전하고 있지는 않은지에 대해서는 아무 말도 하지 않습니다. 최저선이지 합격 판정이 아닙니다.
- 입력한 내용이 어디로 전송되나요?
- 아니요. 브라우저 안에서 동작하므로 붙여넣은 내용은 내 컴퓨터를 떠나지 않습니다.