널리

저시력 및 색각 이상자를 위한 웹접근성 가이드 - 색에 무관한 콘텐츠 인식

안녕하세요. 엔비전스입니다.

웹페이지를 제작할 때 시각적인 레이아웃과 디자인은 매우 중요한 요소 중 하나입니다. 그러나 접근성을 고려하여 웹페이지의 시각적 레이아웃을 설계하는 것은 쉬운 일이 아닙니다.
특히 콘텐츠 내용 이해에 있어 색깔이 중요한 부분일 경우 일부 저시력인과 색각 이상을 가지고 있는 사용자 등이 내용을 파악하기 어려울 수 있습니다.
색각이상은 크게 3원색 중 특정 색상을 완전히 감지하지 못하는 색맹과 색을 감지할 수는 있지만 수용체에 문제가 있어 다르게 보이는 색약으로 구분할 수 있습니다.

그리하여 이번 글에서 국내 웹접근성 평가에 표준으로 사용되는 KWCAG 한국형 웹 콘텐츠 접근성 지침 2.1를 중심으로 저시력 및 색각 이상자를 위한 콘텐츠 제작 방법을 알아보겠습니다.
이 글을 통해 저시력 및 색각 이상자를 고려한 웹페이지 콘텐츠 제작에 대한 대안을 함께 고민해보는 시간이 되었으면 좋겠습니다.

5.3. 명료성 > 5.3.1. (색에 무관한 콘텐츠 인식) 콘텐츠는 색에 관계없이 인식될 수 있어야 한다.

콘텐츠에서 제공하는 모든 정보는 특정한 색을 구별할 수 없는 사용자, 흑백 디스플레이 사용자, 흑백 인쇄물을 보는 사용자 및 고대비 모드 사용자가 인식할 수 있도록 제공해야 한다.

1. 색에 의한 정보 표현 방지 : 차트나 그래프 등을 고대비 모드로 화면에 표시하면 모든 색이 단색(회색조)으로 표시되어 사용자가 색을 구분하지 못하는 경우가 발생한다. 따라서 사용자가 경조 모드에서도 콘텐츠를 인식할 수 있도록 색을 이용하여 정보를 제공하지 않아야 한다. 즉, 색은 시각적인 강조를 위해서만 사용해야 한다.
2. 무늬를 이용한 정보 제공 : 서로 다른 정보를 무늬로 구분하여 표시하면 경조 모드 사용자, 단색 디스플레이 사용자, 흑백 인쇄물의 사용자도 충분히 정보를 구분할 수 있다. 무늬와 색을 동시에 이용한 콘텐츠는 색각 장애가 있는 사용자도 접근이 가능하다.

검사 항목 5.3.1 절을 준수함으로써 얻을 수 있는 기대 효과는 다음과 같다.

1. 색의 차이가 정보의 다름을 나타내지 않으므로 색을 인지하는 데 장애가 있는 사용자도 혼동을 일으킬 염려가 없게 된다.
2. 흑백 스크린(구형 PDA 등) 또는 고대비 모드 사용자들도 콘텐츠의 내용이나 구조를 손쉽게 이해할 수 있다.

시각적 접근성을 가지기 위해서는 항목과 수치를 명확히 구분할 수 있도록 표현하는 것이 중요합니다.
색으로는 구분할 수 없더라도 모양과 위치로 내용을 인식할 수 있다면 접근성 문제가 해결됩니다.
위 지침을 참고하여 색으로만 내용을 이해할 수 밖에 없는 콘텐츠의 접근성 개선 방안의 구체적 예시를 몇 가지 살펴보겠습니다.

예시 1

[인식 불가능한 그래프 예시]
일반적인 막대 그래프입니다. 예시에서는 과일 항목에 따라 색상으로 구분된 연도별 수치를 나타내고 있습니다.


[흑백 상태의 인식 불가능한 그래프]
색을 없애고 흑백으로 바꾼 그래프입니다. 과일 항목에 해당하는 색을 찾아 그 수치를 확인하기 매우 어렵습니다.




[인식 가능한 그래프]
항목을 수치와 함께 표시하는 것만으로도 문제를 해결할 수 있습니다. 색을 구분할 수 없는 환경에서도 각각의 항목과 수치를 이해할 수 있습니다.

예시 2

[인식 불가능한 그래프 예시]
과일 항목별로 각각의 퍼센트를 표시하는 원형 그래프입니다.


[흑백 상태의 인식 불가능한 그래프]
흑백으로 바꾼 그래프입니다. 각각의 과일 항목에 해당하는 비율을 확인하기 어렵습니다.




[인식 가능한 그래프]
항목과 퍼센트를 함께 나타내면 수치만으로도 비율을 짐작할 수 있으므로 접근성을 고려했다고 볼 수 있습니다.

예시 3

[인식 불가능한 양식 예시]
빨간색 테두리 선으로 필수 입력 항목을 확인하도록 만들어진 양식입니다.


[흑백 상태의 인식 불가능한 양식]
흑백에서는 어느 항목이 필수 입력을 요구하는지 알 수 없습니다.




[인식 가능한 양식]
항목에 * 등의 별도 표시를 하고 명확한 오류 메시지를 표시하여 필수 입력을 구분하도록 개선하면 문제를 해결할 수 있습니다.

예시 4

[인식 불가능한 단계 표시 예시]
주문서나 신청 양식에서 많이 사용하는 단계 표시의 예시입니다. 녹색으로 현재 2단계를 가리키고 있음을 알 수 있습니다.


[흑백 상태의 인식 불가능한 단계 표시]
색상 차이로만 위치를 구분하였으므로 흑백 상태에서는 어느 단계인지 알기 어렵습니다.




[인식 가능한 단계 표시]
필요한 경우, 색 대비를 높게 구성하고 글자를 다르게(밑줄 등) 표시하여 구분하는 것도 대안이 될 수 있습니다.

예시 5

[인식 불가능한 달력 일정 예시]
색상만으로 달력에 계획을 표시하였습니다.


[흑백 상태의 인식 불가능한 달력 일정]
색상 차이로만 계획을 구분하였으므로 흑백 상태에서는 어느 요일의 계획인지 알기 어렵습니다.




[인식 가능한 달력 일정]
개선된 예시 처럼 계획 항목별 모양을 네모, 동그라미, 삼각형 등으로 표시하면 흑백 상태에서도 구분이 가능할 것입니다.

제작한 콘텐츠가 색으로만 인식되는 부분을 포함하는지 판단이 어렵다면 해당 영역을 캡처하거나 접근성 진단 도구 등을 이용하여 흑백 그레이스케일로 변경 후 내용을 확인해 본다면 색에 무관한 콘텐츠인지 확인하는 데 도움이 될 수 있습니다.

마지막으로 색각이상에 대한 좀 더 상세한 이해를 돕고자 참고 링크로 이번 아티클을 마무리하겠습니다.

감사합니다.