컬러 블라인드 사용자를 염두에두고 UI 디자인-Secret Stache Media

2월 3, 2021

색상은 UI 디자인에 필수적인 역할을합니다. 바로 끝나면 사용자 경험을 향상시키고 구매 결정에 영향을 미치며 브랜드의 목소리를 반영합니다.

그렇다면 색맹 사용자를 위해 효과적이고 접근 가능하며 심미적으로 만족스러운 인터페이스를 어떻게 설계합니까?

는 과학을 뒤 색맹이 매우 복잡,그것의 요점은 컬러 블라인드 사람들은 어려움이 있을 보고 쉽게 액세스를 제공하거나 차별화 사이 어떤 색상입니다., 이 마음으로,이 문서에서,우리가 공유하는 방법에 대한 몇 가지 팁을 향상시킬 수 있습 귀하의 사이트 접근과 경험을 제공한 컬러 블라인드는 사람들.

디지털 세계에서 색맹

연구에 따르면 남성 12 명당 약 1 명(여성 200 명당 1 명)이 색맹입니다. 지만 컬러 블라인드는 사람들이 볼 수 있는 것만으로 명확하게 다른 사람으로,그들은 할 수 없이 완전히 식별 빨간색,녹색,파란색 빛입니다. 색맹의 다른 유형이있다;중수소 및 protanopia 색맹이 가장 일반적입니다.,

적색-녹색 색맹(중수소)을 가진 사람들은 적색과 녹색을 구별하는 데 어려움이 있습니다. 마찬가지로,붉은 색맹(protanopia)을 가진 사람들에게는 모든 붉은 색이 둔 해 보입니다.

이 무엇을 의미하는 디자인 관점에서 보면 그에 의존하는 색상을 혼자 가독성과제들의 웹 사이트 사용하기 어려운 사람입니다.

사용할 수 있습니다 Coblis 색맹 시뮬레이터 무엇을 보고 귀하의 사이트처럼 보이는 컬러 블라인 사용자.,

는 7 가지 방법을 향상시킬 수 있습 컬러 접근성에 대한 컬러 블라인드 사용자가

디자인 요소와 기술을 개선하는 컬러 접근성에 대한 컬러 블라인드 사용자가 일반적으로 좋은 디자인 실행한다. 하는 동안 당신이 생각하는 당신의 웹사이트의 미학을 끌 수 있으로 인정되는 경우 당신은 디자인에 대한 접근성,그것은 확실히지 않는 경우입니다.

여기에서는 색맹 사용자를 염두에두고 좀 더 접근하기 쉬운 UI 를 디자인 할 수있는 몇 가지 방법을 살펴 보겠습니다.

#1:패턴 및 텍스처 사용

색상 차이는 데이터 시각화와 같이 매우 중요합니다.,,그래프 및 원형 차트. 명암비가 낮은 색상을 선택하면 색맹 사용자를 위해 차트를 해석하기 어려울 수 있습니다.대신해야 할 일은 다음과 같습니다.

사용자가 다른 세그먼트를 쉽게 구분할 수 있도록 패턴과 텍스처를 사용하십시오.
세그먼트에 텍스트 레이블을 추가하여 더 쉽게 이해할 수 있도록하십시오.

자는 방법을 살펴는 컬러 블라인드는 사람으로 타노 피아 볼 수 있습니다 푸른 녹색 막대 그래프에 대 그들은 어떻게 볼 것 같은 그래프 패턴과 텍스처.,

여기에 무엇이 보이는 것과 같은 경우에 당신은 레이블이 각 세그먼트를 사용하는 대신 패턴

#2:을 활용 색상과 기호

안에만 의존 색상 통신 또는 오류를 전달하는 정보를 통해 대부분의 작업을 수행합니다.

예를 들어 Facebook 의 가입 양식을 살펴 보겠습니다., 면 양식에 의존에서는 색상을 혼자 사용자에게 알려 그들은 실수를 특정 분야,그것은 다음과 같이 보일 수 있습니한 블라인드([저해상도 인정)사용자

여기에 Facebook 의 등록 양식을 상징으로하고 오류 메시지를 첨부:

를 사용하여 아이콘 및 기호에 양식을 사용자에게 알려 그들에 오류가 접근성을 향상과는 데 도움이 그들에게 올바른 자신의 실수를 빠릅니다.

#3:텍스트 레이블 사용

컬러 필터 및 견본에 텍스트 레이블을 추가하면 색맹 사용자의 접근성이 향상됩니다., 색맹의 유형에 따라 사용자는 일종의 설명 텍스트없이 다른 색상(또는 음영)을 구별하기가 어려울 수 있습니다.예를 들어 Amazon 에 설명 텍스트 레이블이 없으면 색맹 사용자는 주황색 또는 녹색 셔츠를 제외하고 빨간색 셔츠를 말할 수 없습니다.