명도 대비

색이 읽히는지를 눈으로만 판단하던 시절에는 논의가 취향 다툼으로 끝났습니다. 연하다는 말과 이 정도면 괜찮다는 말 사이에 판정할 기준이 없었고, 같은 색이 화면마다 다르게 보였습니다.

페이지덱에서도 설명 글자 색을 두고 민서와 지현이 갈렸습니다. 민서의 화면에서는 읽혔고 지현의 노트북에서는 배경에 묻혔습니다. 둘 다 자기 화면을 근거로 말했으니 결론이 나지 않았습니다. 그 색은 그대로 나갔고, 몇 달 뒤 공공기관 고객의 검토서에 지적으로 올라왔습니다.

명도 대비는 이 판단을 숫자로 옮긴 값입니다. 두 색을 넣으면 비율이 나오고 그 비율이 기준을 넘는지로 통과와 미달이 갈립니다. 어느 화면에서 보느냐와 무관하게 답이 같습니다.

두 색의 밝기를 각각 구한 뒤 밝은 쪽을 어두운 쪽으로 나눕니다. 결과는 같은 색일 때 1 대 1이고, 검정과 흰색일 때 가장 큰 21 대 1이 됩니다.

1. 색마다 상대 밝기를 구합니다. 빨강·초록·파랑 값에 가중치를 다르게 두고 더합니다. 사람 눈이 초록에 가장 민감하고 파랑에 둔해서, 단순 평균은 실제 밝기와 어긋납니다.
2. 두 밝기에 각각 0.05를 더하고 큰 값을 작은 값으로 나눕니다. 이 0.05는 화면에 늘 섞여 있는 반사광을 감안한 보정입니다.
3. 나온 값을 4.5 대 1처럼 적습니다.

손으로 계산하지는 않습니다. 색 두 개를 넣으면 값을 내주는 도구가 시안 프로그램과 브라우저에 붙어 있습니다. 신경 쓸 것은 무엇과 무엇을 재는지입니다. 반투명 층이 겹쳐 있거나 사진 위에 글자가 놓였다면 눈에 보이는 합성된 색으로 재고, 그라데이션이라면 가장 불리한 지점을 기준으로 잡습니다.

값을 읽는 기준은 WCAG AA 등급을 씁니다. 본문 글자는 4.5 대 1 이상, 큰 제목과 버튼 테두리 같은 요소는 3 대 1 이상입니다. 흰 배경 위의 연회색 글자는 2.8 대 1이라 떨어지고, 두 단계 진하게 하면 4.7 대 1이 되어 통과합니다. 다크 모드에서는 배경이 바뀌니 같은 짝을 다시 재야 합니다.

"이 설명 글자 2.8 대 1입니다. 두 단계 진하게 가죠."

기준에 못 미치니 팔레트의 더 어두운 단계로 바꾸자는 제안입니다.

"브랜드 노랑 위에 흰 글자는 안 됩니다. 글자를 검정으로 바꾸겠습니다."

노랑은 흰 배경과 밝기가 비슷해 대비가 거의 나오지 않는다는 뜻입니다.

"팔레트 만들 때 대비까지 같이 재 주세요. 나중에 걸리면 전부 다시입니다."

색을 고르는 자리에서 함께 판정하자는 요청입니다.

민서는 이제 색 단계를 만들 때 각 단계와 흰색·검정 사이의 값을 표로 적어 둡니다. 어느 단계 위에 어느 글자를 올려도 되는지가 그 표에 나와 있어, 태오는 시안을 받을 때 이 값을 따로 묻지 않습니다.