웹 접근성 색상 대비 지침 및 비율 이해

웹 사이트 색상 대비 문제 : 겉보기에 작은 세부 사항은 사용자 경험에 큰 영향을 줄 수 있습니다. 당신에게 완벽하게 읽을 수있는 것은 다른 사람들이 불가피 할 수 있습니다. 이 기사는 모든 사람이 디자인에 액세스 할 수 있도록하는 방법을 살펴 봅니다.

밝은 전화 화면에서 사이트를 보거나 그레이 스케일 필터를 적용하는 것과 같은 빠른 점검은 힌트를 제공 할 수 있지만 완벽하지는 않습니다. 주관적인 시각적 평가는 신뢰할 수 없습니다. 수학적 정밀도가 핵심입니다.

WCAG (Web Content Accientability Guidelines) 2.1은 필요한 표준을 제공합니다. 통과 등급 (AA)의 경우 대부분의 텍스트의 경우 4.5 : 1의 대비 비율, 더 큰 텍스트의 경우 3 : 1을 목표로합니다.

WCAG 비율의 과학

WCAG 가이드 라인은 aliased 텍스트와 같은 발전을 고려할 때 보조 기술없이 사용자를 수용 할 수 있습니다. 비율은 20/40 시력을 가진 개인의 가독성을 목표로합니다 (80 세의 비전과 유사). 시각적으로 매력적이지만 반 알리 아스는 대비를 약간 줄일 수 있습니다.

WCAG는 컴퓨터 사용자의 90%에 대한 접근성을 목표로 ANSI/HFES 100-2007 (컴퓨터 워크 스테이션의 인적 요소 엔지니어링)과 같은 기존 표준을 활용합니다.

대비 비율 이해

대비 비율은 가장 밝은 색상과 가장 어두운 색의 밝기 차이를 정량화합니다. 이것은 상대적인 휘도로 표현됩니다.

밝은 회색 (#888888) 배경의 불량한 예를 살펴 보겠습니다 : 청록색 텍스트 (#1ABC9C).

<h1 id="멋진-사이트의-제목"> 멋진 사이트의 제목</h1>

 H1 {
  배경색 : #888888;
  색상 : #1ABC9C;
}

읽을 수 있더라도 대비 ​​비율은 1.47 : 1 에 불과하며 WCAG 표준에 실패합니다. WordPress와 같은 많은 플랫폼은 그러한 낮은 대비에 대한 경고를 제공합니다.

대비를 계산하려면 상대적인 휘도와 약간의 수학을 이해해야합니다.

상대적인 휘도 : 더 깊은 다이빙

상대적인 휘도는 0 (검은 색) ~ 1 (흰색)의 척도의 색상의 밝기를 나타냅니다. 그것을 계산하려면 :

1. 16 진수를 RGB로 변환하십시오 : 육각 색상 코드 (예 : #1ABC9C)를 RGB 등가 (26, 188, 156)로 변환하십시오. 온라인 도구가이를 단순화합니다.

2. RGB 값을 선형화하십시오 : 각 RGB 구성 요소를 255로 나눕니다.

3. 감마 보정을 적용하십시오 : 이것은 컴퓨터와 인간의 밝기 인식의 차이를 설명합니다. 선형화 된 값이 0.03938 미만인 경우 12.92로 나눕니다. 그렇지 않으면 0.055를 추가하고 1.055로 나누고 2.4의 전력으로 올리십시오.

4. 휘도 계산 : 감마 수정 된 R, G 및 B 값에 각각 0.2126, 0.7152 및 0.0722를 곱한 다음 결과를 합산하십시오.

청록색의 경우 : 최종 휘도 (L1)는 약 0.386입니다. 회색 배경에 대한 반복은 L2 (약 0.246)를 산출합니다.

그런 다음 대비 비율은 (L1 0.05) / (L2 0.05)입니다. 이 경우 WCAG 최소값보다 훨씬 낮습니다.

다행히도 수많은 온라인 도구가 이러한 계산을 자동화합니다.

적절한 대비 보장

여러 접근성 도구가 사이트를 감사 할 수 있습니다. 웨이브는 대비 문제를 식별하고 개선을 제안하는 좋은 출발점입니다. 허용 가능한 대비 비율을 달성 할 때까지 권장 사항을 따르고 다시 테스트하고 반복하십시오.

적극적인 접근성

처음부터 접근성 가이드 라인을 통합합니다. 기존 프레임 워크 (부트 스트랩 또는 재료 설계와 같은)를 사용하여 종종 사전 테스트 된 컬러 팔레트를 제공하십시오. 특히 사용자 정의 요소에 대해 항상 대비를 확인하십시오.

Derek Kay의 프레임 워크 검토 및 미국 웹 디자인 시스템과 같은 리소스는 귀중한 통찰력과 도구를 제공합니다.

포괄적 인 웹 경험을 만드는 데 대비 비율을 이해하는 것이 중요합니다. 접근성 우선 순위는 모든 사용자에게 도움이됩니다. 사소한 대비 문제조차도 가독성과 사용자 경험에 큰 영향을 줄 수 있습니다.

위 내용은 웹 접근성 색상 대비 지침 및 비율 이해의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!