모두를 위한 웹 디자인이란? 시각적 웹 접근성 A to Z
시각적 웹 접근성은 무엇이며 왜 지켜야 할까
여러분들은 ‘웹 접근성‘에 대해 아시나요? 웹 접근성이란 장애를 가진 사람을 포함해 모든 사람이 웹 콘텐츠에 쉽게 접근하고 사용할 수 있도록 보장하는 개념인데요. 특히 색각 이상자(색맹)의 경우, 웹 콘텐츠를 제대로 보기 어려운 경우가 있습니다.
이들은 특정 색상을 구분하기 어렵기 때문에, 녹색과 적색 또는 청색과 황색의 조합에서 혼동을 겪습니다. 특히 세계 인구의 약 3~8%가 색각 이상자인 만큼 적지 않은 사용자들이 웹 콘텐츠 접근에 어려움을 겪고 있다는 것이죠. 하지만 시각적 웹 접근성 도구를 사용하면 색각 이상자도 웹 내용을 더욱 쉽게 구별할 수 있습니다.
1999년 ‘W3C(월드 와이드 웹 컨소시엄)‘에서 처음으로 제안된 웹 접근성은 단순한 기술적 접근뿐만 아니라 모든 사람이 웹을 인식하고 이해하며 상호작용할 수 있도록 기여하는 것을 목표로 합니다. 때문에 오늘날 많은 기업이 에이전시와 디자이너들에게 웹 접근성을 요구하고 있습니다.
심지어 국내의 경우 웹 접근성은 선택이 아닌 필수입니다. 한국에선 2007년 장애인 차별 금지법이 제정되었고, 이 법에 따라 웹 접근성은 법적 의무가 됐습니다. 현재 정부도 웹 접근성 지침(KWCAG)을 마련하여 모든 웹 사이트가 장애인과 고령자도 비장애인과 동등하게 웹 정보를 이용할 수 있도록 권고하고 있죠.
그렇다면 현재 웹사이트들은 이런 웹 접근성을 잘 지키고 있을까요? 또 어떻게 하면 웹 접근성 지침을 잘 지키면서 디자인할 수 있을까요? 이번 글에선 디자인 전문 에이전시 이모션글로벌이 웹 접근성의 중에서도 시각적 웹 접근성에 관해서 자세히 알아봅니다.
왜 시각적 웹 접근성이 적용돼야 할까?
웹 사이트에서 컬러가 웹 접근성에 맞게 적용되어야 하는 이유는 무엇일까요? 바로 위에서 언급한 대로 색각 이상자들이 웹 콘텐츠를 제대로 볼 수 있도록 하기 위함입니다. 실제 색각 이상자들에게 가장 보편적인 문제는 색상 자체보다는 사이트의 색 대비에서 오는 일이 많습니다. 때문에 특정 색상을 사용한다고 해서 무조건 색각 이상자들이 보기 어려운 사이트가 되는 것은 아닙니다.
그러나 사이트가 적절한 색 대비율(배경 색 대비 텍스트 색)을 가지고 있지 않은 경우, 사이트의 정보를 보거나 이해하기가 더 어려울 수 있습니다. 실제 비영리단체 WebAIM가 지난 2019년과 2020년에 상위 100만 개의 홈페이지에서 나타나는 접근성 문제를 다룬 보고서를 냈는데, 2020년 2월에 분석한 홈페이지 중 86.3%는 대비가 부족한 것으로 나타났습니다.
시간이 많이 흐른 지금은 조금 달라졌을 수 있지만, 여전히 색채 대비가 부족한 사이트가 대다수이죠. 그렇다면 이것은 어떤 의미일까요? 해당 사이트들의 정보가 모두에게 공정하게 전달되고 있지 않다는 것을 의미하는 것입니다.
동시에 이는 사이트 중 80%가 넘는 수의 사이트가 매일 전 세계 수십억 명의 사용자에게 불평등한 사용자 경험을 제공하고, 이들을 놓치고 있다는 말이 되는데요. 때문에 오늘날 시각적 웹 접근성은 더욱 많은 사이트에 보편적으로 적용이 필요한 개념입니다.
최신 WCAG 2.2의 고대비 모드
물론 그동안 웹 접근성은 지속적으로 언급되어 왔지만, 재작년에 이뤄진 새로운 WCAG 2.2 발표 이후, 웹 접근성은 현재 그 어느 때보다 더 많은 관심을 받고 있는 중입니다. 그런데 WCAG는 무엇이고 2.2 버전은 또 뭘까요?
먼저 ‘WCAG(Web Content Accessibility Guidelines, 웹 콘텐츠 접근성 지침)’은 W3C의 웹 접근성 표준 그룹에서 게시한 권장 사항을 뜻합니다. 쉽게 말해 웹사이트가 다양한 수준의 접근성을 달성하기 위한 공식 요건을 제시하고 있는 것이죠.
또한 2.2의 경우 새롭게 업데이트된 웹 콘텐츠 접근성 지침 버전을 말하는데요. WCAG 2.2의 여러 항목 중, 시각적 부분에 관련된 대표적인 항목은 ‘고대비 모드(high contrast)’입니다.
이 고대비 모드는 전경과 배경 간의 명도 대비를 강조하여 표시하는 것으로 해당 항목을 더욱 뚜렷하게 식별할 수 있도록 도와줍니다. 또한 검은색 배경에 하얀색으로 텍스트를 표시하는 경우와 같이 명도 대비 또는 색상 대비가 큰 차이가 나도록 조정하여 화면에 표시하는 방식을 ‘경조(硬調)’ 모드라고 하며, 최신 운영 체제에선 기본적으로 이 기능을 지원하고 있습니다.
이렇게 WCAG 지침이 업데이트됨에 따라 각 회사의 웹 디자인 팀은 접근성을 새롭게 고려해야 합니다. 그 어느 때보다 접근성이 뛰어난 웹사이트를 만들고, 그에 따른 각각의 페이지를 잘 디자인해야 하는 상황입니다. 참고로 2025년 12월 기준 최신 버전은 2.2 버전이며, 3.0 버전은 아직 초안(Draft) 단계에 머물고 있습니다.
웹 접근성 개념과 실제 적정 예시
물론 웹 접근성에 대해 정보가 필요해 WCAG 사이트에 방문해도, 내용이 정리돼 있지 않고 단순히 많은 정보만 나열돼 있어서 이해하기 어려울 수 있습니다. 이에 WCAG에 게재된 웹 접근성의 내용에 대해 더 쉽게 이해할 수 있도록 WCAG 사이트에 쓰여 있는 개념을 정리하고, 웹 접근성 요소 중 색 대비가 잘 적용된 예시도 설명해드리겠습니다.
WCAG의 적합성 수준이란?
먼저, WCAG의 적합성 수준은 Level A, AA, AAA로 나뉩니다. Level A는 가장 기본적인 접근성 성공 기준이 포함되어 있습니다. 기본적인 만큼 Level A에 해당하는 성공 기준을 만족하지 않으면 다양한 유형의 사용자가 해당 웹 페이지를 전혀 사용할 수 없습니다.
Level AA는 Level A처럼 준수하지 않았을 때 전혀 사용할 수 없는 수준은 아니지만, 다양한 유형의 사용자가 동등하게 웹 페이지를 사용하기 위해 꼭 필요한 성공 기준을 포함합니다. 일반적으로 웹 페이지의 접근성 요구 사항(VPAT)은 Level AA를 만족해야 합니다.
마지막 Level AAA는 WCAG가 규정하는 가장 높은 수준의 접근성 기준을 만족하기 위한 성공 기준을 포함합니다.
웹 접근성을 위한 명암비 지침과 적절한 텍스트 명도 대비 예시
앞서 WCAG의 적합성 수준에 대해 이해했다면, 이제 WCAG에서 권장하는 명암비 규정에 대해 알아야 할 때입니다. WCAG는 모든 사용자가 정보를 쉽게 인식할 수 있도록 색상 간 대비를 규정합니다.
위 이미지는 일반 텍스트 명도 대비 4.5:1 정도 되면 접근성 적합으로 보여주는 예시입니다. 위쪽은 명도 대비가 적합한 예시, 아래쪽은 명도 대비가 적합하지 않은 예시입니다. 한 눈에 봐도 텍스트의 명시성이 다른데요. 아랫부분은 디자인적으로는 괜찮을 수도 있지만, 대비가 뚜렷하지 않아서 색각 이상자들이 이용하기 어렵게 됩니다.
색각이상을 위한 색상 사용 예시
색각 이상자를 위해서 빨간색과 초록색의 채도 변경으로 색상 구분이 쉬워진 예시입니다. 색각 이상자의 시선으로 볼 때, 색상 사용과 더불어 아이콘을 같이 기재해 주어 색각 이상자의 인지력을 높일 수 있습니다.
처음 앞쪽의 이미지를 보시면 빨강과 초록색을 각각 주황과 청록색으로 채도를 변경해 주고 있습니다. 채도 변경을 한 결과는 바로 옆의 적색맹, 녹색맹 시야의 컬러로 확인 시 확인할 수 있습니다.
기본 빨강과 초록은 채도가 같기 때문에 적색맹과 녹색맹이 보기에는 색 구분이 어렵습니다. 하지만 주황과 청록색으로 채도를 변경하면 채도 차이가 뚜렷해져 세 가지 색상의 차이를 구별할 수 있게 됩니다.
명암비 체크, 도구를 이용하자
그렇다면 명암비는 어떻게 체크하면 좋을까요? 명암비는 접근성을 위한 중요한 기준 중 하나입니다. 이를 빠르고 정확하게 측정할 수 있는 다양한 도구로써 아래 사이트들의 도구들을 이용하면 좋습니다.
추천 명암비 체크 사이트
사이트로 웹접근성 명도대비 검사 도구
어도비 익스프레스-어도비 컬러
Contrast-Finder
색각 이상자들이 보는 콘텐츠의 모습과 이모션글로벌의 시각적 웹 접근성
때로는 문자를 사용해 이론적으로 설명하는 것보다, 실제로 어떻게 보이는지 직접 눈으로 확인하면 더욱 확실히 알 수 있는 경우도 있습니다. 이번 웹 접근성 사례 또한 마찬가지인데요.
이에 이모션글로벌에서 운영 중인 T 다이렉트샵 홈페이지와 티다문구점 홈페이지들을 토대로 색각 이상자들이 보는 콘텐츠의 모습은 어떤지 살펴보면서 홈페이지는 물론, 페이지들이 사용 중인 배너들을 토대로 명암비가 잘 적용돼 있는지 짚어보겠습니다.
T 다이렉트샵
먼저 T 다이렉트샵의 사이트 이미지입니다. 정상적인 색채 시각을 가진 사람이 볼 때 사이트는 위와 같이 보입니다.
위의 세 이미지는 각각 적색맹, 녹색맹, 청색맹의 시선에서 보이는 사이트입니다. 각 배너마다 명암비가 잘 적용되어 있어 각각의 색각 이상자들이 보는 색상은 다르지만, 콘텐츠에 있는 텍스트와 정보가 명확히 확인이 가능함을 알 수 있습니다.
티다문구점
각각 정상적인 색채 시각을 가진 사람이 보는 티다문구점 사이트의 모습과 적색약·녹색약·청색약을 가진 사람들이 보는 티다문구점 사이트입니다.
티다문구점의 사이트 구조 자체가 큰 타이포그래피와 명확한 구조로 중요한 내용을 강조하고 있어 색각 이상을 가진 사람들에게도 정보 전달을 정확히 할 수 있습니다. 실제 사이트에 색각 이상자들의 시선을 적용해 보면 웹 접근성의 시각적 부분에 대한 중요성을 절실히 느낄 수 있습니다.
일반 시각에서는 확인하기 어렵지만 색맹 시뮬레이터와 같은 도구를 이용하여 본인의 디자인 콘텐츠가 좀 더 많은 사람들에게 명확히 보이도록 만들 수 있습니다.
실제 배너에 적용된 명암비
먼저 T 다이렉트샵 홈페이지에 있는 메인 배너입니다. 가운데 부분에 그라데이션이 적용되어 있어 조금 밝아 보일 수 있는데요. 하지만 동시에 흰색에 가까운 텍스트들을 이용해 명암비가 약 12:1로 적용되어 있는 모습을 찾아볼 수 있습니다.
두 번째로 볼 배너는 티다문구점의 메인 배너입니다. 해당 배너는 모두 텍스트를 #FFFFFF, 즉 흰색의 텍스트를 이용합니다. 그렇기 때문에 명시성을 유지하기 위해 배너 디자인 시에 유의하고 있는데요. 명암비는 약 5:1로 적합성 Level AA로 판명됩니다.
마지막으로 티다문구점 사이트의 Digital 메뉴 안에 적용된 배너입니다. 밝은 노란색 컬러 배경에 #000000, 즉 블랙 컬러 텍스트가 적용되어 있어 뚜렷하게 보입니다. 명암비 약 15:1로 적합성 Level AAA입니다.
명암비가 적용된 사이트는 색각 이상자에게 어떻게 보일까? 이렇게 각 콘텐츠에 명암비가 웹 접근성 지침에 맞게 잘 설정되어 있다면, 전체 사이트는 실제로 색각 이상자들에게 어떤 모습으로 보일까요?
색맹 시뮬레이터를 이용하면 색각 이상자들의 시선으로 사이트를 볼 수 있습니다. 색맹 시뮬레이터는 아래 사이트에 들어가면 이용할 수 있으니, 본인의 디자인 콘텐츠가 색각 이상자들에게 어떻게 보이는지 한번 확인해 보면 좋습니다.
누구나 접근 가능한 디자인이 돼야 한다
정리하자면 웹 접근성은 보통 사람도, 장애를 가진 사람도 웹 사이트를 동등하게 이용할 수 있도록 만들어진 지침입니다. 특히 이 지침들의 궁극적인 목적은 어떤 사람이든 접근할 수 있는 사이트를 구축하고, 이를 통해 모든 사람이 웹을 원월하게 이용해 똑같은 수준의 정보를 얻을 수 있도록 하는 것인데요.
결국 우리 디자이너들은 앞으로도 더 다양한 사용자가 콘텐츠를 보고, 이용할 수 있도록 웹 접근성을 지켜서 사용자 친화적이며 포용적인 경험을 제공하기 위해 색상과 명암비를 웹 접근성 지침에 따라 지정해 콘텐츠를 제작해야 할 필요가 있는 것입니다.
? 원문 링크: 모두를 위한 웹 디자인 – 시각적 웹 접근성의 모든 것
뉴스콘텐츠는 저작권법 제7조 규정된 단서조항을 제외한 저작물로서 저작권법의 보호대상입니다. 본 기사를 개인블로그 및 홈페이지, 카페 등에 게재(링크)를 원하시는 분은 반드시 기사의 출처(로고)를 붙여주시기 바랍니다. 영리를 목적으로 하지 않더라도 출처 없이 본 기사를 재편집해 올린 해당 미디어에 대해서는 합법적인 절차(지적재산권법)에 따라 그 책임을 묻게 되며, 이에 따른 불이익은 책임지지 않습니다.
- 에디터김동욱 (jkkims@ditoday.com)
