Chapter 13

모두를 위한 색

신호등의 빨강과 초록이 비슷한 색으로 보이는 사람은 어떻게 길을 건널까. 대부분은 위치(빨강은 위나 왼쪽)와 밝기로 구분한다. 그런데 웹사이트의 "품절" 표시가 제목 옆의 작은 빨간 점 하나뿐이라면, 그 사람에게는 구분할 방법이 남지 않는다. 이 장은 다른 눈으로 화면을 보는 법, 글자가 읽히는지 숫자로 재는 법, 그리고 색이 하던 일을 글자와 모양에게도 나눠 맡기는 법을 다룬다.

색각이상의 종류(제1·2·3색각이상, 전색각)와 대략의 비율을 설명하고, 시뮬레이션의 한계를 안다.
WCAG 2의 대비비를 계산하고, 본문 글자 4.5:1, 큰 글자 3:1, 비텍스트 요소 3:1 기준을 적용한다.
APCA가 무엇이며 왜 아직 참고용인지 안다.
색에만 의존하는 정보 표현(WCAG 1.4.1)을 찾아내고 글자·모양·위치·패턴을 함께 쓰도록 고친다.
색각이상 시뮬레이션과 색차로 팔레트의 구분도를 점검한다.

모두가 같은 색을 보지는 않는다

1장에서 본 것처럼 사람의 눈에는 빛에 반응하는 원뿔세포가 세 종류(L, M, S) 있다. 이 가운데 한 종류가 없거나 감도가 옮겨져 있으면 색을 구분하는 방식이 달라진다. 이것을 색각이상(Color vision deficiency)이라고 한다. 예전에는 "색맹", "색약"이라고 불렀지만, 색을 전혀 못 보는 경우는 매우 드물고 대부분은 특정한 색 쌍의 구분이 어려운 정도라서 지금은 색각이상이라는 말을 쓴다.

제1색각이상(Protan): L 원뿔세포(긴 파장)에 문제가 있다. 빨강과 초록의 구분이 어렵고, 빨강이 어둡게 보인다.
제2색각이상(Deutan): M 원뿔세포(중간 파장)에 문제가 있다. 빨강과 초록의 구분이 어렵다. 색각이상 가운데 가장 흔하다.
제3색각이상(Tritan): S 원뿔세포(짧은 파장)에 문제가 있다. 파랑과 초록, 노랑과 분홍의 구분이 어렵다. 매우 드물다.
전색각(Achromatopsia): 색을 거의 느끼지 못하고 밝기로만 본다. 극히 드물다.

제1·2색각이상을 묶은 적록 색각이상은 X 염색체를 따라 유전되기 때문에 남성에게 훨씬 많다. 여러 조사를 종합하면 북유럽계 남성의 약 8%, 여성의 약 0.5%가 적록 색각이상이고, 동아시아 남성에서는 대략 4~6%로 그보다 낮게 보고된다. 조사마다 방법과 대상이 달라 숫자는 대략의 값이지만, 남성 스무 명 가운데 한 명꼴이라고 생각하면 크게 틀리지 않는다. 웹사이트 방문자가 하루 수백 명인 서점이라면 매일 그런 손님이 온다는 뜻이다. 여기에 나이가 들며 수정체가 누레지는 변화, 저시력, 눈부신 햇빛 아래의 휴대폰 화면처럼 색 구분이 어려워지는 상황까지 더하면 "모두가 같은 색을 본다"는 가정은 처음부터 성립하지 않는다.

그림 1. 원뿔세포의 감도와 제2색각이상. 실선은 세 원뿔세포가 파장마다 얼마나 반응하는지를 단순화한 모양이다. L(긴 파장)과 M(중간 파장) 곡선은 원래도 많이 겹쳐 있다. 제2색각이상 가운데 흔한 형태(이상 3색각)에서는 M 곡선이 L 쪽으로 옮겨 가(점선) 두 신호의 차이가 더 작아지고, 빨강–초록 축의 구분이 약해진다. M 원뿔세포가 아예 없으면(2색각) 그 차이가 사라진다. 곡선은 모양을 흉내 낸 그림이며 측정값이 아니다.

다른 눈으로 화면 보기

색각이상이 없는 사람이 그 경험을 짐작해 보는 도구가 색각이상 시뮬레이션(CVD simulation)이다. 이 책의 엔진은 마샤두, 올리베이라, 페르난데스(Machado, Oliveira & Fernandes, 2009)가 원뿔세포의 감도 변화를 바탕으로 만든 모형을 쓴다. 이 모형은 "심도"를 바꿔 이상 3색각(약한 쪽)부터 2색각(강한 쪽)까지 흉내 낼 수 있다. 이 책은 논문의 심도 1.0 행렬을 쓰고, 중간 심도는 원래 색과 선형 보간한 근사로 보여 준다.

아래는 책방 E 웹사이트의 첫 화면을 단순하게 그린 것이다. 경계선을 좌우로 끌어 원래 화면(왼쪽)과 시뮬레이션(오른쪽)을 비교하고, 위의 단추로 종류를, 슬라이더로 심도를 바꾼다. 책 제목 옆의 점은 예약 가능(초록)과 품절(빨강)을 뜻한다.

SIMULATOR

책방 E 웹사이트, 다른 눈으로

심도

두 상태 점의 색차 ΔE—

"예약하기" 글자 대비—

로고와 바탕 대비—

해볼 것: ① 제2색각, 심도 100%에서 경계선을 왼쪽 끝까지 끈다. 초록 점과 빨간 점이 거의 같은 황갈색이 된다. 색차가 65 가까이에서 7 남짓으로 떨어진다. ② 심도를 50%로 내린다. 이상 3색각처럼 구분은 되지만 작은 점 크기에서는 여전히 헷갈린다. ③ 전색각으로 바꾼다. 색이 사라져도 "예약하기" 버튼은 처음부터 잘 안 읽힌다. 이 문제는 색각이 아니라 명도 대비의 문제다. 대비 값이 시뮬레이션 종류와 상관없이 거의 그대로인 것을 확인한다. (Machado 외 2009 모형. 중간 심도는 선형 보간 근사이고, 실제 경험은 사람마다 다르다. 화면 색은 기기마다 다르다.)

시뮬레이션에서 본 두 가지 문제는 성격이 다르다. 상태 점은 색상으로만 정보를 전하고 있어서 적록 색각이상에게 사라졌다. 버튼은 색상과 상관없이 명도 대비가 낮아서 누구에게나 읽기 어렵다. 앞의 문제는 정보를 색 말고도 실어 나르면 풀리고, 뒤의 문제는 대비를 재고 기준을 맞추면 풀린다. 이 장의 나머지는 이 두 갈래를 차례로 다룬다.

시뮬레이션은 "그 사람이 보는 화면"이 아니다 시뮬레이션은 색각이 정상인 사람의 눈에, 색각이상인 사람이 구분하기 어려운 색 쌍을 같은 색으로 보여 주는 근사다. 같은 제2색각이상이라도 심도가 사람마다 다르고, 오랫동안 명도와 맥락으로 색을 구분하는 법을 익힌 사람의 실제 경험은 시뮬레이션보다 훨씬 풍부하다. 또 모형마다(Brettel·Viénot·Mollon 1997, Viénot 외 1999, Machado 외 2009) 결과가 조금씩 다르다. 그래서 시뮬레이션은 "어디가 위험한지 찾는 도구"로 쓰고, 가능하면 실제 사용자에게 확인받는다.

명도 대비를 숫자로 재기

글자가 읽히는지는 글자와 바탕의 밝기 차이에 가장 크게 달려 있다. 웹 접근성 국제 기준인 WCAG(Web Content Accessibility Guidelines)는 W3C가 만든 지침으로, 두 색의 상대 휘도(Relative luminance)를 구해 그 비율로 대비를 잰다. 상대 휘도는 화면 값을 빛의 세기로 되돌린 뒤 초록에 가장 큰 무게를 두어 더한 값으로, 검정이 0, 흰색이 1이다.

$$\text{대비비} = \frac{L_1 + 0.05}{L_2 + 0.05}, \qquad L = 0.2126\,R + 0.7152\,G + 0.0722\,B$$

$L_1$: 더 밝은 색의 상대 휘도, $L_2$: 더 어두운 색의 상대 휘도. $R, G, B$는 sRGB 값을 선형광으로 바꾼 값(0~1)이다. 0.05는 화면 반사광 등을 대신하는 작은 값으로, 아주 어두운 색끼리의 비율이 터무니없이 커지는 것을 막는다. 결과는 1(같은 색)에서 21(검정과 흰색)까지다. 이 책의 엔진은 ART.contrast()로 계산한다.

그림 2. 대비비의 눈금. 흰 바탕 위 회색 글자로 대비 2, 3, 4.5, 7, 12를 만든 예시다. 3은 큰 글자와 버튼 테두리·아이콘 같은 비텍스트 요소의 최소, 4.5는 본문 글자의 최소(AA), 7은 더 높은 등급(AAA)이다. 눈금은 비율이라 로그 눈금으로 그렸다. 같은 대비라도 글자가 가늘거나 작으면 더 읽기 어렵다.

대비를 직접 재 본다. 아래 색 판은 가로가 색상, 세로가 명도(OKLCH L)이고, 슬라이더로 채도를 정한다. 판 위의 두 손잡이 중 글은 글자색, 바는 바탕색이다. 끌어서 옮기면 오른쪽(또는 아래)의 미리보기와 대비 값이 바뀐다.

SIMULATOR

대비 측정기: 글자색과 바탕색 끌기

손잡이를 끈다

색 판의 채도(OKLCH C)

글자 · 바탕—

WCAG 대비비—

본문 · 큰 글자—

APCA Lc (참고)—

해볼 것: ① "로고 초록/흰색"에서 시작한다. 서윤의 로고 초록 후보 #2f7d5b 위 흰 글자는 이 책의 모델로 4.99, 본문 기준(4.5)을 넘는다. 바 손잡이를 위로 조금만 올려도 기준 아래로 떨어진다. ② "노랑/흰색"을 고른다. 노랑 글자는 아주 선명해도 1.1 남짓이다. 채도는 대비를 만들지 않는다. ③ "빨강/초록"을 고르고 시뮬레이터 머리의 흑백 단추를 누른다. 색상으로는 정반대인 두 색이 거의 같은 회색이 된다. 대비비도 1 가까이다. 명도를 끝까지 벌려야 비로소 읽힌다. (대비비는 WCAG 2 공식, APCA는 0.0.98G-4g 상수로 계산한 참고값이다. 색 판은 sRGB 색역 안으로 채도를 줄여 칠했다.)

"빨강/초록"이 보여 주듯, 색상환에서 멀리 떨어진 두 색도 명도가 같으면 대비는 거의 없다. 대비비는 색상과 채도를 모르고 오직 밝기만 본다. 그래서 대비를 맞춘 화면은 흑백으로 바꿔도, 색각이상의 눈으로 봐도 글자가 남는다. 6장의 "명도가 먼저다"는 접근성에서도 그대로 성립한다.

기준표: 무엇에 몇 대 1인가

WCAG 2(현재 판은 2023년의 2.2)는 색과 관련해 네 가지 성공 기준을 둔다. 한국에도 이를 바탕으로 한 국가 표준인 한국형 웹 콘텐츠 접근성 지침이 있고, 공공기관 웹사이트는 이를 지켜야 한다.

기준	등급	요구
1.4.1 색의 사용	A	정보를 전하거나, 동작을 알리거나, 반응을 요청하거나, 요소를 구분할 때 색을 유일한 시각적 수단으로 쓰지 않는다.
1.4.3 대비(최소)	AA	글자와 글자 이미지는 대비 4.5:1 이상. 큰 글자는 3:1 이상. 장식, 비활성 요소, 로고의 글자는 예외.
1.4.6 대비(강화)	AAA	글자 7:1, 큰 글자 4.5:1 이상.
1.4.11 비텍스트 대비	AA	버튼·입력칸의 경계, 체크 상태, 초점 표시 같은 사용자 인터페이스 요소와, 이해에 필요한 그래픽(차트의 선, 아이콘)은 인접한 색과 3:1 이상.

"큰 글자"는 18포인트 이상, 또는 굵은 14포인트 이상을 말한다. 웹의 CSS 픽셀로는 대략 24 px 이상, 굵은 글씨는 약 18.7 px 이상이다. 글자가 크고 굵으면 획이 넓어 대비가 조금 낮아도 읽히기 때문이다. 아래에서 크기와 굵기를 바꾸며 요구 기준이 어떻게 바뀌는지 본다.

SIMULATOR

글자 크기와 필요한 대비

글자 크기 글자의 회색 값(대비) 굵게

크기 분류—

필요한 대비(AA)—

판정—

해볼 것: ① 기본값(16 px, 대비 3.5)은 본문 글자로는 기준에 못 미친다. 크기를 24 px까지 올리면 같은 회색이 "통과"로 바뀐다. ② 크기를 19 px에 두고 "굵게"를 켰다 껐다 한다. 굵기만으로 분류가 바뀐다. ③ 대비를 1.5 아래로 내리고 크기를 40 px까지 키운다. 아무리 커도 3:1 아래의 글자는 기준을 통과하지 못한다. 크기는 대비를 대신하지 못한다. (큰 글자 경계는 WCAG의 18pt·굵은 14pt를 CSS 픽셀 24 px·18.7 px로 옮긴 값이다. 글꼴마다 실제 읽힘은 다르다.)

APCA: 다음 기준의 후보, 아직은 참고용 WCAG 2의 대비비는 단순하고 검증하기 쉽지만 약점도 알려져 있다. 어두운 바탕의 밝은 글자와 밝은 바탕의 어두운 글자를 같은 숫자로 취급하고, 중간 밝기의 색끼리의 대비를 실제보다 높게 매기는 경우가 있으며, 글자 크기와 굵기를 "큰 글자" 하나로만 나눈다. 앤드루 서머스(Andrew Somers)가 제안한 APCA(Accessible Perceptual Contrast Algorithm)는 지각 연구를 바탕으로 글자색과 바탕색의 순서를 구분하고, 결과를 Lc라는 값(대략 −108~106)으로 내며, 글자 크기와 굵기에 따라 필요한 값을 달리 정하는 방식이다. 개발 중인 WCAG 3 초안의 후보로 검토되었지만 아직 표준이 아니고, 상수와 권장값도 바뀌어 왔다. 이 책은 APCA를 대비 측정기에 참고값으로만 보여 준다. 실제 프로젝트에서 지켜야 하는 기준은 지금도 WCAG 2의 대비비다.

색에만 기대지 않기

대비를 맞춰도 남는 문제가 있다. 두 상태 점처럼 명도가 비슷한 두 색으로 종류를 나누는 경우다. WCAG 1.4.1의 요구는 간단하다. 색은 써도 되지만, 색이 유일한 단서여서는 안 된다. 색이 하던 일을 함께 맡을 수 있는 통로는 여럿 있다.

그림 3. 색과 함께 쓰는 다섯 통로. 맨 위 줄은 색만으로 "예약 가능"과 "품절"을 나눈 것이다. 아래 줄들은 같은 구분을 글자, 모양, 위치, 패턴(빗금), 밑줄로 함께 전한다. 오른쪽 열은 같은 표시를 제2색각이상 시뮬레이션으로 본 것이다. 색이 무너져도 다른 통로가 남는다. 링크를 본문과 색으로만 구분할 때는 주변 글자와 3:1 이상의 대비와 함께, 초점·마우스 올림 때 밑줄 같은 추가 단서를 주는 방법이 W3C의 기법 문서에 안내되어 있다.

차트는 색에만 기대는 일이 가장 흔한 곳이다. 아래는 책방 E의 일주일 방문자 수를 행사별로 나눈 선 차트다. 처음에는 색 견본 범례만 있다. 확인란을 하나씩 켜서 다른 통로를 더하고, 보기 단추로 제2색각이상 시뮬레이션을 켠다.

SIMULATOR

범례만 있는 차트 고치기

점 모양 다르게(●■▲) 선 모양 다르게(실선·점선) 선 끝에 이름 직접 쓰기

가장 비슷한 두 선의 ΔE—

색 말고 쓰는 단서—

범례를 오가야 하는가—

해볼 것: ① "제2색각"을 누른다. 낭독회(빨강)와 그림책 시간(초록)의 선이 거의 같은 색이 되고, 범례의 견본도 똑같아 보인다. ② "점 모양"과 "선 모양"을 켠다. 색이 같아 보여도 두 선이 갈린다. 흑백 단추를 눌러도 남는다. ③ "이름 직접 쓰기"를 켠다. 범례가 사라지고 눈이 선과 범례 사이를 오갈 필요가 없어진다. 색각과 상관없이 모두에게 더 빨리 읽힌다. (방문자 수는 이 책이 만든 가상의 값이다. 선 색은 흔히 쓰는 빨강·초록·주황이다.)

마지막 단계에서 차트는 색각이상이 없는 사람에게도 더 좋아졌다. 접근성을 위한 수정은 대부분 이렇다. 범례를 오가는 수고, 작은 점의 색을 맞춰 보는 수고는 누구에게나 비용이다. 접근성은 소수를 위한 "추가 기능"이 아니라 정보 디자인의 기본기에 가깝다.

상태 표시는 "글자 + 모양 + 색" 세 겹으로 UI 디자이너들은 성공·경고·오류 같은 상태를 색 하나로 끝내지 않고 세 겹으로 쌓는다. 맨 아래에 글자("품절", "오류: 이메일 형식이 아닙니다")를 두고, 그 위에 모양(체크 표시, 느낌표 삼각형, 빗금)을, 마지막에 색을 얹는다. 색은 가장 빨리 눈에 들어오는 신호지만 가장 쉽게 무너지는 신호이기도 하다. 점검할 때는 화면을 흑백으로 바꿔 보고, 그래도 모든 상태가 구분되는지 본다. 운영체제의 흑백(회색조) 화면 설정이나 브라우저 개발자 도구의 색각이상 에뮬레이션 기능을 쓰면 실제 사이트를 그대로 점검할 수 있다.

구분되는 팔레트 고르기

범주가 여럿인 차트나 지도처럼 색을 여러 개 동시에 써야 할 때는 팔레트 자체를 구분되게 고른다. 이 책의 엔진은 팔레트에서 가장 비슷한 두 색의 색차(Color difference) ΔE2000을 재고, 색각이상 시뮬레이션을 거친 뒤에도 다시 잰다(ART.distinguish). 아래에서 네 가지 팔레트를 비교한다. 오카베 마사타카와 이토 가이(Okabe & Ito, 2002)가 제안한 여덟 색 팔레트는 색각이상에도 구분되도록 고른 팔레트로 널리 쓰인다.

SIMULATOR

팔레트 구분도 검사

심도

최소 ΔE · 원래—

최소 ΔE · 시뮬레이션—

가장 헷갈리는 쌍—

해볼 것: ① "신호등 3색"을 제2색각으로 본다. 빨강과 초록의 색차가 한 자릿수로 떨어진다. ② "같은 명도 6색"을 고른다. 원래는 서로 가장 멀리 떨어진 여섯 색인데, 명도가 모두 같아서 제2색각에서는 어떤 쌍은 거의 같은 색(ΔE 1 남짓)이 된다. 흑백을 켜면 여섯 색이 모두 한 회색이다. ③ "오카베–이토 8색"은 세 종류 모두에서 최소 색차가 10 이상을 지킨다. 비결은 색상만이 아니라 명도도 고르게 벌린 것이다. (색차는 ΔE2000. 이 책은 대략 10 미만을 "주의", 5 미만을 "혼동 위험"으로 표시한다. 이 경계는 이 책의 눈대중이며 표준이 아니다.)

같은 명도 6색이 무너지는 모습은 1장의 HSL 실험과 짝을 이룬다. 그때는 "같아 보여야 할 명도"가 달라서 문제였고, 이번에는 "달라 보여야 할 색"의 명도가 같아서 문제다. 범주를 구분하는 팔레트를 만들 때는 색상과 함께 명도에도 차이를 두고, 그래도 여섯 개를 넘는 범주는 색만으로 구분하려 하지 않는 편이 안전하다. 팔레트를 실제로 짜는 일은 14장에서 이어진다.

회색 복사로 내 자료 점검하기 최근에 만든 발표 자료나 차트 한 장을 골라 흑백(회색조)으로 인쇄하거나 복사한다. 그 종이만 보고 ① 모든 글자가 읽히는지, ② 차트의 계열과 범례를 짝지을 수 있는지, ③ "빨간 글씨는 주의" 같은 색 약속이 아직 전달되는지 확인한다. 안 되는 곳마다 연필로 고칠 방법(글자 추가, 모양, 밑줄, 명도 차이)을 적는다. 수채화를 그린다면 같은 방법으로 그림을 흑백 복사해 명도 구조도 함께 점검해 본다.

종합: 책방 E 예약 화면 고치기

이제 이 장의 도구를 한꺼번에 쓴다. 아래는 책방 E 웹사이트의 낭독회 예약 화면이다. 처음 상태는 서윤이 처음 만든 그대로다. 연한 초록 "예약하기" 버튼, 제목 옆의 색 점 하나로 된 상태 표시, 밑줄 없는 초록 링크. 슬라이더와 확인란으로 고치면서, 아래 점검표의 네 항목이 모두 통과되게 만든다. 보기 단추로 다른 눈의 화면도 확인한다.

SIMULATOR

예약 화면 고치기: 네 가지 점검

버튼 초록의 명도(OKLCH L) 상태에 글자·모양 함께 쓰기 링크에 밑줄

① 버튼 글자 대비(≥4.5)—

② 버튼과 흰 화면(≥3)—

③ 상태 구분(1.4.1)—

④ 링크 구분(1.4.1)—

통과—

해볼 것: ① 처음 상태를 "제2색각"으로 본다. 상태 점 두 개가 같아지고, 버튼 글자는 어떤 보기에서도 흐리다. 점검표는 0/4다. ② 버튼 명도를 내린다. 0.55 아래로 내려가면 흰 글자 대비가 4.5를 넘는다. 서윤의 로고 초록(0.53)과 거의 같은 자리다. 끝까지(0.3) 내리면 대비는 커지지만 초록이 거의 검정이 되어 브랜드 색이 사라진다. 기준을 넘는 범위 안에서 고른다. ③ "상태에 글자·모양"과 "링크에 밑줄"을 켜고 모든 보기를 돌려 본다. 흑백에서도 모든 정보가 남으면 끝이다. (대비는 WCAG 2 공식, 시뮬레이션은 Machado 외 2009 모형. 링크는 본문 글자와의 대비가 3:1 미만이라 밑줄 같은 추가 단서가 필요하다고 판정한다. 버튼 색은 OKLCH 채도 0.094, 색상 162°에서 명도만 바꾼다.)

네 항목이 모두 통과한 화면을 처음 화면과 비교해 보면, 바뀐 것은 생각보다 적다. 버튼이 조금 진해졌고, 상태에 두 글자가 붙었고, 링크에 밑줄이 생겼다. 그런데 이제 그 화면은 흑백 복사로 봐도, 햇빛 아래 휴대폰으로 봐도, 제2색각이상인 손님이 봐도 같은 정보를 전한다. 접근성 기준은 색을 빼앗는 규칙이 아니라, 색이 혼자 지던 짐을 나눠 지게 하는 규칙이다.

명도로 보는 사람에게 배운다 색각이상이 있는 화가와 디자이너는 드물지 않다. 그들 가운데 많은 사람이 물감 튜브의 이름표와 팔레트 위의 자리를 정해 두고, 색을 명도와 온도감으로 기억하는 자기만의 방법을 갖고 있다. 미술 교육자들이 흔히 하는 이야기는, 그런 학생들이 오히려 명도 구조를 빨리 익힌다는 것이다. 색이 흔들리는 대신 밝고 어두움에 기대는 습관이 몸에 배어 있기 때문이다. 디자이너가 화면을 흑백으로 자주 확인하는 습관은 결국 그 방식을 빌려 오는 일이다.

서윤의 작업 노트

CASE 서윤작업 노트 · 13장

"예약하기 버튼이 어디 있는지 한참 찾았어요"

낭독회 예약을 연 지 사흘째, 책방 E의 단골 손님 한 사람이 주인에게 메시지를 보냈다. 자신은 제2색각이상인데, 웹사이트의 "예약하기" 버튼을 한참 찾았고 어떤 책이 품절인지도 알 수 없었다는 내용이었다. 주인은 미안한 마음으로 서윤에게 메시지를 그대로 전했다.

서윤은 이 책의 엔진으로 화면을 다시 쟀다. 버튼은 연한 초록 #6fbf8f 위에 흰 글자였고, 대비가 2.20으로 본문 기준 4.5의 절반에도 못 미쳤다. 색각과 상관없이 모두에게 흐린 버튼이었다. 품절 표시는 책 제목 옆의 작은 빨간 점(#d64545), 예약 가능은 초록 점(#3a9a5b)이었다. 원래 눈으로는 색차 ΔE 64.7로 확연히 달랐지만, 제2색각이상 시뮬레이션에서는 6.9로 떨어져 거의 같은 황갈색이 되었다. 정보가 색 하나에만 실려 있었던 것이다(WCAG 1.4.1).

한도경은 화면을 흑백으로 바꿔 보더니 말했다. "내 제자 중에 적록 색약이 있었는데, 명도 스케치는 반에서 제일 잘했어. 그 친구는 색이 아니라 밝고 어두운 걸로 그림을 읽었거든. 네 화면도 흑백에서 읽히게 만들면 돼." 서윤은 버튼을 1장의 로고 초록 후보 #2f7d5b(흰 글자 대비 4.99)로 진하게 바꾸고, 상태 표시에 글자와 모양을 붙였다. 예약 가능은 초록 동그라미와 "예약 가능", 품절은 회색 #6b6874(흰 바탕 대비 5.44)의 빗금 친 네모와 "품절" 글자. 두 상태는 제2색각 시뮬레이션에서도 색차 13.7로 갈렸고, 무엇보다 글자가 있으니 색을 못 봐도 읽혔다. 링크에는 밑줄을 넣었다.

예전 버튼#6fbf8f · 2.20 새 버튼#2f7d5b · 4.99 품절(회색)#6b6874 · 5.44

이 장에서 정한 것글자와 버튼의 대비는 4.5:1 이상(버튼 #2f7d5b 위 흰 글자 4.99), 버튼·아이콘 같은 비텍스트 요소는 바탕과 3:1 이상. 상태 표시는 색에만 맡기지 않고 글자·모양을 함께 쓴다(예약 가능: 초록 ● + 글자, 품절: 회색 빗금 네모 + 글자). 링크에는 밑줄을 둔다. 모든 화면은 흑백과 제2색각 시뮬레이션으로 한 번씩 확인한다.

아직 남은 문제상태색, 경고색, 배경 톤까지 포함한 웹 팔레트 전체가 아직 없다. 로고 초록이 버튼으로도 쓰이면서 브랜드 색과 기능 색이 섞였다. 행사 달력과 방문자 차트의 색도 정해야 한다.

다음 단계14장: 브랜드 초록의 톤 스케일, 중립색, 상태색을 갖춘 웹 팔레트 v1을 만든다.

핵심 정리

색각이상은 드물지 않다. 적록 색각이상은 북유럽계 남성의 약 8%, 동아시아 남성의 대략 4~6%로 보고되며, 제2색각이상이 가장 흔하다.
색각이상 시뮬레이션(Machado 외 2009 등)은 구분이 어려운 색 쌍을 찾는 도구이지 그 사람이 보는 화면 그대로가 아니다.
WCAG 2 대비비는 두 색의 상대 휘도 비율이다. 본문 글자 4.5:1, 큰 글자(24 px, 굵게 약 18.7 px 이상) 3:1, 버튼 경계·아이콘·차트 선 같은 비텍스트 요소 3:1이 최소 기준이다.
대비는 색상과 채도가 아니라 명도에서 나온다. 선명한 노랑 글자, 같은 명도의 빨강과 초록은 대비가 거의 없다.
APCA는 다음 기준의 후보로 검토되는 참고용 방식이며, 아직 지켜야 하는 기준은 WCAG 2다.
색을 유일한 단서로 쓰지 않는다(WCAG 1.4.1). 글자, 모양, 위치, 패턴, 밑줄을 함께 쓰고, 차트에는 범례 대신 직접 이름을 단다.
범주 팔레트는 색상과 함께 명도도 벌리고, 색각이상 시뮬레이션 뒤의 색차로 구분도를 확인한다.

확인 퀴즈

1. 흰 바탕 위 16 px 본문 글자의 대비가 3.8:1이다. WCAG 2.2의 AA 기준에 대한 판단으로 맞는 것은?

1.4.3은 일반 글자 4.5:1, 큰 글자(18pt 또는 굵은 14pt, 대략 24 px 또는 굵은 18.7 px) 3:1을 요구한다. 7:1은 AAA 기준이다. 대비비는 상대 휘도로만 계산되므로 채도를 높인다고 대비가 생기지 않는다.

2. 쇼핑몰의 재고 표시가 "초록 점 = 재고 있음, 빨간 점 = 품절"뿐이다. 가장 알맞은 고치기는?

WCAG 1.4.1은 색을 유일한 시각적 수단으로 쓰지 말라고 요구한다. 채도를 높이거나 점을 키워도 적록 색각이상에서 두 색은 여전히 비슷하다. 별도 모드보다 모든 사용자에게 같은 화면에서 글자·모양을 함께 주는 편이 단순하고 확실하다.

3. 색각이상 시뮬레이션 도구에 대한 설명으로 가장 알맞은 것은?

Machado 외(2009) 같은 모형은 원뿔세포 감도의 변화를 바탕으로 한 근사다. 심도와 개인차, 경험으로 익힌 구분 방법은 담지 못한다. 종류마다 헷갈리는 색 쌍이 다르므로(제3색각은 파랑–초록 등) 여러 종류를 확인한다.

4. 범주 여섯 개를 구분하는 차트 팔레트를 OKLCH에서 명도·채도를 모두 같게 두고 색상만 60°씩 돌려 만들었다. 가장 먼저 생길 문제는?

색상만 다른 같은 명도의 색들은 흑백에서 한 회색이 되고, 제2색각 시뮬레이션에서는 어떤 쌍의 ΔE가 1 남짓까지 떨어진다(이 장의 팔레트 검사). 명도를 벌리고, 여섯 개가 넘는 범주는 색 말고 다른 단서와 함께 쓴다.