스터디 : 웹 접근성 명암비 기준, 꼭 지켜야 할까?

원문: https://yozm.wishket.com/magazine/detail/2901/

웹 접근성 명암비 기준, 꼭 지켜야 할까? | 요즘IT

 

1. 웹 접근성(Web Content Accessibility)

웹 접근성은 서비스가 다양한 사용자의 요구에 맞춰 설계되어 있는지 여부를 평가하는 중요한 요소다. 시각, 청각, 운동 능력 또는 인지 장애를 가진 사람을 포함한 모든 사용자가 웹 콘텐츠에 접근할 수 있도록 만든 디자인 및 개발 기준을 말한다. 웹 접근성을 준수하면 서비스 품질을 높이고 더 많은 사용자가 편리하게 서비스를 이용하게 도울 수 있다.

웹 접근성을 보장하는 대표적인 국제 표준은 WCAG(Web Content Accessibility Guidelines)다. WCAG는 웹 접근성 가이드라인을 세 가지 수준(Level A, AA, AAA)으로 나눠 제시한다. 각 수준은 콘텐츠 접근성을 보장하는 기준의 강도를 나타낸다.

• Level A: 기본 접근성을 충족하는 수준으로, 이를테면 이미지에 대체 텍스트를 제공하는 것이 포함됨
• Level  AA: 대부분의 사용자가 접근할 수 있는 기준으로, 대다수 디지털 서비스가 지향하는 기준
• Level AAA: 모든 사용자가 접근할 수 있도록 하는 매우 엄격한 기준. 예를 들어, 동영상에 수어(수화)를 제공하는 것, 콘텐츠를 쉽게 이해하도록 단순한 언어를 사용하는 것, 본문 텍스트 명암비 7:1의 고대비를 주는 것 등의 요구사항이 포함됨. 모든 사이트에 적용하기 어려운 경우가 많음

---

2. 명암비(Contrast Ratio)

웹 접근성의 다양한 요소 가운데 명암비는 매우 중요한 요소다. 명암비는 텍스트와 배경 간의 밝기 차이를 나타내기에, 이 기준을 지키면 사용자들이 콘텐츠를 한결 쉽게 읽을 수 있다.

 

1) 대다수 사용자를 고려한 WCAG Level AA 가이드

(1) 본문 텍스트

텍스트와 배경 간 명암비는 최소 4.5:1 이상을 유지해야 한다. 이는 일반적인 텍스트를 읽을 때 가독성을 확보하기 위한 기준이다.

2) 큰 텍스트(18pt 이상 크기 또는 14pt 볼드 이상의 텍스트)

텍스트와 배경 간 명암비는 최소 3:1 이상을 유지해야 한다. 큰 텍스트는 작은 텍스트에 비해 대비가 덜 중요할 수 있지만, 여전히 충분한 가독성을 제공해야 하므로 이 기준을 만족해야 한다.

---

3. 상용 서비스의 명암비 사용 사례

1) 토스

라이트 모드 3.67:1, 다크 모드 4.81:1

파란색 작은 글자 텍스트는 '큰 글자' 가이드에 포함되지 않는다. 따라서 4.5:1 이상의 명암비가 요구되지만 실제 명암비는 3.67:1 밖에 되지 않는다. 하지만 토스는 젊은 세대를 타겟 유저로 삼고 있고, 젊은 사용자층은 대체로 시력이 좋고 대비 민감도가 높은 경향이 있어 명암비가 상대적으로 낮더라도 큰 불편을 느끼지 않을 수 있다. 사용성이 낮다고 말하기는 어렵다.

 

2) 당근

라이트 모드 2.86:1, 다크 모드 5.74:1

라이트 모드에 주황색으로 적힌 글자는 작은 글자로 4.5:1이 기준이지만, 실제로는 큰 글자 권고사항인 3:1에도 못 미치는 수준인 2.86:1로 많이 낮다. 당근의 주 색상인 주황색 계열은 고대비 명암비를 띄기 어려운 색상이다. 명암비는 빛의 밝기 차이를 기준으로 측정되는데, 주황은 R, G, B 중 빨강과 초록을 섞어 만든 색으로 파란색은 거의 포함하지 않아 밝은 편이다. 따라서 브랜드의 주 색상이 주황색 계열일 경우 웹 접근성 명암비를 고려할 때 색상 선택에 더 신중을 기해야 한다.

 

 

3) 네이버

라이트 모드 3:13:1, 다크 모드 3.68:1

위의 화면 요소들은 모두 WCAG 가이드의 '큰 글자'에 해당한다. 권고 사항은 3:1 이상 명암비를 지키고 있다고 볼 수 있다.

하지만 한 화면에 다양한 톤이 존재하면 사용자는 오히려 피로를 느낄 수 있어 주의해야 한다. 명암비의 일관성으로 사용자의 피로도를 관리하는 것이 중요하다. 화면에 다양한 톤이 존재한다면, 톤 간 차이를 최소화하고 일관된 명암비를 유지하려는 노력이 필요하다. 큰 글자와 본문 글자가 다른 명암비 기준은 따르더라도, 두 가지 명암비가 과도하게 차이나지 않도록 조절해야 한다.

 

4) 유튜브

라이트 모드 5:92:1, 다크 모드 7.4:1

WCAG 접근성 기준을 완벽하게 충족하는 수준이다. 특히 다크모드의 명암비는 Level AAA를 만족하며, 일반 수준을 훨씬 상회하는 수치를 보여준다.

이러한 수치는 유튜브가 누구나 접근 가능한 경험을 제공하려는 의도를 잘 보여준다. 유튜브는 전 세계 전 연령층이 사용하는 서비스다. 그만큼 명암비를 적절히 조절하여 사용자가 콘텐츠를 쉽게 읽고 이해하도록 디자인에 세심한 주의를 기울인 것이다. 이는 단순히 시각적인 아름다움을 주는 데에 그치지 않고, 실제 사용자들이 각자의 환경에서 콘텐츠를 편리하게 소비할 수 있도록 하는 실용적인 해결책이다.

유튜브는 다양한 환경에서 시각적 편안함을 제공하기 위해 명암비를 적절히 조정했다. 다크 모드와 라이트 모드를 가리지 않고 더 많은 사용자가 편리하게 이용할 수 있도록 배려했다. 누구나 높은 접근성을 유지하도록 배려한, 실용적이면서 포용적인 디자인 전략의 일환이다.

 

 

5) 애플

라이트 모드 3.6:1, 다크 모드 5.75:1

일부 WCAG 접근성 가이드라인을 충족하지만, 라이트 모드에서는 4.5:1을 충족하지 못한다. 다소 의외로 느껴지는 결과인데, 글로벌 기업 애플조차 기준을 완벽하게 만족시키지 못한다는 경우가 있다는 점은 디자인과 접근성 사이의 균형을 맞추는 것이 얼마나 어려운 일인지를 잘 보여준다.

다만 애플은 OS 시스템을 설계하고 HIG를 발간하는 등 인간 중심 경험 설계에 심혈을 기울이는 조직이다. 애플이 권고 명암비를 완벽하게 충족하지 못한 것은 사용자의 시각적인 부담을 최소화하면서도 감성적인 디자인을 구현하기 위한 의도라고 추측할 수 있다. 즉, 명암비의 절대적인 수치보다 전반적인 사용자 경험을 더 중시하는 전략을 선택한 것이다. 이처럼 애플은 브랜드 아이덴티티와 사용자 경험을 모두 고려하여 디자인의 균형을 맞추는 데 중점을 두었다. 애플처럼 각 브랜드가 지향하는 방향성과 사용자 환경에 맞춰 접근성 기준을 설정하는 것도 하나의 중요한 디자인 전략임을 인식해야 한다.

---

4. 마치며

서비스의 주 사용자가 누구인지, 브랜드의 색상 특성이 무엇인지, 그리고 일정한 톤을 사용하여 사용자 피로도를 관리하는 방법을 무엇인지 살펴보았다. 나아가 모든 사용자를 위한 디자인, 접근성과 브랜드 감성의 균형을 맞추는 디자인 전략까지 알 수 있었다. 

웹 접근성 기준을 완벽하게 충족하지 못했다고 해서 무조건 그 서비스의 접근성이 낮다고 평가할 수는 없다. 접근성 기준은 '가이드라인'으로서 각 서비스와 사용자 환경에 맞춰 유연하게 적용할 필요가 있다. 명암비에 대한 권고사항 역시 절대 법칙이라기보다는 최적화된 사용자 경험을 제공하기 위한 지침으로 이해해야 한다. 

실제로 명암비가 사용자 경험에 미치는 영향을 면밀히 검토하려면 사용자 테스트가 필수다.  다양한 환경에서 사용자의 반응을 꾸준히 모니터링하고 검증해야 사용자 경험을 최적화할 수 있을 것이다.

---

💡 인사이트

• 2007년 장애인차별금지법 제정 후, 웹에서 제공하는 전자정보를 장애 환경에 상관없이 동등한 수준으로 제공해야한다는 법이 시행되었다고 한다. 확실히 그 이전의 웹사이트들은 어떠한 규칙이 없고 자유분방한 모습이었는데, 어느새부터인가 정돈되고 일관적인 형태를 띄게 되었던 것 같다. 처음에는 예술성과 자유를 막는다고 생각해서 이런 변화가 별로라고 생각했었는데, 어느샌가 시원시원하고 다루기 쉬운 인터페이스, 읽기 쉽도록 큼지막하게 쓰인 폰트, 누르기 쉬운 버튼, 어느 기기, 브라우저에서나 동일하게 출력되는 디자인 등에 익숙해진 것 같다. 지금은 오히려 폭넓은 사용자를 배려하지 않은 프로덕트들이 불편하고 껄끄럽게 느껴진다. 역시 약자를 배려해 디자인하면 다른 누구에게도 편리하게 느껴질 수 있다는 것을 다시금 느낀다.
  
  
• 서치해보니 네이버 접근성 페이지에 관련된 내용이 보기 좋게 정리되어 있었다. 장애인뿐만 아니라 어떠한 특수한 상황에 있는 일반 사용자까지 배려하고 있다는 점에 놀랐다. 흑백 모니터를 쓰는 경우, 한 손으로 물건을 들고 있는 경우 등 정말 많은 부분을 고려해야 한다는 걸 알았다.
  https://accessibility.naver.com/accessibility

 

• 다른 웹 접근성 평가기준엔 무엇이 있는지 궁금증이 들어 한국웹접근성인증평가원 홈페이지에 접속해보았다. 가장 유명하고 기본적인 요소인 '대체 텍스트'를 필두로 콘텐츠의 구조, 논리성같이 눈에 보이지 않는 뼈대에 대한 내용까지 적혀있는 것이 신기하고 인상깊었다. 점수를 매기기 어려운 것들이라고 생각했는데, 생각보다 항목이 자잘하게 나뉘어 있어서 확실한 가이드라인이 될 것 같다. 
  https://www.wa.or.kr/board/view.asp?sn=161&page=1&search=&SearchString=&BoardID=0004&cate=

 

• 사례를 보면서 주황색은 밝을 거라고 예상했는데, 초록색과 파란색이 생각보다 명암비가 높지 않아서 놀랐다. 감으로 진하다, 연하다를 나누지 말아야겠다. 나는 작은 사이즈의 폰트, 아주 얇고 가느다란 폰트를 사용하는 것을 좋아하는데 웹 접근성 기준에 대보면 적합하지 않은 것들이 많을 것 같다. 옛 작업물들을 다시 뜯어보고 필요한 부분이 있다면 수정해야겠다.