보다 접근하기 쉬운 디자인을 위해 하이 컬러 콘트라스트 사용하기

색 대비를위한 웹 표준

색상 명암비 두 가지 색상의 대비 차이를 측정합니다. 값이 높을수록 배경에서 전경의 대상 (텍스트, 이미지, 그래픽)을 쉽게 구별 할 수 있습니다.

색상은 여러 가지 방법으로 대비 될 수 있습니다 (예 : 색조, 값 과 포화. 색상 명암비는 World Wide Web의 주요 국제 표준 조직인 W3C에서 제공하는 수식을 사용하여 계산됩니다.

그 사이에 가치가있을 수 있습니다. 1 : 1 (전혀 명암이 없다, 전경과 배경이 같은 색을 가짐) 21 : 1 (최대 대비 검은 색과 흰색 사이에만 존재합니다).

W3C의 최신 웹 콘텐츠 접근성 지침 (WCAG) 2.0은 웹 개발자와 콘텐츠 제작자에게 허용 가능한 색 대비 비율의 최소 (수준 AA) 및 향상된 수준 (수준 AAA) 값에 대한 벤치 마크를 제공합니다..

레벨 AA는 적어도 필요합니다. 일반 텍스트의 경우 4.5 : 1 비율, 과 큰 텍스트의 경우 3 : 1. 자막과 같이 큰 텍스트를 읽는 것이 훨씬 쉽습니다. 따라서 더 낮은 색상 대비가 필요합니다..

고급 레벨 인 레벨 AAA에 도달하려면 최소한 필요한만큼 더 세심한 배려가 필요합니다. 일반 텍스트의 7 : 1 명암비, 과 큰 경우 4.5 : 1. 텍스트가 로고 또는 브랜드 이름의 일부인 경우 WCAG 수준에서 최소 색상 대비 요구 사항이 없습니다..

웹 사이트를 시각적으로 액세스 할 수있는 경우에만 호출 할 수 있습니다. 모든 전경 물체와 배경 사이의 색상 명암비는 적어도 레벨 AA에 도달합니다.

하이 컬러 대비 비율의 이점

더 나은 가독성을 보장함으로써 시각 장애가있는 사용자의 참여를 유도 할뿐만 아니라 작은 화면에서 콘텐츠를 읽는 사람들 스마트 폰 또는 스마트 워치와 같이 나쁜 조명 조건, ~에 낮은 품질의 모니터.

사람들은 텍스트와 배경 사이의 대비가 높을수록 더 빨리 읽습니다. 따라서 사이트의 내용에 지루해지기까지 더 많은 시간이 걸릴 것입니다.

높은 명암비를 적용하면 디자인의 미학에 부정적인 영향을 미칠 것이라는 점을 염두에두면 Contrast Rebellion 웹 프로젝트를 확인해야합니다.이 프로젝트는 실제 예제를 통해 고 대비 비율 규칙을 고수하면 여전히 결과가 발생할 수 있음을 증명합니다 매력적이고 시원한 디자인.

색상 대비를 확인하기위한 앱

디자이너가 웹 사이트의 색상 명암비를 확인할 수있게 해주는 웹상에 많은 무료 도구가 많이 있습니다..

색상 대비를 위해 디자인을 테스트하는 가장 쉬운 방법은 Photoshop 또는 Firefox 용으로이 브라우저와 같은 적합한 브라우저 확장을 사용하여 기본 색상을 선택하고 그 값을 아래의 응용 프로그램 중 하나에 복사하는 것입니다.

기억해야 할 가장 중요한 점은 항상 텍스트 색과 같은 전경색을 주변 영역과 비교한다. (배경 색상).

1. WebAim 색상 대비 검사기

WebAim (Web Accessibility in Mind)은 웹 접근성을 향상시키는 조직으로, 개발자에게 Wave와 같은 다른 많은 접근성 도구 중에서 간단하지만 신뢰할 수있는 색상 대조 검사기를 제공합니다. 사이트의 접근성 문제를 신속하게 평가할 수 있습니다..

WebAim의 색상 대비 검사기에서 알려줍니다. 당신의 색깔이 WCAG AA 및 AAA 검사를 통과한다면, 일반 텍스트와 큰 텍스트 모두.

2. Snook 색상 대조 확인

조나단 스눅 (Jonathan Snook)은 현재 Shopify의 리드 프런트 엔드 개발자로 일하면서 10 년 이상 편리한 컬러 대조 도구를 제공 해왔다. Snook의 앱을 사용하면 HSL 및 RGB 값 변경 전경색과 배경색을 하나씩 사용하여 편리한 범위 슬라이더 WCAG 2.0 벤치 마크를 준수하는 결과를 얻을 때까지.

CheckMyColours

Giovanni Scala로 만든 CheckMyColours를 사용하면 모든 전경 배경 색상 조합의 색상 대비 비율을 확인할 수 있습니다. 라이브 웹 사이트에서.

그것은 명암비, 밝기 차이, 과 색차, 결과에 대한 전체 보고서를 제공합니다. CheckMyColours의 보고서를 통해 사이트의 시각적 접근성을 향상시킬 수있는 방법에 대한 이해를 크게 높일 수 있습니다..

색 구성표 디자이너

색 구성표 디자이너는 특히 색 대비 검사기가 아니지만 완벽한 색 구성표 디자인.

다양한 유형의 시각 장애가있는 사람들이 자신의 색 구성표를 어떻게 인식하는지 볼 수있는 기능이 있으므로이 컬렉션에이 컬렉션을 포함시킵니다. 풀 컬러 시력 교정, 프로 타 노피, 듀 테라노 피 및 기타 여러 시각 장애에 대한 색상을 테스트 할 수 있습니다. 응용 프로그램은 더 정교한 비전 시뮬레이션을 가능하게 해주는 새로운 버전의 Paletton을 가지고 있습니다 (약한 LED 디스플레이 또는 약한 CRT 디스플레이와 같은 것들도 테스트 할 수 있습니다).

또한 W3C는 유용한 웹 접근성 평가 도구 목록을 제공합니다.이 도구를 사용하면이 유용한 접근성 색상 휠과 같은 다른 많은 색상 대비 도구를 쉽게 찾을 수 있습니다..

시각적으로 접근 가능한 웹 사이트를 만들기위한 팁

시각적으로 액세스 할 수있는 웹 사이트를 만들고 싶다면 항상 좋은 생각입니다. 기능이나 의미를 전달하기 위해 색상 만 사용하는 것을 피하십시오.. 현재 상태를 기반으로 색상을 변경하는 아이콘이 이에 대한 일반적인 예입니다..

가능하다면 항상 추가적인 시각적 단서 디자인 기능을 이해할 때 색상을 다르게 보는 사람들을 돕는 기능.

잊지 마라. 버튼, 링크 및 메뉴의 색상 대비에 특별한주의를 기울이십시오., 그들이 귀하의 사이트에서 탐색 수단이기 때문에. 사용자가 사이트에서 쉽게 탐색 할 수없는 경우 빠르게 잃게됩니다.. 클릭 유도 문안 버튼의 액세스 가능한 색상 또한있다 좋은 전환율에 결정적인 요소.

디자인 프로세스에서 가능한 한 조기에 색상 명암비를 테스트하는 좋은 워크 플로우입니다. 고객이 나중에 설계 프로세스에서 사이트의 색 구성표를 변경하도록 설득하기가 어려울 것입니다..

지금 읽으십시오 : 웹 사이트 색체 배합 선택에 실제적인 접근