세상의 모든 유틸사용 방법
- 글자색과 배경색을 적거나 왼쪽 색 고르개로 고릅니다. 적는 대로 바로 계산합니다.
- 큰 글씨로 대비비가 나오고, 그 옆에 일반 글자 기준의 판정이 나옵니다.
- 미리보기에서 실제 색으로 그린 글자와 테두리를 눈으로 확인합니다.
- 표에서 쓰임 다섯 가지의 통과 · 미달을 보고, 미달이면 이렇게 고치면 됩니다에 나온 색을 씁니다.
처음 화면으로 본 예시
처음 값은 흰 배경(#ffffff) 위의 회색 글자(#767676)입니다. 대비비는 4.54:1, 옆의 판정은 "통과 (AA)"입니다.
| 쓰임 | 필요한 값 | 판정 |
|---|---|---|
| 일반 글자 (AA) | 4.5:1 | 통과 |
| 일반 글자 (AAA) | 7:1 | 미달 |
| 큰 글자 (AA) | 3:1 | 통과 |
| 큰 글자 (AAA) | 4.5:1 | 통과 |
| 글자 아닌 것 (AA) | 3:1 | 통과 |
"이렇게 고치면 됩니다"에는 일반 글자 (AA) "이미 넘습니다", 일반 글자 (AAA) #595959, 큰 글자·테두리 (AA) "이미 넘습니다"라고 나옵니다. 글자색을 #595959로 바꾸면 대비비가 7:1이 되어 가장 엄격한 기준도 넘습니다.
자주 쓰는 색 짝의 대비비
| 글자색 / 배경색 | 대비비 | 일반 글자 | 큰 글자 |
|---|---|---|---|
#000 / #fff | 21:1 | 통과 (AAA) | 통과 (AAA) |
#595959 / #fff | 7:1 | 통과 (AAA) | 통과 (AAA) |
#767676 / #fff | 4.54:1 | 통과 (AA) | 통과 (AAA) |
#777 / #fff | 4.47:1 | 미달 | 통과 (AA) |
#949494 / #fff | 3.03:1 | 미달 | 통과 (AA) |
#aaa / #fff | 2.32:1 | 미달 | 미달 |
#fff / #1e90ff | 3.23:1 | 미달 | 통과 (AA) |
#fff / #ffff00 | 1.07:1 | 미달 | 미달 |
#000 / #ffff00 | 19.55:1 | 통과 (AAA) | 통과 (AAA) |
rgba(0,0,0,.5) / #fff | 3.94:1 | 미달 | 통과 (AA) |
rgba(0,0,0,.6) / #fff | 5.74:1 | 통과 (AA) | 통과 (AAA) |
- 대비비는 소수 둘째 자리 아래를 버려서 보여 줍니다. 올리면 4.496이 4.50으로 보여 통과로 읽히기 때문입니다. 판정은 버리기 전의 값으로 합니다.
- 글자색과 배경색을 맞바꿔도 불투명한 색끼리는 대비비가 같습니다. 글자색 ↔ 배경색 단추로 바꿔 볼 수 있습니다.
넣을 수 있는 꼴
| 넣은 글 | 읽은 색 | 비고 |
|---|---|---|
#abc | #aabbcc | 세 자리는 한 자리씩 겹쳐 읽습니다 |
abc | #aabbcc | # 없이도 읽습니다 |
#aabbccdd | #aabbcc · 투명도 0.87 | 끝 두 자리는 투명도 |
#abcd | #aabbcc · 투명도 0.87 | 네 자리의 끝 한 자리도 투명도 |
rgb(1 2 3) | #010203 | 쉼표 대신 빈칸 |
rgb(1 2 3 / 50%) | #010203 · 투명도 0.5 | 빗금 뒤는 투명도 |
rgb(100%, 0%, 0%) | #ff0000 | 퍼센트 |
rgb(300,0,0) | #ff0000 | 255를 넘는 값은 255로 맞춥니다 |
#abcde | 읽지 못함 | 자릿수가 3 · 4 · 6 · 8이 아닙니다 |
red | 읽지 못함 | 색 이름은 읽지 않습니다 |
hsl(0 100% 50%) | 읽지 못함 | hsl()은 읽지 않습니다 |
대문자와 소문자는 가리지 않고, 앞뒤 빈칸은 버립니다. 투명도가 1을 넘으면 1로 맞춥니다.
반투명 색
- 글자색의 투명도는 배경 위에 겹친 색으로 바꿔 계산합니다. 흰 배경 위에
rgba(0,0,0,.5)를 얹으면 실제로는 #808080 색으로 보이므로 대비비가 3.94:1입니다. 투명도를 빼고 검정으로 계산한 21:1이 아닙니다. - 색 고르개와 미리보기에도 겹친 색이 들어갑니다.
- 배경색의 투명도는 계산에서 뺍니다. 그 뒤에 무엇이 있는지 알 수 없기 때문입니다. 그럴 때는 칸 아래에 "배경색에 투명도가 있어 투명도는 빼고(불투명으로 보고) 계산했습니다."라고 알립니다. 배경색 칸에
rgba(255,255,255,.5)를 넣어도 흰색으로 보고 4.54:1로 계산합니다. - 반투명 배경을 정확히 재려면 뒤에 깔린 색과 겹친 실제 색을 구해 배경색에 넣으세요.
고쳐 주는 색 읽는 법
| 글자색 / 배경색 | 일반 글자 (AA) | 일반 글자 (AAA) | 큰 글자·테두리 (AA) |
|---|---|---|---|
#777 / #fff | #767676 | #595959 | 이미 넘습니다 |
#aaa / #fff | #757575 | #585858 | #949494 |
#ff0000 / #fff | #ed0000 | #b50000 | 이미 넘습니다 |
#fff / #1e90ff | #262626 | 이 배경에서는 밝기만 바꿔서는 넘길 수 없습니다. 배경색을 바꾸세요. | 이미 넘습니다 |
#999 / #808080 | #171717 | 이 배경에서는 밝기만 바꿔서는 넘길 수 없습니다. 배경색을 바꾸세요. | #e1e1e1 |
rgba(0,0,0,.5) / #fff | #000000 | #000000 | 이미 넘습니다 |
- 배경은 그대로 두고 글자색만 검정 쪽과 흰색 쪽으로 100걸음씩 옮겨 보며, 기준을 넘는 색 가운데 덜 바뀐 쪽을 고릅니다. 걸음 단위로 찾으므로 기준에 딱 걸치는 색보다 조금 더 진하거나 옅을 수 있습니다.
- 기준을 이미 넘는 줄은 "이미 넘습니다"라고만 나옵니다.
- 배경이 중간 밝기면 검정으로도 흰색으로도 넘지 못하는 기준이 있습니다. 그 줄에는 "이 배경에서는 밝기만 바꿔서는 넘길 수 없습니다. 배경색을 바꾸세요."라고 나옵니다.
- 반투명 글자색이면 투명도를 뺀 불투명한 색을 내놓습니다.
기준값
| 쓰임 | AA | AAA |
|---|---|---|
| 일반 글자 | 4.5:1 | 7:1 |
| 큰 글자 (18pt 이상 · 굵은 14pt 이상) | 3:1 | 4.5:1 |
| 글자가 아닌 것 (테두리·아이콘·그래프) | 3:1 | — |
AA는 대부분의 접근성 지침이 요구하는 수준이고, AAA는 더 엄격한 기준입니다. 공공 웹사이트라면 AA를 맞춰야 합니다. 글자가 아닌 것에는 AAA 기준이 없습니다.
계산 방법
- 각 색의 R·G·B를 0~1로 바꿉니다.
- 채널마다 0.04045 이하면
c ÷ 12.92, 넘으면((c + 0.055) ÷ 1.055)2.4 - 상대 휘도 =
0.2126 R + 0.7152 G + 0.0722 B - 대비비 =
(밝은쪽 + 0.05) ÷ (어두운쪽 + 0.05)
처음 값으로 따라가 보면, #767676의 채널은 셋 다 118이라 118 ÷ 255 = 0.4627이고, 2번 식을 거치면 0.1812입니다. 세 채널이 같으니 상대 휘도도 0.1812입니다. 흰색의 상대 휘도는 1이므로 (1 + 0.05) ÷ (0.1812 + 0.05)를 셈해 4.54:1이 나옵니다.
초록의 계수가 파랑의 열 배인 것이 눈에 띕니다. 사람 눈이 초록에 가장 민감하기 때문입니다. 그래서 노란 배경 위 흰 글씨는 보기엔 밝기 차이가 커 보여도 대비비가 2:1도 안 됩니다.
자주 걸리는 것들
- 흐린 회색 안내문. 흰 배경에서 AA를 넘는 가장 옅은 회색은
#767676입니다.#777은 4.47로 아슬아슬하게 못 넘습니다(이 도구는 올리지 않고 버립니다). - 연한 색 단추. 글자는 통과해도 테두리가 3:1을 못 넘는 일이 많습니다.
- 반투명 글씨.
opacity: .6을 주면 실제 색이 바뀝니다. 겹친 색으로 다시 재야 합니다. - 그래프 색. 서로 구분되는 것과 배경과 구분되는 것은 다른 문제입니다. 둘 다 봐야 합니다.
색만으로 알리지 마세요
대비비를 맞춰도 색맹인 분에게는 빨강과 초록이 같아 보일 수 있습니다."빨간 칸이 오류입니다" 같은 안내는 글자나 기호를 함께 써야 합니다(WCAG 1.4.1). 이 검사는 밝기 차이만 보며, 색상 구분까지 봐 주지는 않습니다.
이런 문구가 뜰 때
| 문구 | 까닭과 할 일 |
|---|---|
| 글자색을 읽을 수 없습니다. | 글자색 칸이 비었거나 읽는 꼴이 아닙니다. 위의 "넣을 수 있는 꼴"대로 적으세요. 두 칸을 다 읽지 못하면 이 문구가 먼저 뜹니다. |
| 배경색을 읽을 수 없습니다. | 배경색 칸이 비었거나 읽는 꼴이 아닙니다. |
| 배경색에 투명도가 있어 투명도는 빼고(불투명으로 보고) 계산했습니다. | 오류가 아니라 알림입니다. 배경색의 투명도를 빼고 계산했다는 뜻입니다. |
| 이 배경에서는 밝기만 바꿔서는 넘길 수 없습니다. 배경색을 바꾸세요. | 글자색의 밝기를 어떻게 바꿔도 그 기준을 넘지 못합니다. 배경을 더 밝게 하거나 더 어둡게 하세요. |
함께 쓰면 좋은 도구
- 색상 코드 변환 — HEX·RGB·HSL 서로 바꾸기
- 플레이스홀더 이미지 — 시안 만들 때
- 파비콘 만들기