😍구독링크 복사해서 공유하기😍
http://bit.ly/2FNQNpv

당신은 인구의 4% 이상이 색맹인 것을 알고 있었는가? 색맹과 다른 시력 장애의 다양한 변형은 당신의 웹사이트의 가독성과 사용성에 영향을 미칠 수 있다. 

색상을 어떻게 보든, 모든 사용자들이 당신의 디자인에 접근할 수 있는 것을 확실하게 보장하는 것은 당신에게 달려있다. 

그리고 이것은 적절한 도구들과 함께라면 당신이 생각하는 것보다 쉽다. 

  

웹사이트 디자인에 관한 수없이 많은 접근성 체크와 기준들이 있는데, 어떤 사용자든 쉽게 이해할 수 있는 웹사이트 디자인을 제공하는 것이 전반적인 목표이다. 

접근성에 대한 관심은 모든것에서부터 오디오, 네비게이션, 피드백, 텍스트의 특성 및 색상에 이르기까지 다양하다. 후자가 바로 우리가 여기서 집중해야할 부분인데, 왜냐하면 그것은 문제가 발생하기 전 식별하고 디자인 프로세스 초기에 알아볼 수 있는 가장 쉬운 것 중 하나가 될 수 있기 때문이다.

웹사이트와 같은 시각적 매체에 있어 색맹을 포함한 시력 장애의 다양한 변형은 가장 큰 관심사다. 컬러 블라인드 인식(Color Blind Awareness)에 따르면, 전세계 남성 12명 중 1명, 여성 200명 중 1명은 일종의 색각 이상을 가지고 있다.

당신은 여기서 다양한 유형의 색각이 어떻게 보이는지 각 종류에 대한 설명과 함께 비교를 볼 수 있다. 

색상과 접근성에 대한 가장 큰 요점은 바로 대비이다.

여기에는 전경과 배경의 색상 대비, 텍스트의 색상 대비(무게와 크기 포함), 그리고 모든 사용자 인터페이스 요소들의 색상 대비를 포함한다. 

색상을 포함한, 웹 접근성에 대한 우수 사례를 요약한 문서가 있다.  WCAG(Web Contact Accessibility)에 2.1버전에 수록되어 있으며, 당신이 더 나은 웹사이트의 접근성을 높이기 위해 필요한 모든 것들은 다루고 있다. 당신은 여기에서 추가적인 가이드라인을 공부할 수 있다.

색상대비부터 색상 조합까지 당신이 가능한 모든것을 확인하는데 도움이 되는 유용한 도구가 많이 있지만

여기 특별히 더 도움되는 몇 가지가 있다.

 Link

WebAIM Color Contrast Checker은 배경과 전경색 사이의 대비 비율을 확인한다. 이때 4.5대 1 이상의 비율을 목표로 하자.

Colorable은 각 색상을 구별할 수 있게하는 밝기 차이를 사용해 대비를 테스트한다. 기본 색조뿐만 아니라 밝기 및 주변 물체까지 고려한다.

Color Safe는 WCAG의 가이드라인에 따라 접근 가능한 색상 팔레트를 만드는데 도움을 준다. 이 팔레트는 가독성을 위한 적절한 배경과 대비 비율을 찾아 사용할 수 있도록 한다.

Web Accessibility Guidelines은 컨텐츠를 읽기 쉽게 돕는 다양한 배경과 다양한 색상을 보여주는 색상 대비 도구가 있다. 명확하고 이해할 수 있는 텍스트와 배경이 필요할 때 사용하자.

Stark은 Adobe XD와 Sketch 플러그인으로, 당신이 작업하는 디자인에 대한 접근성을 테스트하는데 사용할 수 있다. 대비 테스트, 색맹 시뮬레이션을 실행해보거나 개선을 위한 색상 추천도 받아볼 수 있다.

Colors for All은 WCAG 기준을 충족하는 조합에 대한 매칭을 보여주는, 일종에 그리드로 표현된 거대한 색 시각화 차트이다.

 Link

URL과 버전 필터를 설정한 후 Toptal Color Blind Web Page Filter를 사용하면, 해당 페이지를 볼 수 있다. 이는 해당 디자인이 얼마나 접근하기 쉬운지 시각화하는데 도움되는 훌륭한 테스트가 될 수 있다. 

Color Review는 색상 대비를 확인하는데 도움을 줄 수 있는 스와치 (색상 팔레트) 및 스포이드 툴을 가지고 있는 앱으로, 당신은 브라우저를 통해서도 이를 사용할 수 있다. 읽기 어려워 보이는 예가 있다면 색상을 뒤집어 확인하자.

Colors는 접근 가능한 웹사이트 디자인을 위한 90개의 색상 쌍별 조합을 갖고 있다. 각 조합은 크기 가이드라인과 비율을 나타내며, 이는 각 쌍별 조합들이 얼마나 잘 나타나는지 알 수 있다. 만약 당신이 접근 가능한 색상 팔레트를 만들고자 한다면, 아주 좋은 시작점이다.

Contrast Grid를 사용하면 배경과 전경 조합 테스트를 통해 WCAG의 최소 명암 요구 사항을 준수할 수 있으며 디자인 옵션에 대한 그리드를 만드는데 필요한 모든 색상을 여기에 입력할 수 있다. 

웹사이트 디자인에 있어서 접근성은 중요한 부분이다. 완벽한 색 시력을 갖췄다 하더라도 한 발짝 물러서서 그렇지 않은 사람의 입장에서 디자인에 대해 생각하고 싶을 것이다. 

접근성은 당신이 모든 새로운 웹사이트 디자인 프로젝트에 가지고 있어야할 대화주제여야 한다. 놀라운 웹사이트를 만드는 것이 소수의 사용자가 볼 수 없다면 무슨 소용이 있을까? 

오늘 읽으신 아티클이 마음에 드셨다면, 작은 금액이라도 디독의 서비스 유지를 위해 후원해주시면 감사하겠습니다. :)

카카오뱅크 3333 123 7696 03 (김강령)

*후원해주신 금액은 전액 서비스 운영(메일 발송 솔루션 비용)에 사용됩니다.
*후원자(입금자명) 리스트 기입을 원하지 않으시는 분은 메일로 말씀해주세요.

후원해주신 분들, 정말 감사합니다! 서비스 유지에 큰 도움이 되었습니다 ;)