색상에 관계 없이 인식 가능한 콘텐츠 제공하기

오류  유형으로 살펴보는 웹 접근성 지침

웹 콘텐츠에서 색상은 사용자에게 심미적인 효과를 전달하는 것 외에도 어떤 항목을 강조하거나 다른 항목과 구분하기 위한 목적으로 흔히 사용됩니다. 그런데 어떤 항목을 다른 항목과 구분하기위한 목적으로 색상 정보를 사용하는 경우, 모든 사람이 색상을 분명하게 구분할 수 있지는 않기 때문에 문제가 발생합니다.

우리가 흔히 색맹・색약이라고 부르는 색각 이상 증상을 가진 사람들은 대게 적색과 녹색을 구분하는 데 어려움을 겪습니다.

저시력 사용자는 흰 배경에 적힌 회색 계통의 옅은 글자를 잘 읽을 수 없으며, 밝은 모니터 화면을 장시간 볼 경우 심한 눈의 피로를 느낍니다. 사용자는 이러한 불편을 해소하기 위해 명도대비를 21:1 정도로 극대화화 하여 가독성을 높이는 고대비 테마 또는 회색조 테마를 이용합니다. 이 때 콘텐츠의 색상이 변경되어 본래 색상으로 전달하려던 정보가 사라지게 됩니다.

이번 글에서는 이와 같은 상황을 고려하여, 색상에 관계 없이 콘텐츠를 이해할 수 있도록 표현하는 방법에 대해 알아보겠습니다.

차트 범례를 색상 만으로 구분한 경우

여러 유형의 데이터를 시각화 하여 표현한 차트에서 각 데이터를 구분하기 위한 기준으로 색상을 활용하는 경우가 많습니다. 이 때, 범례를 색상으로만 구분하게 되면 특정한 상황이나 환경에서는 차트에 표현된 수가 무엇을 의미하는 지 알 수 없습니다.

Do Not

범례를 색상으로만 구분하여 표시한 차트

< 일반 모드>

< 고대비 모드 >

일반 모드에서는 범례의 색상에 따라 수치가 매칭되어서 구분할 수 있지만, 고대비 모드에서는 범례를 색상으로 구분하기 어렵게 되어 명도의 대비가 뚜렷한 '업무' 범례를 제외하고 나머지 범례의 수치를 알기 어렵습니다.

Do

범례를 시각화된 데이터와 연결지어 표시한 차트

< 일반 모드 >

< 고대비 모드 >

위 사례는 범례를 색상으로 구분한 것이 아니기 때문에 일반 모드와 고대비 모드에서 모두 범례를 구분하는 것이 가능해졌습니다.

선택/활성화 상태를 색상만으로 구분한 경우

색상은 사용자 인터페이스의 여러 가지 상태를 구분하기 위한 표현 수단으로도 자주 쓰입니다.

다음으로는 명도대비, 크기, 형태 등 다른 표현 없이 색상만으로 상태를 구분했을 때 발생할 수 있는 문제와 해결 방안에 대해 살펴보도록 하겠습니다.

Do Not

현재 활성화된 페이지를 색상으로만 구분한 페이지네이션

< 일반 모드 >

< 고대비 모드 >

페이지 활성화 여부에 대한 구분을 색상만으로 한 경우, 고대비 모드를 적용하여 보면 구분이 어렵게 되어 현재 활성화된 페이지가 몇 번재 페이지인지 알 수가 없습니다.

Do

현재 활성화된 페이지를 도형과 색상을 혼합하여 구분한 페이지네이션

< 일반 모드 >

< 고대비 모드 >

도형과 색상을 혼합하여 현재 활성화된 페이지 링크를 비활성화된 페이지의 링크와 명확하게 구분이 되게 하면 일반 모드와 고대비 모드에서 모두 현재 탐색 중인 페이지를 구분할 수 있습니다.

요약

범례를 직접적으로 연결지어 정보를 제공하거나, 모양을 다르게 하는 등 색상에 관계 없이 인식 가능한 콘텐츠를 제공하면 색각 이상 증상을 갖고 있는 사람들뿐만 아니라, 그렇지 않은 사람들 모두에게 시인성 높은 정보를 전달할 수 있습니다. 그 결과로 사용자는 콘텐츠를 더 빠르게 정확하게 이해할 수 있습니다.