Web Guide색각 이상저시력색상 접근성
색맹·저시력 사용자를 고려한 디자인
빨강과 초록을 구분하기 어려운 사람이 생각보다 많습니다.
색으로만 정보를 전달하면 그 사람들에게는 아무것도 전달되지 않습니다.
01어떤 조합이 문제인가
색각 이상은 여러 유형이 있고, 구분하기 어려운 색 조합도 다릅니다. 가장 흔한 것은 빨강과 초록 계열입니다.
우리에게는 완전히 다른 색이지만, 어떤 사람에게는 비슷한 회색빛으로 보입니다.
01
빨강·초록
가장 흔한 유형. 오류와 성공 표시에 자주 쓰여 문제가 됩니다.
02
파랑·보라
구분이 어려운 경우가 있습니다.
03
밝기가 비슷한 색
색상만 다르고 밝기가 같으면 구분이 어렵습니다.
04
채도가 낮은 색
흐린 색끼리는 더 구분하기 어렵습니다.
05
인접 배치
색이 붙어 있으면 경계가 흐려 보입니다.
02색 외에 다른 단서를 준다
가장 확실한 해결책은 색만으로 구분하지 않는 것입니다. 아이콘, 글자, 패턴, 위치를 함께 쓰면 색을 구분하지 못해도 알 수 있습니다.
이렇게 하면 색을 잘 구분하는 사람에게도 더 명확해집니다.
오류·성공색 + 아이콘 + 문구. '오류: 이메일 형식을 확인해 주세요'.
상태 배지색 + 상태 이름. '진행중', '완료'.
필수 항목빨간 별표 + '(필수)' 글자.
그래프색 + 패턴이나 직접 라벨. 범례만으로는 부족합니다.
링크색 + 밑줄. 색만 다르면 링크인지 모릅니다.
선택 상태색 + 테두리나 체크 표시.
03저시력 고려사항
색 구분과 별개로, 시력이 낮은 사용자는 작은 글자나 낮은 대비를 읽기 어렵습니다. 화면을 확대해서 보는 경우도 많습니다.
확대했을 때 레이아웃이 깨지지 않아야 합니다.
확대 지원 브라우저 확대 기능을 막지 않습니다. 200%까지 써도 깨지지 않게.
글자 크기 조정 사용자가 글자를 키워도 레이아웃이 유지되어야 합니다.
충분한 대비 명도 대비 기준을 충족합니다.
고정 높이 피하기 글자가 커지면 내용이 잘리는 구조를 피합니다.
이미지 속 글자 확대하면 흐려집니다. 텍스트로 제공하는 편이 낫습니다.
04확인하는 방법
색각 이상 시뮬레이션 도구로 우리 화면이 어떻게 보이는지 확인할 수 있습니다. 브라우저 개발자 도구에도 이 기능이 있습니다.
또 화면을 흑백으로 바꿔 보면 색에만 의존하는 부분이 바로 드러납니다.
흑백으로 보기
가장 간단한 확인 방법 · 색을 빼면 구분이 안 되는 부분이 드러남 · 별도 도구 없이 가능
시뮬레이션 도구
유형별로 어떻게 보이는지 확인 · 브라우저 개발자 도구에 내장 · 더 정확한 확인
CHECK POINT
□ 색만으로 정보를 구분하지 않는가
□ 오류와 성공에 아이콘과 문구가 함께 있는가
□ 링크에 밑줄이나 다른 단서가 있는가
□ 그래프에 라벨이나 패턴이 있는가
□ 브라우저 확대를 막지 않았는가
□ 200% 확대해도 레이아웃이 유지되는가
□ 화면을 흑백으로 바꿔 확인했는가
#색각 이상#저시력#색상 접근성#흑백 확인#확대 지원#명도 대비#아이콘 병기#홈페이지 디자인#웹비스타#홈페이지 제작