본문 바로가기

성공기준 이해 1.4.6:명도 대비 (향상된) (Level AAA)

요약

목표
고대비가 필요한 사람들이 텍스트를 볼 수 있다.
할 일
텍스트와 배경의 대비를 높인다.
중요성
어떤 사람들은 최소한의 대비로는 텍스트를 읽을 수 없다.

의도

이 성공 기준의 목적은 중간 정도의 저시력(고대비 보조 기술을 사용하지 않는 사람)자가 읽을 수 있도록 텍스트와 배경 사이에 충분한 대비를 제공하는 것이다. 색맹이 없는 사람의 경우 색상과 채도는 읽기 능력 평가에서 가독성에 거의 영향을 미치지 않거나 전혀 영향을 미치지 않는다(Knoblauch et al., 1991). 색각 이상은 명도 대비에 다소 영향을 미칠 수 있다. 따라서 권고안에서는 색상이 주요 요소가 아닌 방식으로 대비를 계산하여 색각 이상이 있는 사람들도 텍스트와 배경 사이에 적절한 대비가 있을 수 있도록 한다.

장식적이고 정보를 전달하지 않는 텍스트는 제외된다. 예를 들어, 임의의 단어를 사용하여 배경을 만들고 의미를 바꾸지 않고 단어를 재배열하거나 대체할 수 있다면 장식용이므로 이 기준을 충족할 필요가 없다.

더 크고 문자 획이 넓은 텍스트는 대비가 낮을수록 읽기 쉽다. 따라서 더 큰 텍스트에 대한 대비 요구 사항은 더 낮다. 이를 통해 저작자는 큰 텍스트에 대해 더 넓은 범위의 색상 선택을 사용할 수 있으며 이는 페이지 디자인, 특히 제목에 도움이 된다. 18포인트 텍스트 또는 14포인트 굵은 텍스트는 더 낮은 명암비가 필요할 만큼 큰 것으로 판단된다. (자료의 시각 장애인을 위한 미국 인쇄소의 대형 인쇄 지침 및 의회 도서관의 대형 인쇄 지침 참조) "18포인트"와 "굵게"는 글꼴에 따라 의미가 다를 수 있지만 매우 얇거나 특이한 글꼴을 제외하면 충분하다. 다양한 글꼴이 있으므로 일반적인 측정값이 사용되며, 큰 텍스트 정의에는 얇거나 특이한 글꼴에 대한 참고 사항이 포함된다.

참고

이 성공 기준을 평가할 때 글꼴 크기(포인트)는 사용자 에이전트에서 얻거나 사용자 에이전트가 수행하는 방식으로 글꼴 메트릭에서 계산해야 한다. 포인트 크기는 CSS3 값에 정의된 CSS pt 크기를 기반으로 한다. 포인트 크기와 CSS 픽셀 크기의 비율은 1pt = 1.333px이므로 14pt와 18pt는 대략 18.5px와 24px에 해당한다.

이미지 편집 애플리케이션마다 기본적으로 픽셀 밀도(예: 72ppi 또는 96ppi)가 다르기 때문에 텍스트를 특정 크기로 표시할 때 이미지 편집 애플리케이션 내에서 글꼴의 포인트 크기를 지정하는 것은 신뢰할 수 없다. 대형 텍스트 이미지를 생성할 때 저작자는 결과 이미지의 텍스트가 대략 1.2 및 1.5em 또는 본문 텍스트 기본 크기의 120% 또는 150%인지 확인해야 한다. 예를 들어, 72ppi 이미지의 경우 저작자는 대형 텍스트 이미지를 사용자에게 성공적으로 표시하기 위해 약 19pt 및 24pt 글꼴 크기를 사용해야 한다.

이 성공 기준에 언급된 7:1 및 4.5:1 명암비는 임계값으로 처리된다. 계산된 명암비를 성공 기준 비율과 비교할 때 계산된 값을 반올림해서는 안된다(예: 4.499:1은 4.5:1 임계값을 충족하지 않습니다).

참고

저작자는 글꼴 다듬기/앤티앨리어싱에 대한 사용자 설정을 제어할 수 없으므로 이 성공 기준을 평가할 때 다음에 표시된 텍스트보다는 사용자 에이전트에서 얻은 화면의 전경색과 배경색 또는 기본 마크업과 스타일시트를 참조한다.

앤티앨리어싱으로 인해 특히 얇거나 특이한 글꼴은 기본 CSS에 정의된 실제 텍스트 색상보다 훨씬 더 희미한 색상으로 사용자 에이전트에 의해 렌더링될 수 있다. 이로 인해 텍스트의 명암비가 명목상 성공 기준을 통과하지만 실제로는 대비가 훨씬 낮은 상황이 발생할 수 있다. 이러한 경우 저작자는 더 강하고 두꺼운 선이 있는 글꼴을 선택하거나 이 성공 기준의 규범적 요구 사항을 초과하는 전경/배경 색상 조합을 목표로 하는 것이 가장 좋다.

텍스트의 대비 요구 사항은 텍스트 이미지(픽셀로 렌더링된 다음 이미지 형식으로 저장된 텍스트)에도 적용된다. 성공 기준 1.4.5: 텍스트 이미지를 참조하라.

이 요구 사항은 텍스트 이미지가 텍스트로 이해되도록 의도된 상황에 적용된다. 우연히 거리 표지판이 포함된 사진과 같은 부수적인 텍스트는 포함되지 않는다. 어떤 이유로든 모든 시청자에게 보이지 않도록 설계된 텍스트도 아니다. 회사 로고와 같은 스타일화된 텍스트는 페이지에서의 기능 측면에서 처리되어야 하며, 이는 대체 텍스트에 콘텐츠를 포함할 수도 있고 포함하지 않을 수도 있다. 로고 및 로고타입 이외의 기업 시각적 가이드라인은 예외에 포함되지 않는다.

이 조항에는 "그림 속에 상당히 다른 시각적 내용이 포함되어 있는 경우"라는 예외가 있다. 이 예외는 텍스트가 포함된 사진이나 그림과 특정한 디자인을 위해 텍스트 자체를 이미지로 대체한 경우를 구분하기 위한 것이다.

참고

텍스트 이미지는 픽셀화되는 경향이 있기 때문에 텍스트만큼 크기가 조정되지 않는다. 또한 일부 사용자에게 필요한 텍스트 이미지의 전경 및 배경 대비와 색상 조합을 변경하는 것이 더 어렵다. 1.4.5: 텍스트 이미지를 참조하라.

이 성공 기준은 입력 예시(placeholder) 텍스트와 포인터가 개체 위에 있을 때나 개체에 키보드 포커스가 있을 때 표시되는 텍스트를 포함하여 페이지의 텍스트에 적용된다. 이들 중 하나가 페이지에 사용되는 경우 텍스트는 충분한 대비를 제공해야 한다.

이 성공 기준은 텍스트에만 적용되지만 차트, 그래프, 다이어그램 및 기타 텍스트 기반이 아닌 정보에 표시되는 콘텐츠에 대해서도 유사한 문제가 발생하며 이는 성공 기준 1.4.11 텍스트가 아닌 콘텐츠의 명도대비에서 다룬다.

채택된 비율에 대한 이론적 근거

3:1의 명암비는 표준 텍스트 및 비전에 대해 [[ISO-9241-3]] 및 [[ANSI-HFES-100-1988]]에서 권장하는 최소 수준이다. 4.5:1 비율은 중간 정도의 저시력, 선천적 또는 후천적 색맹, 일반적으로 노화에 수반되는 대비 감도 손실로 인해 발생하는 대비 손실을 설명하기 위해 성공 기준 1.4.3에서 사용된다.

이 근거는 a) ANSI 표준에서 정상 관찰자에 대한 최소 허용 대비는 3:1 대비율을 채택한 것과 b) 실증적 연구에서 인구 집단의 시력이 20/40일 때 대비 감도 손실이 약 1.5 정도임을 발견한 데 기반한다 [[ARDITI-FAYE]]. 따라서 20/40 시력의 사용자는 3 * 1.5 = 4.5 to 1의 대비율이 필요하다. 유사한 실증적 발견과 동일한 논리에 따르면, 20/80 시력의 사용자는 약 7:1의 대비율이 필요하다. 이 대비율은 이 성공 기준에서 사용된다.

색각 이상(선천적, 후천적 모두)이 있는 사용자들은 정상 시력 사용자들과 다르게 색상과 상대적 명도 대비를 인식한다. 이로 인해 이 집단에서는 효과적인 대비와 가독성이 다르다. 하지만 색각 이상은 매우 다양해서 정량적 데이터에 기반하여 일반적 사용을 위한 효과적인 색상 조합(대비를 위한)을 규정하기 어렵다. 그래서 색상 인식과 무관한 명도 대비를 요구하는 것이 이를 해결한다. 다행히도 대부분의 명도 기여분은 중파장과 장파장 수용기에서 왔고, 이들의 스펙트럼 반응은 상당 부분 중복된다. 그 결과 적색맹(protanopia)과 같이 어두운 색상(일반적으로 검정색으로 보임)에 비해 주로 장파장 색상을 사용하는 경우를 제외하면, 특정 색각 이상과 관계없이 효과적인 명도 대비를 계산할 수 있다. (이 때문에 우리는 빨강과 검정의 조합을 피하라는 권고 기법을 제공한다.) 자세한 내용은 [ARDITI-KNOBLAUCH-1994] [ARDITI-KNOBLAUCH-1996] [ARDITI]를 참조하라.

참고

인지 장애가 있는 일부 사람들은 대비가 낮은 색상 조합이나 색조를 요구하므로 저작자가 콘텐츠의 전경색과 배경색을 조정하는 매커니즘을 제공하는 것을 허용하고 권장한다. 선택할 수 있는 일부 조합의 대비 수준은 여기에 지정된 것보다 낮을 수 있다. 여기에 명시된 필수 값으로 돌아가는 매커니즘이 있는 경우 이는 이 성공 기준을 위반하는 것이 아니다.

4.5:1의 명암비는 Level AA에서 채택되었다. 이는 약 20/40 시력에 해당하는 시력 손실이 있는 사용자가 일반적으로 경험하는 대비 감도의 손실을 보상하기 때문이다. (20/40은 대략 4.5:1로 계산됩니다.) 20/40은 일반적으로 대략 80세 노인의 전형적인 시력으로 보고된다. [[GITTINGS-FOZARD]]

Level AAA에서 7:1의 명암비를 채택한 이유는 약 20/80 시력에 해당하는 시력 손실이 있는 사용자가 일반적으로 경험하는 명암 감도 손실을 보상하기 때문이다. 이 정도 이상의 시력 상실을 가진 사람들은 일반적으로 보조 기술을 사용하여 콘텐츠에 접근한니다(보조 기술에는 일반적으로 대비 향상 기능과 확대 기능이 내장되어 있다). 따라서 7:1 수준은 일반적으로 보조 기술을 사용하지 않는 저시력 사용자가 경험하는 대비 감도 손실을 보상하고 색약에 대한 대비 향상도 제공한다.

참고

[[ISO-9241-3]] 및 [[ANSI-HFES-100-1988]]의 계산은 본문 텍스트용이다. 훨씬 더 큰 텍스트에는 완화된 명암비가 제공된다.

수식에 대한 참고사항

비선형 RGB 값에서 선형 RGB 값으로의 변환은 IEC/4WD 61966-2-1 [[IEC-4WD]]를 기반으로 한다.

대비 공식(L1/L2)은 [[ISO-9241-3]] 및 [[ANSI-HFES-100-1988]] 표준을 기반으로 한다.

ANSI/HFS 100-1988 표준에서는 L1 및 L2 계산에 주변광의 영향을 포함하도록 요구한다. 사용된 .05 값은 [[IEC-4WD]]의 전형적인 시력 방해요인을 기반으로 한다.

이 성공 기준과 그 정의에서는 웹 콘텐츠 자체가 빛을 발산하지 않는다는 사실을 반영하기 위해 "휘도" 대신 "명도대비"와 "상대 휘도"라는 용어를 사용한다. 명도대비는 표시될 때 발생하는 상대적 휘도를 측정한다. (비율이므로 무차원이다.)

참고

명암비를 활용하여 웹 콘텐츠의 대비를 분석하는 도구 목록은 관련 자료를 참조하라.

키보드 초점을 표시하는 기술은 2.4.7: 초점 시각화를 참조하라.

비활성 사용자 인터페이스 구성요소s

상호 작용할 수 없는 사용자 인터페이스 구성 요소(예: HTML에서 비활성화된 컨트롤)는 대비 요구 사항을 충족할 필요가 없다. 비활성 사용자 인터페이스 구성 요소는 표시되지만 운용할 수는 없다. 예를 들어 양식 하단에 표시되지만 양식의 모든 필수 필드가 완료될 때까지 활성화할 수 없는 제출 버튼이 있다.

대비되지 않는 회색 텍스트가 있는 회색 버튼입니다.
그림 1 기본 브라우저 스타일을 사용하는 비활성 버튼

이점

  • 저시력인 사람들은 배경과 대비가 낮은 텍스트를 읽는 데 어려움을 겪는 경우가 많다. 색각 이상으로 대비가 더욱 낮아지는 경우 상황은 더욱 악화될 수 있다. 텍스트와 배경 사이에 최소 명도대비율을 제공하면 사람이 전체 색상 범위를 보지 못하더라도 텍스트를 더 쉽게 읽을 수 있다. 색깔이 전혀 보이지 않는 희귀한 개인에게도 효과가 있다.

관련 자료

자료는 정보 제공 목적으로만 제공되며 보증을 암시하지 않는다.

기법

이 섹션에서 번호가 매겨진 각 항목은 WCAG 실무 그룹이 이 성공 기준을 충족하기에 충분하다고 간주하는 기법 또는 기법의 조합을 나타낸다. 그러나 이러한 특정 기법을 사용할 필요는 없다. 다른 기법 사용에 대한 자세한 내용은 WCAG 성공 기준에 대한 기법 이해, 특히 "기타 기법" 섹션을 참고하라.

충분 기법

아래에서 귀하의 콘텐츠와 일치하는 상황을 선택하라. 각 상황에는 해당 상황에 충분하다고 알려져 있고 문서화된 기법 또는 기법의 조합이 포함된다.

상황 A: text is less than 18 point if not bold and less than 14 point if bold

상황 B: text is as least 18 point if not bold and at least 14 point if bold

조언 기법

준수를 위해 필수는 아니지만 콘텐츠에 더 쉽게 접근할 수 있도록 다음과 같은 추가 기법을 고려해야 한다. 모든 기법을 사용할 수 없거나 모든 상황에서 효과적인 것은 아니다.

오류

다음은 WCAG 실무 그룹에서 이 성공 기준의 실패로 간주하는 일반적인 실수이다.

점검 규칙

다음은 이 성공 기준의 특정 측면에 대한 점검 규칙이다. WCAG 준수 여부를 확인하기 위해 이러한 특정 점검 규칙을 사용할 필요는 없지만 이것은 정의되고 승인된 검사 방법이다. 점검 규칙 사용에 대한 자세한 내용은 WCAG 성공 기준에 대한 점검 규칙 이해를 참고하라.

맨 위로