귀하의 브랜드 색상은 정서적으로 강한 영향을 미치지만 부분 시력이 있거나 색맹이거나 가시성을 어렵게 만드는 환경적 요인에 직면한 사이트 방문자에게는 어떻게 보일까요?
색상과 대비 수준은 의사소통에 매우 중요하며 이러한 세부 정보를 올바르게 얻는 것은 접근성을 염두에 둔 디자이너에게 매우 중요합니다.'
색 지각 장애는 생각보다 더 흔합니다. 따라서 이 게시물에서는 저시력, 난독증, 색맹 등의 장애가 있는 사람들이 웹과 상호 작용하는 방법에 대해 이야기하겠습니다.
차례
내 웹사이트의 접근성을 향상시키기 위해 색상 검사기를 어떻게 사용합니까?
이 섹션은 실제로 매우 간단하지만 약간의 노력이 필요합니다. WebAIM의 온라인 대비 검사 도구를 활용해야 합니다. WebAIM은 전 세계적으로 웹 접근성을 향상한다는 사명을 가지고 유타 주립 대학에 기반을 둔 비영리 조직입니다.
에 지정된 대로 전경색(예: 텍스트 또는 아이콘의 색상)과 배경색을 XNUMX진수 값(XNUMX진수 값이라고도 함)으로 입력하기만 하면 됩니다. HTML 또는 CSS를 사용하면 명암비 검사기가 비율이 충분한지 알려줍니다. 추구해야 할 최소 명암비는 4.5:1이라는 점을 기억하십시오. 흰색 배경에 검정색 텍스트는 21:1의 명암비를 가지므로 상당한 여유가 있습니다.
누구나 볼 수 있는 웹 색상 팔레트를 만드는 5가지 도구
1. WebAIM 색상 대비 검사기
전경과 배경의 XNUMX진수 색상을 입력합니다. 출력에는 샘플 문장과 함께 일반 텍스트와 큰 텍스트에 대한 AA 및 AAA 준수가 표시됩니다. 슬라이더를 사용하면 좋은 조합을 찾을 때까지 내용을 변경할 수 있습니다.
장점
- 눈에 편한 인터페이스를 갖춘 간단한 도구입니다.
- 이것은 디자이너뿐만 아니라 초보자에게도 유용하고 간단한 도구입니다.
약점
- 두 가지 이상의 색상을 비교할 수 없으며 두 가지 색상만 비교할 수 있습니다.
- 밝기 슬라이더는 색상을 선택하는 데 그다지 좋은 방법이 아닙니다. 이 단순한 디스플레이에서 색상이 얼마나 매력적인지 말하기는 어렵습니다.
2. WCAG용 대비 검사기
전경과 배경의 9진수 색상을 입력합니다. Lorem Ipsum 텍스트 샘플 옆에 일반 텍스트와 큰 텍스트에 대한 AA 및 AAA 준수를 표시합니다. 사진을 업로드할 수도 있습니다. XNUMX가지 색상 팔레트가 자동으로 선택됩니다. 그런 다음 각 색상을 전경색 또는 배경색으로 비교할 수 있습니다.
장점
- 사용자 친화적인 인터페이스를 갖춘 간단한 도구입니다.
- 이미지로 팔레트를 만드는 능력이 있습니다.
약점
- 팔레트는 자동으로 선택되며 색상 선택기를 사용하여 추가로 변경할 수 있지만 해당 변경 사항은 팔레트에 다시 저장되지 않습니다. 정보를 복사하여 새 문서에 붙여넣어야 합니다.
3. 컬러 큐브
팔레트 색상을 각각 한 줄에 입력합니다. 출력에는 작은 글꼴과 큰 글꼴에 대한 AA 표준과 비교한 명암비의 샘플 문자가 표시됩니다. 세 개의 열은 흰색 배경, 검은색 배경 및 "가장 읽기 쉬운" 브랜드 색상 세트와의 대비를 보여줍니다.
장점
- 눈이 편한 UI(사용자 인터페이스)가 잘 구성되어 있으며 합격/불합격/엣지 상태를 쉽게 확인할 수 있습니다.
약점
- AAA가 정한 표준을 충족하지 않습니다.
- 가능한 모든 색상 조합을 수행하는 것은 아니며 처음에는 이것이 사실인지 명확하지 않습니다.
4.) XNUMX가지 모양 대비 그리드
팔레트 색상을 입력하세요. 또한 각 색상에 이름을 지정할 수 있습니다. 이 앱은 가능한 모든 색상 조합으로 테이블을 만듭니다. 타일 크기는 XNUMX가지가 있습니다. AA 및 AAA 통과/실패/가장자리와 효과적인 명암비에 대한 시각적 단서가 있습니다. 열과 행은 앱 내에서 드래그 앤 드롭 방식으로 이동할 수 있습니다. 테이블 형식 데이터를 저장하고, 내보내고, 공유할 수 있습니다.
장점
- 전체 팔레트 분석에 도움이 되는 유용한 기능이 많이 있습니다.
약점
- 사용하기 쉬운 다른 도구보다 배우기가 더 어렵습니다.
- 두 가지 색상만을 비교하는 것은 올바른 방법이 아닙니다.
- 색상이 어떻게 어울리는지 파악하는 데는 좋지 않습니다.
- 보기에는 다소 압도적이지만 많은 정보가 표시됩니다.
5. 색상 안전
배경색을 입력하세요. 글꼴의 계열, 크기 및 두께를 선택합니다. 표준으로 AA 또는 AAA를 선택하십시오. 선택한 색상과 해당 색상의 XNUMX진수 코드, 샘플 및 유효 명암비를 표시합니다. 대비가 충분한 전경색의 큰 축소판이 가장 좋습니다. 모든 색상을 보거나 특정 색상 그룹(녹색, 파란색, 보라색 등)만 보도록 선택할 수 있습니다.
장점
- 눈이 편한 인터페이스로 보기에도 좋고 효과도 좋은 색상 조합을 쉽게 찾을 수 있습니다.
- 브랜드 색상 팔레트가 아직 없거나 웹용으로 이미 보유하고 있는 팔레트에 추가하려는 경우 유용한 도구입니다.
약점
- 한 번에 전경색과 배경색만 비교할 수 있습니다.
- 색상을 저장하려면 색상을 복사하여 별도의 문서에 붙여넣어야 합니다.
- 나가서 모두를 위한 것들을 만들어 보세요!
이러한 도구를 사용하는 방법을 알게 되면 프로젝트에 두 개 이상의 도구가 필요하다는 것을 알게 될 것입니다. 아마도 Color Cube는 접근성에 대해 배운 내용을 고객에게 보여주는 가장 좋은 방법일 것입니다. 어쩌면 WebAIM의 도구를 항상 사용하여 빠른 현장 점검을 수행할 수도 있습니다.
결론
방금 설명한 팁, 지침 및 도구를 사용하면 웹사이트에 고대비 색상과 라벨을 제공할 수 있습니다. 이렇게 하면 저시력, 난독증, 색맹이 있는 사람들이 웹 사이트와 콘텐츠를 더 쉽게 읽을 수 있습니다. 일반 청중도 귀하의 웹사이트를 사용하는 것이 더 쉽다고 생각하더라도 놀라지 마십시오.
