<div id="readability-page-1" class="page"><div><p data-app="{&quot;type&quot;:&quot;text&quot;,&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot;Anthony의 Making Selected Button States Clear for Color Blind Users 소개하고자 합니다.&quot;}]}">Anthony의 Making Selected Button States Clear for Color Blind Users 소개하고자 합니다.</p><blockquote data-app="{&quot;type&quot;:&quot;quotation&quot;,&quot;kind&quot;:&quot;quote&quot;,&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot;버튼을 선택하면 그 상태가 명확하게 나타나야 한다&quot;},{&quot;type&quot;:&quot;br&quot;},{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot;(요약문)&quot;}]}">버튼을 선택하면 그 상태가 명확하게 나타나야 한다<br>(요약문)</blockquote><p data-app="{&quot;type&quot;:&quot;text&quot;,&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;style&quot;:{&quot;font-family&quot;:&quot;Nanum Gothic&quot;},&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot;색맹 사용자에게 사용자 인터페이스에서의 시각적 단서가 중요합니다. 색상은 일반적으로 정보를 전달하는 효과적인 수단이지만, 색맹 사용자는 특정 색상을 구분하는 데 어려움을 겪기 때문에 색상만으로 상태나 기능을 인식하기 힘듭니다. 따라서 버튼의 모양이나 디자인 요소를 활용하는 것이 좋습니다.&quot;}]}]}"><span>색맹 사용자에게 사용자 인터페이스에서의 시각적 단서가 중요합니다. 색상은 일반적으로 정보를 전달하는 효과적인 수단이지만, 색맹 사용자는 특정 색상을 구분하는 데 어려움을 겪기 때문에 색상만으로 상태나 기능을 인식하기 힘듭니다. 따라서 버튼의 모양이나 디자인 요소를 활용하는 것이 좋습니다.</span></p><p data-app="{&quot;type&quot;:&quot;text&quot;,&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;style&quot;:{&quot;font-family&quot;:&quot;Nanum Gothic&quot;},&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot;첫째, 네비게이션 바에서는 버튼의 선택 상태를 색상으로만 구분하기 어렵습니다. 색맹 사용자에게는 버튼의 활성화 여부를 판단하는 데 한계가 있으므로, 버튼의 모양 변화나 아이콘 추가, 텍스트 스타일 등을 통해 선택된 버튼을 명확히 구분하는 것이 필요합니다. 예를 들어, 버튼 레이블에 밑줄을 추가하면 색맹 사용자도 선택된 상태를 혼동하지 않고 인식할 수 있습니다.&quot;}]}]}"><span>첫째, 네비게이션 바에서는 버튼의 선택 상태를 색상으로만 구분하기 어렵습니다. 색맹 사용자에게는 버튼의 활성화 여부를 판단하는 데 한계가 있으므로, 버튼의 모양 변화나 아이콘 추가, 텍스트 스타일 등을 통해 선택된 버튼을 명확히 구분하는 것이 필요합니다. 예를 들어, 버튼 레이블에 밑줄을 추가하면 색맹 사용자도 선택된 상태를 혼동하지 않고 인식할 수 있습니다.</span></p><p data-app="{&quot;type&quot;:&quot;text&quot;,&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;style&quot;:{&quot;font-family&quot;:&quot;Nanum Gothic&quot;},&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot;둘째, 세그먼티드 버튼에서도 색상 변화에 의존하는 것은 문제입니다. 색맹 사용자는 배경색만으로 버튼 상태를 판단하기 어렵기 때문에, 버튼의 형태 변화나 테두리, 아이콘 등을 추가하여 상태를 명확히 구분해야 합니다. 체크마크 아이콘을 추가하는 것도 효과적이며, 이를 통해 버튼의 선택 상태를 명확히 전달할 수 있습니다.&quot;}]}]}"><span>둘째, 세그먼티드 버튼에서도 색상 변화에 의존하는 것은 문제입니다. 색맹 사용자는 배경색만으로 버튼 상태를 판단하기 어렵기 때문에, 버튼의 형태 변화나 테두리, 아이콘 등을 추가하여 상태를 명확히 구분해야 합니다. 체크마크 아이콘을 추가하는 것도 효과적이며, 이를 통해 버튼의 선택 상태를 명확히 전달할 수 있습니다.</span></p><div data-app="{&quot;type&quot;:&quot;img&quot;,&quot;align&quot;:&quot;content-full&quot;,&quot;mobileAlign&quot;:&quot;full&quot;,&quot;url&quot;:&quot;http://t1.daumcdn.net/brunch/service/user/2fEJ/image/NG6iKzwSDAiQx9bmCGZpRxmkl1w.jpeg&quot;,&quot;caption&quot;:&quot;&quot;,&quot;width&quot;:&quot;702&quot;,&quot;height&quot;:&quot;67&quot;,&quot;originalName&quot;:&quot;10.jpeg&quot;}"><p><img src="https://img1.daumcdn.net/thumb/R1280x0.fjpg/?fname=http://t1.daumcdn.net/brunch/service/user/2fEJ/image/NG6iKzwSDAiQx9bmCGZpRxmkl1w.jpeg" data-filename="10.jpeg"><span></span></p></div><p data-app="{&quot;type&quot;:&quot;text&quot;,&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;style&quot;:{&quot;font-family&quot;:&quot;Nanum Gothic&quot;},&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot;셋째, 토글 스위치에서는 On과 Off 상태를 색상으로 구분하는 것에 한계가 있습니다. 색맹 사용자는 이 두 상태를 인식하기 어려우므로, “On”과 “Off” 레이블을 추가하면 상태를 즉각적으로 이해하는 데 도움이 됩니다. 체크마크를 추가하는 것도 유용하여, 사용자가 색상에 의존하지 않고 스위치의 활성화 상태를 인식할 수 있게 합니다.&quot;}]}]}"><span>셋째, 토글 스위치에서는 On과 Off 상태를 색상으로 구분하는 것에 한계가 있습니다. 색맹 사용자는 이 두 상태를 인식하기 어려우므로, “On”과 “Off” 레이블을 추가하면 상태를 즉각적으로 이해하는 데 도움이 됩니다. 체크마크를 추가하는 것도 유용하여, 사용자가 색상에 의존하지 않고 스위치의 활성화 상태를 인식할 수 있게 합니다.</span></p><div data-app="{&quot;type&quot;:&quot;img&quot;,&quot;align&quot;:&quot;inner-center&quot;,&quot;mobileAlign&quot;:&quot;content-full&quot;,&quot;url&quot;:&quot;http://t1.daumcdn.net/brunch/service/user/2fEJ/image/5ZtUe58ZQnAHA2mgqYZ-iV4zSL4.jpeg&quot;,&quot;caption&quot;:&quot;&quot;,&quot;width&quot;:&quot;689&quot;,&quot;height&quot;:&quot;116&quot;,&quot;originalName&quot;:&quot;11.jpeg&quot;}"><p><img src="https://img1.daumcdn.net/thumb/R1280x0.fjpg/?fname=http://t1.daumcdn.net/brunch/service/user/2fEJ/image/5ZtUe58ZQnAHA2mgqYZ-iV4zSL4.jpeg" data-filename="11.jpeg"><span></span></p></div><p data-app="{&quot;type&quot;:&quot;text&quot;,&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;style&quot;:{&quot;font-family&quot;:&quot;Nanum Gothic&quot;},&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot;이러한 접근 방식들은 모두 사용자가 버튼의 상태를 쉽게 인식하도록 도와주어, 접근성을 높이고 사용자 경험을 개선하는 데 효과적입니다.&quot;}]}]}"><span>이러한 접근 방식들은 모두 사용자가 버튼의 상태를 쉽게 인식하도록 도와주어, 접근성을 높이고 사용자 경험을 개선하는 데 효과적입니다.</span></p><p data-app="{&quot;type&quot;:&quot;text&quot;,&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot;위글은 요약문입니다.&quot;}]}">위글은 요약문입니다.</p><p data-app="{&quot;type&quot;:&quot;text&quot;,&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot;이 글에 대한 전체 번역 원문(구체적인 사례 등)은 아래 링크를 클릭해주세요~&quot;}]}">이 글에 대한 전체 번역 원문(구체적인 사례 등)은 아래 링크를 클릭해주세요~</p><p data-app="{&quot;type&quot;:&quot;text&quot;,&quot;data&quot;:[{&quot;type&quot;:&quot;anchor&quot;,&quot;url&quot;:&quot;https://maily.so/uiux/posts/49b7255e&quot;,&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot;https://maily.so/uiux/posts/49b7255e&quot;}],&quot;target&quot;:&quot;_blank&quot;}]}"><a target="_blank" href="https://maily.so/uiux/posts/49b7255e">https://maily.so/uiux/posts/49b7255e</a></p></div></div>

UX 컨설턴트 전민수

Anthony의 Making Selected Button States Clear for Color Blind Users 소개하고자 합니다. 버튼을 선택하면 그 상태가 명확하게 나타나야 한다(요약문)  색맹 사용자에게 사용자 인터페이스에서의 시각적 단서가 중요합니다. 색상은 일반적으로 정보를 전달하는 효과적인 수단이지만, 색맹 사용자는 특정 색상을 구분하는

[UX원칙#20] 선택 버튼 상태 보여주기

댓글