색 변환 · 명암비
색 표기를 서로 바꾸고, 글자색과 배경색의 명암비를 냅니다. 변환만으로는 반쪽입니다 — 실제로 자주 막히는 것은 「이 배경에 이 글자를 얹어도 되나」이고, 접근성 심사에서 가장 흔히 걸리는 항목도 그것입니다.
Body text looks like this
And large text like this
7.52 : 1
- Pass · AA body (4.5:1)
- Pass · AA large (3:1)
- Pass · AAA body (7:1)
Ratios follow WCAG. Large text means bold 18.66px or 24px and up. It is the most commonly failed accessibility check, so it is worth testing any grey text — the popular #777 lands at 4.48:1 on white, just under the line.
받는 표기와 받지 않는 표기
#abc·#aabbcc, 쉼표나 공백으로 나눈 rgb()·rgba(), hsl()·hsla() 를 읽습니다. 넷째 값(투명도)은 읽되 버립니다 — 명암비는 불투명한 두 색 사이의 값이라, 반투명 글자의 실제 대비는 바탕과 섞인 뒤에야 알 수 있습니다. red 같은 이름과 여덟 자리 HEX 는 받지 않습니다. 색 고르개로 찍은 값도 같은 칸에 들어갑니다.
명암비는 어떻게 세나
각 색의 상대 휘도를 냅니다 — sRGB 값의 감마를 풀어 선형으로 바꾸고 빨강 0.2126, 초록 0.7152, 파랑 0.0722 의 비중으로 더합니다. 두 휘도에 0.05 씩 더해 나눈 것이 명암비라 1:1 부터 21:1 사이입니다. 초록의 몫이 커서 노랑은 흰 바탕에서 거의 안 보이고 파랑은 검정 위에서 어둡습니다. 글자색과 배경을 바꿔 넣어도 값은 같습니다.
AA·AAA 와 큰 글씨
본문 4.5:1, 큰 글씨 3:1 이 AA 이고 본문 7:1 이 AAA 입니다. 큰 글씨는 24px 이상이거나 굵은 18.66px 이상입니다. 3:1 은 아이콘·입력칸 테두리 같은 UI 요소의 기준이기도 해서(WCAG 1.4.11) 그 셈에도 쓸 수 있습니다. 미리보기에 본문 크기와 큰 글씨를 함께 그려 두어, 숫자가 아슬할 때 눈으로도 견줄 수 있습니다.
HSL 을 함께 내는 이유
미달이면 대개 밝기를 조금 옮기는 것으로 넘습니다. HEX 로는 어느 자리를 얼마나 바꿔야 할지 알기 어렵고, HSL 은 색조를 두고 셋째 값만 내리면 됩니다. 그래서 세 표기를 함께 냅니다. HSL 은 정수로 반올림해 보여 주므로 그것을 다시 넣으면 RGB 가 한 단위쯤 어긋날 수 있습니다.
읽지 못하는 값과 그때의 화면
red 같은 이름, #abcd 넉 자리, rgb(100% 0% 0%) 처럼 백분율로 적은 RGB 는 읽지 못합니다. 그러면 그 칸 아래에 읽지 못했다는 말이 서고 색 고르개는 검정으로 돌아가며, 명암비 판은 두 색이 다 읽힐 때까지 통째로 사라집니다. 0~255 를 넘는 값은 거절하지 않고 그대로 셈에 넣으니 넣지 마세요.
색 고르개와 글자 칸은 같은 값입니다
고르개로 찍으면 여섯 자리 HEX 가 칸에 들어가고, 칸에 rgb() 나 hsl() 을 적으면 고르개가 그 색을 보여 줍니다. 다만 고르개는 HEX 만 내놓으므로 HSL 로 적어 둔 값을 고르개로 조금 만지는 순간 표기가 HEX 로 바뀝니다. 읽히는 동안 칸 아래에 세 표기가 함께 서니 필요한 것을 거기서 가져가면 됩니다.
자주 묻는 질문
명암비 기준이 어떻게 되나요?
WCAG 기준으로 본문 글씨는 4.5:1, 큰 글씨(굵은 18.66px 또는 24px 이상)는 3:1을 넘어야 AA입니다. 더 엄격한 AAA는 본문 7:1입니다. 흔히 쓰는 회색 #777은 흰 배경에서 4.48:1이라 아슬하게 미달입니다.
흰 바탕에 쓸 수 있는 가장 밝은 회색은요?
본문 AA 기준으로 #767676 이 4.54:1 로 통과하고, 한 단계 밝은 #777 은 4.48:1 로 미달입니다. AAA 는 #595959 가 7.00:1 로 턱걸이입니다. 큰 글씨나 아이콘의 3:1 은 #949494 가 3.03:1 로 넘습니다. 어느 것이든 경계에 바짝 붙어 있으니 한 단계 어둡게 잡는 편이 안전합니다.
붙여넣은 코드가 서버로 가나요?
가지 않습니다. 브라우저 안에서만 처리하고 어디에도 보내거나 저장하지 않습니다. 사내 설정 파일이나 운영 쿼리처럼 밖으로 내보내기 곤란한 것도 그래서 쓸 수 있습니다. 인터넷을 끊고도 동작합니다.