11장 색을 빼면 남는 것
화면에서 보이는 대로
색으로만 알리는 현황판
3월 15일 예약 현황
10:00
13:00
16:00
글자를 함께 넣은 현황판
3월 15일 예약 현황
10:00여유
13:00마감 임박
16:00마감
색을 걷어낸 화면
색으로만 알리는 현황판
3월 15일 예약 현황
10:00
13:00
16:00
글자를 함께 넣은 현황판
3월 15일 예약 현황
10:00여유
13:00마감 임박
16:00마감
색으로만 알리는 현황판은 어느 점이 여유이고 마감인지 알 수 없다
글자를 함께 넣은 현황판은 그대로 읽힌다
「색으로만 알리는 현황판」이 의도적으로 잘못 만든 교보재입니다. 자리 상태를 초록, 노랑, 빨강 점으로만 알립니다. 색을 구별하기 어려운 사용자에게는 점이 보이더라도 그것이 무엇을 뜻하는지 알 방법이 없습니다.
「색을 걷어낸 화면」은 마크업이 「화면에서 보이는 대로」와 한 글자도 다르지 않습니다. CSS 필터로 색만 걷어냈습니다. 그런데 색으로만 알리는 현황판은 정보가 통째로 사라지고, 글자를 함께 넣은 현황판은 그대로 읽힙니다. 색은 정보를 거드는 데는 좋지만 혼자 정보를 지고 있으면 안 된다는 뜻입니다(WCAG 1.4.1 색의 사용).
여러분의 화면에서도 같은 실험을 할 수 있습니다. 크롬 개발자도구의 렌더링 패널에서 색각 이상을 흉내 내거나, 화면을 회색조로 두고 스크린샷을 찍어보세요. 그때 무엇을 잃는지가 곧 고칠 목록입니다. 책 11장에서 다룹니다.