색상을 구분 하지 못하는 사용자도 있습니다. 그러니 색상만 이용해서 정보를 전달하면 안 됩니다.
색상 안에 패턴을 넣어서 패턴을 보고도 정보를 이해할 수 있도록 만들어야 합니다.
기술설명
이 기술의 목적은 텍스트가 아닌 콘텐츠 내에서 정보를 전달하기 위해 색상 차이를 사용하는 경우, 색상에 의존하지 않고도 동일하게 정보를 전달하기 위해 패턴을 적용시키는 것입니다.
예시
[예시1] 미국의 부동산 사이트에서 여러 지역의 평균 주택 가격에 대한 막대그래프를 제공하고 있습니다.
각각의 막대는 서로다른 단색과 패턴으로 표시 되어있습니다.
범례에서는 동일한 색상과 패턴으로 각 막대를 식별할 수 있게 정보를 제공합니다.
[예시2] 교통 시스템을 온라인 지도에서 보여주는 서비스입니다. 각 경로가 서로 다른 색상으로 표시됩니다.
각 경로의 정류장은 다이아몬드, 사각형, 원형과 같은 고유한 모양으로 표시되어 있어 각 경로를 구별하는데 도움이 됩니다.
[예시3] 순서도는 프로세스 과정을 설명하기 위한 것입니다.
끝에 화살표가 있는 녹색 파선은 조건을 만족 할 때 가야 프로세스를 가리킵니다.
끝에 화살표가 있는 빨간색 점선은 조건을 만족 못했을 때 가야할 프로세스를 가리킵니다.
[예시4] 콘텐츠에 인터랙티브 게임이 포함되어 있습니다.
4명의 플레이어를 위해 게임에 조각은 색상과 패턴을 사용하여 서로 구별되어 보이게 했습니다.
점검절차
웹 페이지 내에서 색상 차이를 이용하여 정보를 전달하는 이미지가 있는 경우
1. 색상을 이용해서 정보를 전달하는 경우, 색상에 의존하지 않는 패턴을 사용하여 정보를 전달하는지 확인합니다.
나의 정리
도표나 이미지 같은 콘텐츠에서 색상으로 정보를 전달하는 경우가 있습니다.
예를 들어 막대 그래프의 경우, 여러 막대 들을 구분하기 위해 막대 마다 다른 색을 적용하는 경우가 있습니다.
이렇게 색상으로 뭔가를 구분하게 하는 경우, 색상 말고도 서로 다른 패턴을 주어서 구분할 수 있게 해야 합니다.
즉 색상 정보 말고도 다른 것을 이용하여 동일하게 구분할 수 있게 만들어야 한다는 것입니다.
(= 색상에 의존하지 않고도 동일하게 정보를 전달받을 수 있는 패턴을 추가해서 사용해야 한다 )
그 방법이 패턴입니다. 이렇게 하는 이유는 색상을 인지 하지 못하는 사용자를 위한 배려 입니다.
예를 들어 자세히 알아봅시다.
자동차 판매량을 보여주는 막대그래프가 있습니다.
빨간색 막대는 작년 판매량이고 파란색 막대는 올해 판매량을 의미합니다.
이 그래프를 '색을 구별하지 못하는 장애를 가진 사용자'가 본다면 어떨까요? 색상을 구별하지 못하기 때문에 작년과 올해 판매량을 구분해서 볼 수가 없습니다. 그래서 색상뿐만 아니라 색상안에 패턴을 넣어 구분지어 주어야 합니다.
빨간색 막대에는 가로선 패턴을 넣어주고 파란색 막대에 세로선 패턴을 넣어 주는 것입니다.
이렇게 하면 색상뿐만 아니라 배턴을 보고도 구분 할 수 있게 되는 것이다.
그리고 막대 그래프의 범주에도 동일하게 '빨간색에 가로 패턴이 작년 팔매량', '파란색에 세로 패턴이 올해 판매량'이라고 지정해 주어야 합니다.
색상을 구분 하지 못하는 사용자도 있습니다. 그러니 색상만 이용해서 정보를 전달하면 안 됩니다.
색상 안에 패턴을 넣어서 패턴을 보고도 정보를 이해할 수 있도록 만들어야 합니다.
G111: Using color and pattern
https://www.w3.org/TR/2016/NOTE-WCAG20-TECHS-20161007/G111.html
G111: Using color and pattern | Techniques for WCAG 2.0
An on-line map of a transportation system displays each route in a different color. The stops on each route are marked with a distinctive icon such as a diamond, square, or circle to help differentiate each route.
www.w3.org
