성공기준 이해 1.4.3:명도 대비 (최소) (Level AA)
요약
- 목표
- 더 많은 사람들이 텍스트를 볼 수 있다.
- 할 일
- 텍스트와 배경 사이에 충분한 대비를 제공한다.
- 중요성
- 어떤 사람들은 희미한 텍스트를 읽을 수 없다.
의도
이 성공 기준의 목적은 텍스트와 배경 사이에 충분한 대비를 제공하여 대비 강화 보조 기술을 사용하지 않고도 저시력이거나 대비 인식 장애가 있는 사람이 읽을 수 있도록 하는 것이다.
모든 시각적 콘텐츠 소비자의 경우 가독성을 높이기 위해 텍스트의 상대적 휘도와 배경 사이에 적절한 명암 대비가 필요하다. 다양한 시각 장애는 대비 감도에 상당한 영향을 미칠 수 있으며 색상(색조)에 관계없이 더 많은 명도 대비가 필요하다. 특정 색상 음영을 구별할 수 없는 사람(흔히 색맹
이라고 함)의 경우 색상과 채도는 읽기 수행능력에시 가독성에 거의 영향을 미치지 않거나 전혀 영향을 미치지 않는다. 또한 특정 색상 음영을 구별할 수 없다고 해서 명도 대비 인식에 부정적인 영향을 미치지는 않는다. 따라서 권장사항에서는 색상(색조)이 핵심 요소가 되지 않도록 대비를 계산한다.
장식적이고 정보를 전달하지 않는 텍스트는 제외된다. 예를 들어, 임의의 단어를 사용하여 배경을 만들고 의미를 바꾸지 않고 단어를 재배열하거나 대체할 수 있다면 장식용이므로 이 기준을 충족할 필요가 없다.
더 크고 문자 획이 넓은 텍스트는 대비가 낮을수록 읽기 쉽다. 따라서 더 큰 텍스트에 대한 대비 요구 사항은 더 낮다. 이를 통해 저작자는 큰 텍스트에 대해 더 넓은 범위의 색상 선택을 사용할 수 있으며 이는 페이지 디자인, 특히 제목에 도움이 된다. 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 글꼴 크기를 사용해야 한다.
이 적합 기준에 언급된 3:1 및 4.5:1 명암비는 임계값으로 처리된다. 계산된 명암비를 성공 기준 비율과 비교할 때 계산된 값은 반올림되어서는 안된다(예: 4.499:1은 4.5:1 임계값을 충족하지 못한다).
참고
저작자는 글꼴 다듬기/앤티앨리어싱에 대한 사용자 설정을 제어할 수 없으므로 이 성공 기준을 평가할 때 다음에 표시된 텍스트보다는 사용자 에이전트에서 얻은 화면의 전경색과 배경색 또는 기본 마크업과 스타일시트를 참조한다.
앤티앨리어싱으로 인해 특히 얇거나 특이한 글꼴은 기본 CSS에 정의된 실제 텍스트 색상보다 훨씬 더 희미한 색상으로 사용자 에이전트에 의해 렌더링될 수 있다. 이로 인해 텍스트의 명암비가 명목상 성공 기준을 통과하지만 실제로는 대비가 훨씬 낮은 상황이 발생할 수 있다. 이러한 경우 저작자는 더 강하고 두꺼운 선이 있는 글꼴을 선택하거나 이 성공 기준의 규범적 요구 사항을 초과하는 전경/배경 색상 조합을 목표로 하는 것이 가장 좋다.
텍스트의 대비 요구 사항은 텍스트 이미지(픽셀로 렌더링된 다음 이미지 형식으로 저장된 텍스트)에도 적용된다. 성공 기준 1.4.5: 텍스트 이미지를 참조하라.
이 요구 사항은 텍스트 이미지가 텍스트로 이해되도록 의도된 상황에 적용된다. 우연히 거리 표지판이 포함된 사진과 같은 부수적인 텍스트는 포함되지 않는다. 어떤 이유로든 모든 시청자에게 보이지 않도록 설계된 텍스트도 아니다. 회사 로고와 같은 스타일화된 텍스트는 페이지에서의 기능 측면에서 처리되어야 하며, 이는 대체 텍스트에 콘텐츠를 포함할 수도 있고 포함하지 않을 수도 있다. 로고 및 로고타입 이외의 기업 시각적 가이드라인은 예외에 포함되지 않는다.
이 조항에는 "그림 속에 상당히 다른 시각적 내용이 포함되어 있는 경우"라는 예외가 있다. 이 예외는 텍스트가 포함된 사진이나 그림과 특정한 디자인을 위해 텍스트 자체를 이미지로 대체한 경우를 구분하기 위한 것이다.
참고
텍스트 이미지는 픽셀화되는 경향이 있기 때문에 텍스트만큼 크기가 조정되지 않는다. 또한 일부 사용자에게 필요한 텍스트 이미지의 전경 및 배경 대비와 색상 조합을 변경하는 것이 더 어렵다. 따라서 가능하면 텍스트를 사용하는 것이 좋으며, 그렇지 않은 경우에는 더 높은 해상도의 이미지를 제공하는 것이 좋다.
이 성공 기준은 입력 예시(placeholder) 텍스트와 포인터가 개체 위에 있을 때나 개체에 키보드 포커스가 있을 때 표시되는 텍스트를 포함하여 페이지의 텍스트에 적용된다. 이들 중 하나가 페이지에 사용되는 경우 텍스트는 충분한 대비를 제공해야 한다.
이 성공 기준은 텍스트에만 적용되지만 차트, 그래프, 다이어그램 및 기타 텍스트 기반이 아닌 정보에 표시되는 콘텐츠에 대해서도 유사한 문제가 발생하며 이는 성공 기준 1.4.11 텍스트가 아닌 콘텐츠의 명도대비에서 다룬다.
참조하라 1.4.6: 명도 대비 (향상된).
채택된 비율에 대한 이론적 근거
3:1의 명암비는 표준 텍스트 및 비전에 대해 [[ISO-9241-3]] 및 [[ANSI-HFES-100-1988]]에서 권장하는 최소 수준이다. 4.5:1 비율은 중간 정도의 저시력, 선천적 또는 후천적 색맹, 일반적으로 노화에 수반되는 대비 감도 손실로 인해 발생하는 대비 손실을 설명하기 위해 이 성공 기준에서 사용된다.
이 근거는 a) ANSI 표준에서 정상 관찰자에 대한 최소 허용 대비는 3:1 대비율을 채택한 것과 b) 실증적 연구에서 인구 집단의 시력이 20/40일 때 대비 감도 손실이 약 1.5 정도임을 발견한 데 기반한다 [[ARDITI-FAYE]]. 따라서 20/40 시력의 사용자는 3 * 1.5 = 4.5 to 1의 대비율이 필요하다. 유사한 실증적 발견과 동일한 논리에 따르면, 20/80 시력의 사용자는 약 7:1의 대비율이 필요하다. 이 대비율은 성공 기준 1.4.6에서 사용된다.
색각 이상(선천적, 후천적 모두)이 있는 사용자들은 정상 시력 사용자들과 다르게 색상과 상대적 명도 대비를 인식한다. 이로 인해 이 집단에서는 효과적인 대비와 가독성이 다르다. 하지만 색각 이상은 매우 다양해서 정량적 데이터에 기반하여 일반적 사용을 위한 효과적인 색상 조합(대비를 위한)을 규정하기 어렵다. 그래서 색상 인식과 무관한 명도 대비를 요구하는 것이 이를 해결한다. 다행히도 대부분의 명도 기여분은 중파장과 장파장 수용기에서 왔고, 이들의 스펙트럼 반응은 상당 부분 중복된다. 그 결과 적색맹(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에서 비활성화된 컨트롤)는 대비 요구 사항을 충족할 필요가 없다. 비활성 사용자 인터페이스 구성 요소는 표시되지만 운용할 수는 없다. 예를 들어 양식 하단에 표시되지만 양식의 모든 필수 필드가 완료될 때까지 활성화할 수 없는 제출 버튼이 있다.
이점
- 저시력인 사람들은 배경과 대조되지 않는 텍스트를 읽는 데 어려움을 겪는 경우가 많다. 색각 이상으로 대비가 더욱 낮아지는 경우 상황은 더욱 악화될 수 있다. 텍스트와 배경 사이에 최소 명도 대비를 제공하면 사람이 전체 색상 범위를 보지 못하더라도 텍스트를 더 쉽게 읽을 수 있다. 색깔이 전혀 보이지 않는 소수에게도 효과가 있다.
관련 자료
자료는 정보 제공 목적으로만 제공되며 보증을 암시하지 않는다.
- Colour Contrast Analyser application
- Luminosity Colour Contrast Ratio Analyser
- Colour Contrast Check
- Contrast Ratio Calculator
- Adobe Color - Color Contrast Analyzer Tool
- Atypical colour response
- Colors On the Web Color Contrast Analyzer
- Tool to convert images based on color loss so that contrast is restored as luminance contrast when there was only color contrast (that was lost due to color deficiency)
- List of color contrast tools
- The American Printing House for the Blind Guidelines for Large Printing
- National Library Service for the Blind and Physically Handicapped (NLS), The Library of Congress reference guide on large print materials
- Types of Color Blindness, National Eye Institute (NEI), National Institutes of Health (NIH), U.S. Department of Health and Human Services (HHS)
- Effects of chromatic and luminance contrast on reading, Knoblauch et al., 1991
- Achromatic luminance contrast sensitivity in X-linked color-deficient observers: an addition to the debate, Márta Janáky et al., 2013
- Contrast sensitivity of patients with congenital color vision deficiency, Cagri Ilhan et al., 2018
기법
이 섹션에서 번호가 매겨진 각 항목은 WCAG 실무 그룹이 이 성공 기준을 충족하기에 충분하다고 간주하는 기법 또는 기법의 조합을 나타낸다. 그러나 이러한 특정 기법을 사용할 필요는 없다. 다른 기법 사용에 대한 자세한 내용은 WCAG 성공 기준에 대한 기법 이해, 특히 "기타 기법" 섹션을 참고하라.
충분 기법
아래에서 귀하의 콘텐츠와 일치하는 상황을 선택하라. 각 상황에는 해당 상황에 충분하다고 알려져 있고 문서화된 기법 또는 기법의 조합이 포함된다.
상황 A: text is less than 18 point if not bold and less than 14 point if bold
- G18: Ensuring that a contrast ratio of at least 4.5:1 exists between text (and images of text) and background behind the text
- G148: Not specifying background color, not specifying text color, and not using technology features that change those defaults
- G174: Providing a control with a sufficient contrast ratio that allows users to switch to a presentation that uses sufficient contrast
상황 B: text is at least 18 point if not bold and at least 14 point if bold
- G145: Ensuring that a contrast ratio of at least 3:1 exists between text (and images of text) and background behind the text
- G148: Not specifying background color, not specifying text color, and not using technology features that change those defaults
- G174: Providing a control with a sufficient contrast ratio that allows users to switch to a presentation that uses sufficient contrast
조언 기법
준수를 위해 필수는 아니지만 콘텐츠에 더 쉽게 접근할 수 있도록 다음과 같은 추가 기법을 고려해야 한다. 모든 기법을 사용할 수 없거나 모든 상황에서 효과적인 것은 아니다.
오류
다음은 WCAG 실무 그룹에서 이 성공 기준의 실패로 간주하는 일반적인 실수이다.
- F24: Failure of Success Criterion 1.4.3, 1.4.6 and 1.4.8 due to specifying foreground colors without specifying background colors or vice versa
- F83: Failure of Success Criterion 1.4.3 and 1.4.6 due to using background images that do not provide sufficient contrast with foreground text (or images of text)
점검 규칙
다음은 이 성공 기준의 특정 측면에 대한 점검 규칙이다. WCAG 준수 여부를 확인하기 위해 이러한 특정 점검 규칙을 사용할 필요는 없지만 이것은 정의되고 승인된 검사 방법이다. 점검 규칙 사용에 대한 자세한 내용은 WCAG 성공 기준에 대한 점검 규칙 이해를 참고하라.