색상 대비 검사기
글자 색과 배경 색을 입력하면 WCAG 2.2 대비 비율, 일반 텍스트와 큰 텍스트 및 UI 그래픽에 대한 AA, AAA 통과 여부, 그리고 실제로 통과하는 가장 가까운 색을 보여 줍니다. 슬라이드, 포스터, 그림, 웹 페이지에 쓰세요. 브라우저에서 실행되며 아무것도 업로드되지 않습니다. 무료이며 회원가입이 필요 없습니다.
대비 결과
4.47:1
대비 비율
일반 텍스트 — 이 문장으로 가독성을 확인하세요 (16px).
큰 텍스트, 24px (18pt)
굵은 큰 텍스트, 18.7px (14pt)
버튼 또는 아이콘
비율은 소수점 둘째 자리까지 내림하여 표시합니다. WCAG는 아슬아슬한 미달을 올려 주지 않으므로, 4.499는 4.5에 실패합니다.
| 요구 사항 | 필요 비율 | 결과 |
|---|---|---|
| 일반 텍스트, AA (1.4.3) | 4.5:1 | 실패 |
| 일반 텍스트, AAA (1.4.6) | 7:1 | 실패 |
| 큰 텍스트, AA (1.4.3) | 3:1 | 통과 |
| 큰 텍스트, AAA (1.4.6) | 4.5:1 | 실패 |
| UI 구성 요소와 그래픽, AA (1.4.11) | 3:1 | 통과 |
큰 텍스트는 최소 18pt(24px) 일반 굵기, 또는 14pt(약 18.7px) 굵은 글씨입니다. 슬라이드와 포스터에서는 본문이 대개 큰 텍스트이고, 각주와 캡션은 대개 그렇지 않습니다.
통과하는 제안 색
글자 색 바꾸기
배경 색 바꾸기
각 제안은 색상과 채도를 유지하고, 통과하는 가장 작은 단계만큼만 명도를 바꿉니다.
색상 대비 검사기 사용 방법
- 1. 두 색을 입력하세요. 각 색을 HEX(
#777777),rgb(),hsl()또는 CSS 이름으로 입력하거나 선택기를 쓰세요. 바꾸기는 두 색을 맞바꾸며, 밝은 배경의 어두운 글자와 어두운 배경의 밝은 글자를 번갈아 확인할 때 편합니다. - 2. 비율과 표를 읽으세요. 비율은 1:1(같은 색)에서 21:1(흰 바탕의 검정)까지입니다. 표는 이 비율을 WCAG 각 기준과 비교하고, 색으로만이 아니라 글자로 통과 또는 실패를 알려 줍니다.
- 3. 크기를 정하세요. 큰 텍스트는 기준이 더 낮습니다. 미리 보기는 일반 텍스트, 큰 텍스트, 굵은 큰 텍스트, 테두리가 있는 컨트롤을 보여 주므로 자신의 경우를 판단할 수 있습니다.
- 4. 실패한 쌍을 고치세요. 목표 수준을 고르고, 제안된 글자 색 또는 배경 색을 쓰세요. 도구는 색상과 채도는 유지하고, 통과하는 가장 작은 단계만큼만 명도를 바꿉니다.
WCAG 2.2가 요구하는 것
웹 콘텐츠 접근성 지침(WCAG) 2.2는 세 가지 성공 기준에서 최소 대비 비율을 정합니다. 비율은 (L₁ + 0.05) ÷ (L₂ + 0.05)이며, L₁은 더 밝은 색의, L₂는 더 어두운 색의 상대 휘도입니다.
| 기준 | 수준 | 일반 텍스트 | 큰 텍스트 |
|---|---|---|---|
| 1.4.3 명암 대비 (최소) | AA | 4.5:1 | 3:1 |
| 1.4.6 명암 대비 (향상) | AAA | 7:1 | 4.5:1 |
| 1.4.11 텍스트가 아닌 콘텐츠의 명암 대비 | AA | UI 구성 요소와 의미 있는 그래픽은 3:1 | — |
큰 텍스트는 최소 18pt, 또는 14pt 굵은 글씨입니다. 96dpi 화면에서 각각 24px과 약 18.7px에 해당합니다. 로고, 순수한 장식 텍스트, 비활성 컨트롤은 1.4.3에서 면제됩니다. 1.4.11의 3:1 규칙은 컨트롤을 찾는 데 필요한 부분(버튼의 테두리, 체크박스의 윤곽선), 포커스 같은 상태, 그리고 차트의 선처럼 독자가 내용을 이해하는 데 필요한 그래픽에 적용됩니다.
비율 계산 방식
각 sRGB 채널을 0–1로 맞춘 뒤 선형화합니다. c ≤ 0.04045이면 c ÷ 12.92이고, 그렇지 않으면 ((c + 0.055) ÷ 1.055)2.4입니다. 상대 휘도는 0.2126 R + 0.7152 G + 0.0722 B입니다. 눈은 초록에 가장 민감하므로 초록의 비중이 가장 큽니다.
0.03928 오타
WCAG 2.0과 2.1은 임계값을 0.03928로 적었는데, 이는 sRGB 표준의 초기 초안에서 남은 값입니다. 표준은 0.04045를 사용합니다. WCAG 2.2 용어집은 이를 0.04045로 바로잡았고, 차이가 실제 결과를 바꾸지 않는다고 적었습니다. 이 검사기는 0.04045를 사용합니다.
미세하게 실패하는 쌍
흰 바탕의 #777777: 4.48:1 — 일반 텍스트 AA에 실패합니다(4.5:1 필요). 큰 텍스트는 통과합니다.
흰 바탕의 #767676: 4.54:1 — 흰 바탕에서 AA를 통과하는 가장 밝은 회색입니다.
흰 바탕의 #0000ff: 8.59:1 — AAA를 통과합니다. 흰 바탕의 #ff0000: 4.0:1 — 일반 텍스트 AA에 실패합니다.
WCAG는 반올림하지 않습니다. 4.4999는 4.5에 실패합니다. 그래서 이 검사기는 비율을 소수점 둘째 자리까지 내림하여 보여 주므로, 아슬아슬한 미달이 통과로 표시되는 일은 없습니다.
슬라이드, 포스터, 그림 점검하기
- 슬라이드와 포스터는 웹 페이지가 아니지만, WCAG의 비율은 이들에게도 인정된 기준입니다. 슬라이드의 본문은 대개 큽니다(24px은 18pt). 캡션, 각주, 축 레이블은 큰 텍스트가 아니므로 일반 텍스트로 점검하세요.
- 투사를 위해 기준보다 높게 잡으세요. 밝은 방의 프로젝터는 모든 사람에게 대비를 떨어뜨립니다. 밝은 방에서 보여 줄 슬라이드의 텍스트는 AAA(7:1)를 고르세요.
- 사진이나 그라데이션 위의 텍스트에는 하나의 배경이 없습니다. 텍스트 뒤의 가장 밝은 영역과 가장 어두운 영역을 확인하거나, 텍스트를 단색 패널 위에 올리세요.
- 차트와 그림은 1.4.11에 해당합니다. 선, 막대, 표식은 배경에 대해 3:1이 필요합니다. 의미를 색만으로 전달하지 마세요. 색맹 시뮬레이터를 참고하세요.
- 반투명 색은 측정 전에 평탄화됩니다. 배경을 흰색 위에 얹고, 그다음 글자 색을 배경 위에 얹습니다. 뒤에 다른 것이 있는 페이지라면 그 색을 직접 입력해야 합니다.
APCA에 대한 참고
APCA(Accessible Perceptual Contrast Algorithm)는 WCAG 3 작업 초안의 후보 방법으로, 글자 크기, 굵기, 극성(어두운 배경의 밝은 글자처럼 글자와 배경의 방향)을 고려합니다. 이는 초안이며 요구 사항이 아니고, 현재 이를 요구하는 법이나 표준은 없습니다. 이 도구의 WCAG 2.x 비율이 여전히 적합성 주장의 기준입니다.
자주 묻는 질문
- 좋은 대비 비율은 무엇인가요?
- 일반 텍스트는 4.5:1 이상이면 WCAG AA를, 7:1이면 AAA를 충족합니다. 큰 텍스트는 AA에 3:1, AAA에 4.5:1이 필요합니다. 흰 바탕의 검정이 최대치인 21:1입니다. 3:1 미만은 시력이 좋은 사람에게도 많은 경우 읽기 어렵습니다.
- WCAG에서 큰 텍스트는 무엇인가요?
- 일반 굵기에서 최소 18pt(24px), 또는 굵은 글씨에서 최소 14pt(약 18.7px)인 텍스트입니다. 크기는 화면에 표시되는 대로 재므로, 유인물에서는 작아 보이는 슬라이드 글꼴도 투사하면 큰 텍스트일 수 있습니다.
- 대비 기준이 아이콘과 차트 선에도 적용되나요?
- 네, 성공 기준 1.4.11 텍스트가 아닌 콘텐츠의 명암 대비에 따라, 내용을 이해하는 데 필요한 사용자 인터페이스 구성 요소와 그래픽은 인접한 색에 대해 3:1 이상이어야 합니다. 장식용 그래픽과 비활성 구성 요소는 면제됩니다.
- 왜 비율이 4.5에 가까운데 4.49로 나오나요?
- WCAG는 정확한 비율을 비교하며 반올림을 인정하지 않기 때문입니다. 4.4999:1인 쌍은 4.5:1 기준에 실패하므로, 도구는 4.50이 아니라 소수점 둘째 자리까지 내림한 값을 보여 줍니다.
- 제안 색은 어떻게 만들어지나요?
- 도구는 입력한 색의 색상과 채도를 유지하고 HSL 명도를 작은 단계로 올리거나 내리면서, 목표 비율에 도달하는 가장 가까운 값을 8비트 HEX 코드로 돌려줍니다. 어떤 명도로도 목표에 도달하지 못하면(예: 중간 회색에 대해 7:1) 그렇다고 알려 주고, 다른 색을 바꾸라고 제안합니다.
- APCA가 WCAG 비율보다 나은가요?
- APCA는 특히 다크 모드와 가는 글자에서 지각을 더 가깝게 모델링하지만, 인정된 요구 사항이 아니라 WCAG 3 초안의 일부입니다. WCAG 2.x를 인용하는 접근성 법규와 조달 표준은 여기서 계산한 비율을 사용합니다.