성공 기준(SC)
1.4.3 대비(최소)
(Level AA)
- 목표
- 더 많은 사람들이 텍스트를 볼 수 있다.
- 할 일
- 텍스트와 배경 사이에 충분한 대비를 제공해야 한다.
- 중요성
- 일부 사용자는 희미한 텍스트를 읽을 수 없다.
이 성공 기준의 목적은 텍스트와 배경 사이에 충분한 대비를 제공하여, 대비를 높이는 보조 기술을 사용하지 않더라도, 중등도 저시력 또는 대비 인지가 저하된 사용자도 텍스트를 읽을 수 있도록 하는것이다.
모든 시각적 콘텐츠 사용자에게는 가독성을 위해 텍스트와 배경의 상대적 휘도 간에 적절한 명암 대비가 필요하다. 다양한 시각 장애는 대비 민감도에 상당한 영향을 미칠 수 있으며, 색상(색조)과 관계없이 더 높은 명암 대비를 필요로 한다. 특정 색조를 구별할 수 없는 색각 이상 사용자의 경우, 색상 계열과 채도는 읽기 성능으로 평가되는 가독성에 거의 또는 전혀 영향을 미치지 않는다. 또한 특정 색조를 구별하지 못하는 능력은 명암 대비 인지에 부정적인 영향을 주지 않는다. 따라서 이 권고에서는 색상(색조)이 핵심 요소가 되지 않도록 대비를 계산한다.
정보를 전달하지 않는 장식용 텍스트는 제외된다. 예를 들어, 임의의 단어들이 배경을 구성하기 위해 사용되며, 그 단어들을 재배열하거나 다른 단어로 바꾸어도 의미가 변하지 않는다면 이는 장식으로 간주되며 이 기준을 충족할 필요가 없다.
더 큰 텍스트와 두꺼운 획을 가진 문자는 낮은 대비에서도 읽기 쉽다. 따라서 큰 텍스트에 대한 대비 요구사항은 더 낮다. 이는 특히 제목과 같은 페이지 디자인에서 저작자가 더 다양한 색상을 사용할 수 있도록 한다. 18포인트 텍스트 또는 14포인트 볼드 텍스트는 더 낮은 대비 비율을 적용해도 충분히 큰 것으로 간주된다(자세한 내용은 자료에 있는 The American Printing House for the Blind Guidelines for Large Printing 및 The Library of Congress Guidelines for Large Print 참고). “18포인트”와 “볼드”는 글꼴에 따라 의미가 다를 수 있으나, 매우 얇거나 특이한 글꼴을 제외하면 일반적으로 충분하다. 다양한 글꼴이 존재하기 때문에 일반적인 기준을 적용하며, 얇거나 특이한 글꼴에 대한 주의 사항은 큰 텍스트 정의에 포함되어 있다.
참고
이 성공 기준을 평가할 때, 포인트 단위 글꼴 크기는 사용자 에이전트에서 가져오거나, 사용자 에이전트가 수행하는 방식으로 글꼴 메트릭을 기반으로 계산해야 한다.
포인트 크기는 CSS3 값에서 정의된 CSS의 pt 단위를 기준으로 한다.
포인트 크기와 CSS 픽셀 간의 비율은 1pt = 1.333px이므로, 14pt와 18pt는 각각 약 18.5px과 24px에 해당한다.
이미지 편집 애플리케이션마다 기본 픽셀 밀도(예: 72ppi 또는 96ppi)가 다르기 때문에, 이미지 편집 도구 내에서 글꼴의 포인트 크기를 지정하는 것은 특정 크기의 텍스트를 표현하는 데 신뢰성이 떨어질 수 있다.
큰 텍스트 이미지를 생성할 때, 저작자는 결과 이미지의 텍스트가 본문 기본 크기의 약 1.2em 및 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: 대비(향상된)도 참고하라.
선정된 대비율의 근거
Section titled “선정된 대비율의 근거”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:1의 대비율이 필요하다. 유사한 경험적 결과와 동일한 논리에 따라, 시력 20/80 의 사용자는 약 7:1의 대비가 필요하며 이 비율은 성공기준 1.4.6에서 사용된다.
색각 이상(선천적, 후천적 모두)을 가진 사용자는 색상을 다르게 인지하므로, 정상 시력을 가진 사용자와는 다른 색상 및 상대적 휘도 대비를 경험한다. 이로 인해 이들 사용자들은 실제 대비와 가독성이 다르게 나타난다. 하지만 색각 이상은 매우 다양해서 정량적 데이터를 기반으로 일반적으로 적용 가능한 대비 색상 조합(대비를 위한)을 규정하는 것은 현실적으로 어렵다. 그래서 색상 인지와 무관한 대비를 요구하는 휘도 대비를 기준으로 삼는다. 다행히 휘도 영향의 대부분은 중파장 및 장파장 수용체에서 발생하며, 이들의 분광 반응은 크게 겹친다. 그 결과, 특정 색각 이상을 고려하지 않더라도 일반적으로 유효한 휘도 대비를 계산할 수 있다. 단, 장파장 계열 색상(주로 빨간색 계열)을 어두운 색상(일반적으로 검정으로 색이보임.) 위에 사용하는 경우, 적색맹(protanopia)사용자에게 문제가 될 수 있다. 이 때문에 빨간색과 검정색 조합을 피하는 권고 기법이 제공된다. 자세한 내용은 [ARDITI-KNOBLAUCH-1994] [ARDITI-KNOBLAUCH-1996] [ARDITI]를 참고한다.
참고
일부 인지 장애가 있는 사용자는 낮은 대비 색상 조합(hue)이나 색상(color)을 필요로 할 수 있으므로, 저작자는 콘텐츠의 전경색과 배경색을 조정할 수 있는 매커니즘을 제공하는 것이 허용되며 권장된다. 이 때 선택된 일부 조합은 여기에서 규정된 대비 수준보다 낮을 수 있다. 그러나 이런 경우, 여기 명시된 대비 값으로 되돌릴 수 있는 메커니즘이 제공된다면 이 성공 기준을 위반한 것으로 보지 않는다.
4.5:1의 대비율은 약 20/40 수준의 시력 저하를 가진 사용자가 일반적으로 겪는 대비 민감도 손실을 보완하기 위해 Level AA 기준으로 선택되었다. (20/40 시력은 약 4.5:1에 해당한다.) 20/40은 대략 80세 전후 고령자의 일반적인 시력으로 보고된다. [GITTINGS-FOZARD]
7:1의 대비 비율은 약 20/80 수준의 시력 저하를 가진 사용자가 일반적으로 겪는 대비 민감도 손실을 보완하기 위해 Level AAA 기준으로 선택되었다. 이보다 더 심한 시력 저하를 가진 사용자는 일반적으로 콘텐츠에 접근하기 위해 보조 기술을 사용하며(이러한 보조 기술에는 대비 향상 기능과 확대 기능이 포함되어 있다). 따라서 7:1 기준은 보조 기술을 사용하지 않는 저시력 사용자의 대비 민감도 손실을 보완하고, 색각 이상에 대해서도 대비 향상을 제공한다.
참고
[ISO-9241-3] 및 [ANSI-HFES-100-1988]의 계산은 본문 텍스트를 기준으로 한다. 훨씬 더 큰 텍스트에 대해서는 완화된 대비율이 제공된다.
수식에 대한 참고사항
Section titled “수식에 대한 참고사항”비선형 RGB 값을 선형 RGB 값으로 변환하는 계산은 [IEC-4WD 61966-2-1]을 기반으로 한다.
대비를 위한 수식(L1/L2)은 [ISO-9241-3] 및 [ANSI-HFES-100-1988] 표준을 기반으로 한다.
ANSI/HFS 100-1988 표준에서는 간접 조명의 기여도를 L1과 L2 계산에 포함하도록 요구한다. 여기서 사용된 .05 값은 [IEC-4WD 61966-2-1]의 전형적인 시력 방해 요인을 기반으로 한다.
이 성공 기준과 정의에서는 웹 콘텐츠 자체가 빛을 발산하지 않는다는 점을 반영해 “휘도(luminance)” 대신 “대비율(contrast ratio)“과 “상대 휘도(relative luminance)“라는 용어를 사용한다. 대비율은 표시 시 나타나는 상대 휘도의 정도를 나타내는 값이다. (비율이기 때문에 단위가 없다).
참고
웹 콘텐츠의 대비를 분석하기 위해 대비율을 활용하는 도구 목록은 관련 자료를 참고해야 한다.
키보드 초점을 표시하는 기법에 대해서는 2.4.7: 초점 시각화도 참고해야 한다.
비활성 사용자 인터페이스 구성요소
Section titled “비활성 사용자 인터페이스 구성요소”사용자 상호작용이 불가능한 사용자 인터페이스 구성 요소(예: 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 성공 기준에 대한 기법 이해, 특히 “기타 기법” 섹션을 참조하라.
아래에서 귀하의 콘텐츠와 일치하는 상황을 선택하라. 각 상황에는 해당 상황에 충분하다고 알려져 있고 문서화된 기법 또는 기법의 조합이 포함된다.
상황 A: text is less than 18 point if not bold and less than 14 point if bold
Section titled “상황 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
Section titled “상황 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
준수를 위해 필수는 아니지만 콘텐츠에 더 쉽게 접근할 수 있도록 다음과 같은 추가 기법을 고려해야 한다. 모든 기법을 사용할 수 없거나 모든 상황에서 효과적인 것은 아니다.
다음은 접근성 지침 실무 그룹에서 이 성공 기준의 실패로 간주하는 일반적인 실수이다.
- 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 성공 기준에 대한 점검 규칙 이해를 참고하라.