썸네일과 색맹

누구의 이야기이고, 왜 썸네일이 어려운 경우인가

적록색맹이 흔한 쪽이다. 보통 북유럽계 남성의 약 8%, 여성의 0.5%로 인용되며, 두 형태가 있다. 녹색 쪽인 이색형 녹색맹(deuteranopia)과 적색 쪽인 적색맹(protanopia). 내가 시뮬레이션한 것이 이 둘이다. 나머지는 각주로 충분할 만큼 드물고, 마지막에 각주를 하나 받는다.

썸네일이 어려운 경우인 이유는 물러설 곳이 없기 때문이다. 색상 범례가 있는 그래프에는 라벨이 있고, 웹사이트에는 글이 있다. 썸네일에는 폭 336픽셀의 이미지 하나가 있고, 그 옆의 제목은 이미지가 아니라 영상을 설명한다. 그러니 두 영역이 서로 구분되지 않게 되면, 그 디자인은 대체물 없이 경계 하나를 잃은 것이다.

무엇이 바뀌고 무엇이 바뀌지 않는가

이것을 먼저 재는 것이 맞다. 나머지 전부를 결정하기 때문이다. 이 도구 팩의 썸네일 660장 전부에 표준 이색형 시뮬레이션을 돌리고 각 이미지를 자기 자신과 비교했다.

이미지의 전체 밝기는 거의 움직이지 않는다. 평균 상대 휘도의 중앙값 변화가 녹색맹에서 0.59%, 적색맹에서 1.11%다. 무너지는 것은 색조 사이의 차이다. 순수한 빨강 rgb(255,0,0)은 rgb(147,147,0), 탁한 노랑으로 나온다. 진한 초록 rgb(0,200,0)은 rgb(171,171,30)이 된다. 이 둘은 같은 색이고 밝기만 다르다. 흰색은 정확히 흰색으로 남는다.

그러니 색이 나빠진다고 생각할 일이 아니다. 색조 축이 삭제되고 밝기 축은 온전히 남는다고 보면 된다. 색조로 만든 구분은 사라지고, 밝기로 만든 구분은 손대지 않는다.

개별 채도 높은 색은 밝기가 움직일 수 있다. 그 순수한 빨강은 녹색맹에서 상대 휘도 0.213에서 0.271로 오르고, 적색맹에서는 0.104로 떨어진다. 움직이지 않는 것은 이미지 전체다. 사진의 대부분은 완전히 포화되어 있지 않기 때문이다.

어떻게 측정했나

시뮬레이션은 Viénot, Brettel, Mollon(1999)의 선형 근사다. sRGB를 선형으로, 다음 LMS 원추 반응으로 바꾸고, 없는 원추를 이색형이 볼 수 있는 평면에 투영한 뒤 되돌린다. 대부분의 색맹 시뮬레이터가 쓰는 표준 방법이고, 알려진 약점은 삼색형 청황 결함이다. 그래서 이 가이드는 그쪽에 대해 아무 주장도 하지 않는다.

썸네일마다 지배적인 색조 계열 둘을 잡았다. 열두 개의 30° 구간 중 채도 가중 비중이 가장 큰 둘로, 둘 다 10%를 넘는 경우다. 그 쌍에 대해 두 가지를 측정했다. 두 평균색 사이의 WCAG 대비율 — 순수한 밝기 측정 — 과, 시뮬레이션 전후 두 색 사이의 sRGB 거리.

660장 중 586장이 10% 문턱을 넘는 지배 색조 둘을 갖는다. 아래 숫자가 설명하는 대상이 그 586장이다.

실제 썸네일에서 두 색을 갈라놓는 밝기의 양

분포가 곧 결론이다. 같은 썸네일의 두 지배색 사이 대비율이고, 측정 가능한 쌍이 있는 586장에 대한 것이다.

중앙값은 1.57:1이다. 참고로 WCAG는 본문 텍스트에 4.5:1, 그래픽 요소에 3:1을 요구한다. 사진이 아니라 인터페이스를 위해 쓰인 기준이므로 여기서는 규칙이 아니라 자에 가깝다. 이 썸네일 중 첫 기준에 닿는 것은 2%, 두 번째에 닿는 것은 9%다.

즉 열 중 넷은 색조에만 기댄다

586쌍 중 267쌍 — 쌍의 46%, 측정한 전체 썸네일의 40% — 이 두 주요 색을 밝기 대비 1.5:1 미만으로 갈라놓는다. 그 두 영역을 붙지 않게 지탱하는 것이 대부분 밝기가 아니라면 대부분 색조이고, 색조는 적록 이색형에게 도착하지 않는 부분이다.

시뮬레이션이 직접 확인해 준다. 전체 쌍에서 두 색 사이 거리는 중앙값 9% 떨어지고, 밝기가 낮은 그 그룹 안에서는 19% 떨어진다. 애초에 밝기 대비가 가장 적었던 쌍이 정확히 가진 것을 가장 많이 잃는다.

그리고 이것은 전달 크기에서 다른 이유로 실패하는 것과 같은 결정이다. 밝기가 아니라 색조로 만든 경계는, 파일이 폭 336픽셀로 다시 인코딩될 때 녹아 사라지는 그 경계다. 흐릿한 썸네일 가이드에서 측정한 그대로다. 실패 방식은 둘, 원인은 하나, 해결도 하나다.

초록 위 빨강 경고는 엉뚱한 문제를 겨눈다

색맹에 관한 표준 접근성 조언은 빨강을 초록 옆에 두지 말라는 것이다. 실제 썸네일에 대고 재보면 그 조합은 드물다. 660장 중 13장, 2%가 빨강 계열과 초록 계열을 두 지배 색조로 갖는다.

일어나면 나쁘다. 그 쌍들은 서로 간 거리의 중앙값 35%를 잃는데 여기 어느 그룹보다도 큰 손실이고, 13장 중 10장은 밝기 대비도 2:1 미만이다. 그러니 조언이 틀린 것은 아니다. 다만 좁다. 썸네일의 2%를 설명하는 동안, 같은 문제의 일반형 — 밝기 차가 거의 없는 아무 두 색조 — 은 40%를 설명한다.

그리고 니치별로 크게 다르다

측정 가능한 쌍 중 색조에만 기대는 비율 순이다. 이 양상은 니치가 애초에 어떻게 생겼는지를 따라간다. 튀는 법 가이드에서 측정한 대로, 밝고 채도 높은 줄에 색조만의 구분이 가장 많다. 무언가를 구분할 밝기 여유가 그만큼 덜 남아 있기 때문이다.

패션 & 뷰티와 정치가 65%와 62%, 금융과 건강 & 피트니스가 25%와 30%다. 당신의 니치가 이 표의 위쪽 절반에 있다면, 지금 겉모습을 베끼려는 그 썸네일이 납작해지는 쪽일 가능성이 높다.

해결책은 이미 숫자를 가진 그것이다

먼저 밝기로 구분하고 색조는 보너스로 취급하라. 색 가이드가 반대편에서 도달한 결론과 같다. 인터페이스는 흰색이거나 거의 검정이다. 여기서도 처방은 그것 전부다. 밝기는 시뮬레이션이 건드리지 않는 축이기 때문이다.

값싼 시험은 흑백이다. 디자인을 완전히 탈채도하고 각 부분이 여전히 별개의 부분으로 읽히는지 보라. 피사체 대 배경, 글자 대 그 뒤의 것, 분할 화면의 한쪽 대 다른 쪽. 그것을 견디면 이색형도 견딘다. 흑백이 더 엄격한 시험이기 때문이다. 흑백은 색조 정보를 전부 제거하지만 이색형은 그중 한 축을 남긴다.

그래서 역은 증거가 아니다. 흑백에서 실패하는 것이 실제 녹색맹 시청자에게는 일부 보일 수 있다. 흑백 통과는 충분조건이고, 흑백 실패는 경고이지 판정이 아니다. 이 기준값은 우리가 정한 것이 아니라 WCAG의 최소 명도 대비 기준이 정의한 대비율이며, 웹의 나머지 전부가 지켜야 하는 표준입니다.

글자가 여유가 가장 적은 경우다

색 배경 위의 글자에서 가장 빨리 결판난다. 글자는 얇기 때문이다. 배경과 색조만으로 구분되는 헤드라인은 이색형에게 읽히지 않고, 나머지 모두에게는 그냥 읽기 어렵다. 측정한 쌍 중 인터페이스 텍스트에 기대되는 4.5:1에 닿는 것은 2%뿐이다.

실용적인 답은 대비율이 아니라 획이다. 글자와 배경 양쪽 모두로부터 밝기가 먼 색의 외곽선이나 단단한 그림자, 즉 텍스트 크기 가이드가 축소에 대해 측정하는 그것이다. 336픽셀에서 헤드라인을 읽히게 하는 그 외곽선이, 색조 없이도 읽히게 한다.

이 가이드가 다루지 않는 것

청황 계열인 삼색형 결함은 여기서 시뮬레이션하지 않았다. Viénot 근사는 그쪽에서 신뢰하기 어렵다고 알려져 있고, 0.1%에 훨씬 못 미칠 만큼 드물어서 추측이 보탬이 되지 않는다.

완전색맹, 단색시는 더 드물고, 위의 흑백 시험이 바로 그 경우다. 탈채도를 견디는 디자인은 단색시도 견딘다.

그리고 이 가이드 전체는 색조에 관한 것이다. 썸네일의 다른 접근성 문제는 크기이고, 그건 장애의 문제가 전혀 아니다. 모두가 당신의 디자인을 폭 336픽셀로 받으며, 그 바닥값은 텍스트 크기와 얼굴 가이드에 있다.

1분 확인

같은 이미지를 두 번 본다. 탈채도해서 부분들이 여전히 갈라지는지 보라. 그다음 색이 있는 판본을 실제 피드에 되돌려 놓아라. 내부적으로 갈라지는 썸네일도 인터페이스에 대해서는 테두리를 잃을 수 있고, 그것은 다른 가이드의 다른 측정이다.

그 두 번째 확인이 미리보기 도구의 용도다. 실제 렌더링 크기로, 실제 경쟁 영상들 사이에 놓인 당신의 썸네일. 첫 번째는 디자인한 프로그램의 슬라이더 하나이고, 이 일에서 가장 값싼 접근성 확인이다.

모두가 묻는 질문