색상 대비 검사기

대비비가 무엇이고, 왜 재야 하나

대비비는 글자색과 배경색의 밝기 차이를 하나의 숫자로 나타낸 값입니다. 완전히 같은 색이면 1:1, 흰색과 검은색처럼 극단으로 벌어지면 21:1이 나옵니다. 사람 눈이 밝기를 느끼는 방식이 색마다 다르기 때문에 단순히 RGB 값을 빼는 게 아니라, 각 색의 상대 휘도를 구한 뒤 (밝은 쪽 + 0.05) ÷ (어두운 쪽 + 0.05) 로 계산합니다. 이 공식은 웹 접근성 표준인 WCAG 2.x가 정한 것이고, 이 도구도 그 공식을 그대로 씁니다.

재야 하는 이유는 간단합니다. 만드는 사람은 자기 화면에서 자기 눈으로 보고 「읽히네」라고 판단하는데, 보는 사람의 화면 밝기·주변 조명·시력은 저마다 다릅니다. 밝은 회색 글자를 흰 배경에 얹은 화면은 실내에서는 멀쩡해 보이다가 바깥에서 열면 거의 안 보입니다. 대비비는 그 「저마다 다름」을 넘어가는 최소선을 숫자로 못 박아 둔 것입니다.

숫자를 어떻게 읽나

• 4.5 : 1본문 글자의 실질적인 기준선입니다(AA). 대부분의 상세페이지·블로그 본문이 여기에 맞춰져 있어야 합니다.
• 3 : 1큰 글씨(24px 이상, 굵은 글씨는 19px 이상)에만 허용되는 완화 기준입니다. 제목이라고 아무 색이나 써도 된다는 뜻은 아닙니다.
• 7 : 1더 엄격한 기준(AAA)입니다. 글이 많고 오래 읽는 화면이라면 여기까지 올려 두면 확실합니다.

경계 근처의 값은 특히 조심할 만합니다. 예를 들어 흰 배경 위의 #777777 은 4.48:1 로 기준에 아주 조금 못 미치고, #767676 은 4.54:1 로 통과합니다. 눈으로는 구분되지 않는 한 단계 차이가 판정을 가릅니다. 그래서 감으로 고르지 말고 재 보는 편이 빠릅니다.

이 도구가 하지 않는 것

대비비는 읽히는가만 봅니다. 색이 어울리는지, 브랜드에 맞는지, 색맹인 사람이 두 색을 구별할 수 있는지는 별개의 문제입니다. 특히 「색으로만 정보를 구분하는 것」(예: 빨강은 오류, 초록은 정상)은 대비비가 아무리 높아도 해결되지 않으니, 글자나 아이콘을 함께 넣어야 합니다.

또 이 검사는 단색 배경을 전제로 합니다. 사진이나 그라데이션 위에 글자를 얹었다면 가장 밝은 부분과 가장 어두운 부분을 각각 넣어 두 번 재 보시고, 그래도 아슬아슬하면 글자 뒤에 반투명 판을 까는 편이 확실합니다.

주소로 공유하기

색을 바꾸면 주소창의 ?fg=·?bg= 값이 함께 바뀝니다. 그 주소를 그대로 복사해 보내면 상대방 화면에도 같은 두 색이 들어간 상태로 열립니다. 새로고침해도 값이 유지됩니다. 서버에 저장되는 것은 없고, 색은 주소 안에만 들어 있습니다.