어도비 컬러와 함께 기념하는 세계 접근성 인식의 날

다양한 색상을 고려하며 디자인 작업을 하고 있는 모습

매크로백터(Macrovector) / 어도비 스톡(Adobe Stock)

이 글은 어도비 헵 스바자(Hep Svadja)의 글을 한국어로 번역한 것입니다.

접근성을 위한 도구 구축

색각 이상을 가진 사용자를 위한 색 상환 이미지

Petrroudny / 어도비 스톡

5월 21일은 세계 접근성 인식의 날(Global Accessibility Awareness Day) 입니다. 하지만 어도비 컬러(Adobe Color)는 1년 365일 접근성 개선을 고민하고 있습니다. 일반적으로 색맹이라고 하는 색각 이상은 전 세계 인구의 3-5%가 가지고 있습니다. 여기에 대비 민감도와 노인 시력 감퇴, 그 외의 다른 요인을 함께 고려한다면, 접근성을 위해 시각 디자인의 도움이 필요한 인구는 더욱 증가합니다.

컬러 디자인 작업 시에는 처음부터 디자인 접근성을 고려하는 것이 좋습니다. 사용자가 색상을 어떻게 인식하는지 먼저 고려한다면 이 작업에 필요한 시간을 절약할 수 있습니다. 그러나 아직도 컬러 구상 단계 이후에 접근성을 고려하는 경우가 많습니다. 결과적으로 디자인 컨셉에 어울리는 새로운 색조를 찾기 위해 다시 컬러 보드로 돌아가는 등의 반복 작업이 따라오게 되죠. 어도비 컬러는 디자이너가 언제 어디에서 접근성을 검사하는지 고려해 디자인 과정에 색상환을 직접 도입하고 있습니다.

충돌선

색맹인 사람들은 특정 조합의 색상과 음영을 구별하기 어렵습니다. 어도비 컬러의 새로운 접근성 도구를 사용하면, 가장 일반적인 세 가지 색맹 유형인 녹색맹과 적색맹, 청황 색맹을 고려한 컬러 테마를 확인할 수 있습니다. 녹색맹 또는 적색맹인 사람들은 빨강과 초록, 갈색, 주황색을 구별하는데 어려움을 겪습니다. 청황 색맹은 파랑과 초록, 보라, 빨강, 노랑, 분홍을 구별하기 어려워 합니다. 접근성을 지원하는 색상환은 위 세 가지 색맹 유형에서 각 색상이 어떻게 보여지는지 컬러 테마 시뮬레이션을 지원합니다.

색 상환을 이용할 때 색상 조합에 문제가 발견되면 나타나는 충돌선 모습

색상환를 사용할 때 색상 조합에 문제가 발견되면 충돌선이 나타나 색맹이 있는 사용자가 어떤 색상을 구분할 수 없는지 보여줍니다. 이를 통해 모든 사용자가 구별할 수 있는 다섯 가지의 색상 견본을 제공해 컬러 팔레트를 만들 수 있습니다.

충돌선은 적어도 한 가지 색맹 유형이 구분하지 못하는 두 가지의 색상 견본을 보여줍니다. 색상 슬라이더 아래에 있는 시뮬레이터를 통해 세 가지 색맹 유형 중 가장 심각한 형태를 가진 사람들에게 적용할 수 있는 컬러 팔레트를 구성해보세요.

충돌 가이드

어떤 견본에 문제가 있는지 확인했으니 이제 슬라이더 또는 충돌 가이드의 새로운 색상환을 이용해 문제를 쉽게 해결할 수 있습니다. 충돌 가이드는 견본을 한 번 클릭하면 색상환 위에 나타납니다. 클릭을 하고 있는 동안 견본 위에 표시되는 (각 색맹 유형을 나타내는) 세 개의 안내선이 해당 색상과의 조합 문제를 미리 방지할 수 있습니다. 이 가이드는 다른 색상 견본과 충돌하지 않는 컬러를 찾을 수 있도록 도와줍니다. 이때 다른 충돌을 피하기 위해 명도 슬라이더를 조정할 수 있습니다.

새로운 색상환을 이용해 색상 조합의 문제를 미리 방지할 수 있도록 도와주는 충돌 가이드 모습

접근성 도구에서 다른 충돌 없이 테마를 저장하면, 해당 테마에 자동으로 태그가 지정되고 접근성 도구로 생성된 것을 인증하는 배지가 표시됩니다. 이를 통해 라이브러리에서 검색 시 색상에 충돌이 없는 테마를 빠르게 찾을 수 있습니다.

접근성 지원 도구 구축

어도비는 접근성을 위한 도구 설계 뿐만 아니라 도구에 얼마나 쉽게 접근할 수 있는지도 함께 고민하고 있습니다. 어도비 컬러 웹 사이트는 완벽한 반응형 웹사이트로 설계되어 다양한 기기에서 쉽고 편리하게 사용할 수 있습니다.

휠체어를 탄 사람이 컴퓨터로 일하는 모습

Golden Sikorka / 어도비 스톡

접근성 기술을 사용해 웹 콘텐츠를 탐색하는 것이 불편한 경우도 있죠. 이에 어도비는 모바일 사용자를 위해 다양한 화면 크기에서 완벽한 사용자 경험을 제공하는 반응형 웹 사이트를 만들었습니다. 슬라이더와 색상 필드는 키보드 방향키로 간편하게 조정할 수 있도록 변경되었습니다. 이제 모든 크리에이티브 환경에서 탭 탐색을 사용할 수 있습니다. 또한 스크린 리더 소프트웨어를 사용해 어도비 컬러의 크리에이티브 툴을 방문하는 사용자가 각 섹션을 검색해야 하는 번거로움을 줄여 사용자의 작업 흐름을 향상시켰습니다. 스크린 리더 또는 기기 접근성을 사용해 어도비 컬러를 방문한다면, 여러분의 경험과 개선해야하는 점에 대해 여러분의 의견을 어도비 컬러 팀에게 알려주세요.

다음 단계는?

어도비는 접근성을 위한 다음 단계로 텍스트와 그래픽 요소에 색 대조 기능을 개발 중에 있습니다. 또한 단색 및 다른 색상 감도를 고려한 테마 디자인을 만드는 데 도움이 될 워크 플로우도 함께 준비 중입니다.

많은 사람들이 모여 웹 사이트에 문제가 없는 지 살펴보는 모습

Aurielaki / 어도비 스톡

#MadeWithAdobeColor

여러분의 멋진 작품을 하루 빨리 만나볼 수 있기를 고대합니다. 어도비와 계속 함께 해주세요!

비핸스(Behance)에서 작품을 공유할 때 ‘사용한 툴(Tools Used)’에서 어도비 컬러를 선택해주세요. 여러분의 멋진 작품을 더 널리 알릴 수 있답니다. 소셜 미디어에 올릴 때 #AdobeColor 태그도 잊지 마세요.

크리에이티브 클라우드 소셜 채널(페이스북, 트위터, 인스타그램)과 어도비 드로잉 인스타그램을 팔로우하고 어도비의 소식을 더 빨리 만나보세요.