사이트를 제작할 때는 텍스트와 배경의 명암비를 최소 4.5:1 이상으로 만들어야 합니다.
기술설명
이 기술의 목적은 사용자가 텍스트를 읽을 수 있게 하는 것입니다.
'성공 기준 1.4.3' 내용에서는 '굵게 표시되지 않은, 크기 18포인트 미만의 텍스트'와 '굵게 표시된, 크기 14포인트 미만의 텍스트' 들에 대한 최소의 명함비를 설명하고 있습니다.
'성공 기준 1.4.5' 내용에서는 이 텍스트들의 명암비 7:1에 대한 완화를 설명하고 있습니다.
*성공 기준 1.4.3 - https://www.w3.org/TR/2008/REC-WCAG20-20081211/#visual-audio-contrast-contrast)
*이 성공 기준을 평가할 때는 사용자가 보고 있는 브라우저에서 보여 지는 텍스트의 크기를 기준으로 계산되어야 합니다. 텍스트의 크기가 CSS에서 pt(포인트) 단위로 사용된 경우 CSS3에서 제공하는 값을 기반으로 합니다. 즉 1pt(포인트)는 1.333px(픽셀)이 됩니다. 그럼 텍스트 크기가 14pt(포인트)인 경우 18.5px(픽셀)이 되며, 18pt(포인트)인 경우 24px(픽셀)이 됩니다.
배경이 검은색이나 흰색으로 단일하게 사용된 경우, 그 위에 있는 텍스트들의 명암은 균일할 것입니다.
이때 배경과 텍스트간의 명암비는 '4.5:1'이 되어야 합니다.
배경과 텍스트간의 명암이 균일 하지 못한 경우, 텍스트에 배경이나 음영을 주어 명암비 '4.5:1'을 유지 시키는 방법도 있습니다.
예를 들어, 위에 있는 텍스트가 아래 있는 텍스트보다 밝은 경우, 명암이 균일하지 못합니다.
이럴 때, 디자이너는 명암비 4.5:1을 균일하게 유지 할 수 있도록 텍스트에 어두운 배경색을 주거나, 텍스트에 1px이상의 윤곽선을 주어야 합니다.
배경의 명암이 균일하지 못하여 텍스트와의 명암비가 일정하지 못한 경우, 밝기를 조정하여 이를 해결 할 수 있습니다.
예를 들어, 페이지 한쪽 가장자리가 매우 밝고 다른 한쪽은 어두운 경우, 양쪽을 명암비 기준을 만족할 만한 색상이 없는 경우 텍스트의 밝기를 변경하여 해결해야 합니다.
또 다른 방법으로는 배경 이미지나 배경 색상이 선명하지 않은 경우 텍스트 주변에 후광을 넣어 일반적이니 명암비를 주는 것입니다.
예시
- 글자색을 회사의 로고와 어울리는 밝은 색으로 사용하려고 합니다. 글자가 잘 보일 수 있도록 배경을 검정색으로 합니다.
- 사이트에서 대학 캠퍼스 사진 위에 텍스트를 배치하려고 합니다. 사진은 위치에 따라 색상과 밝기가 다양합니다.
그래서 글자에 흰색 그림자효과를 주고 글자는 검은색으로 하여 명암비 4.5:1을 유지 시켰습니다.
자료
- 색상 대비 분석기(CCA) (https://www.tpgi.com/color-contrast-checker/)
- 명도 분석기 (https://juicystudio.com/services/luminositycontrastratio.php)
- 색상 대비 분석기: 파이어폭스 확장 (https://juicystudio.com/article/colour-contrast-analyser-firefox-extension.php)
- 비정형 색상 반응 https://www.w3.org/Graphics/atypical-color-response
- 색상 대비 분석기 http://www.colorsontheweb.com/Color-Tools/Color-Contrast-Analyzer
- 색맹인 사람이 사물을 어떻게 보이는지를 보여주는 기능 https://www.vischeck.com/vischeck/
- 웹 디자인 접근성 향상을 위한 색상 대비 검사 도구 10가지 https://www.456bereastreet.com/archive/200709/10_colour_contrast_checking_tools_to_improve_the_accessibility_of_your_design/
점검절차
1. 다음 공식을 사용하여 각 문자들의 상대적 밝기를 측정합니다.
| L = 0.2126 * R + 0.7152 * G + 0.0722 * B 여기서 R , G 및 B는 다음과 같이 정의됩니다. R sRGB <= 0.03928이면 R = R sRGB /12.92, else R = ((R sRGB +0.055)/1.055) ^ 2.4 G sRGB <= 0.03928이면 G = G sRGB / 12.92, else G = ((G sRGB +0.055)/1.055) ^ 2.4 B sRGB <= 0.03928이면 B = B sRGB / 12.92 else B = ((B sRGB +0.055)/1.055) ^ 2.4 |
| R sRGB , G sRGB 및 B sRGB 는 다음과 같이 정의됩니다. R sRGB = R 8bit / 255 G sRGB = G 8bit / 255 B sRGB = B 8bit / 255 |
| * "^" 문자는 지수 연산자입니다. * 앨리어싱된 문자의 경우 문자 가장자리에서 2픽셀 떨어진 상대 휘도 값을 사용합니다. |
2. 동일한 공식을 사용하여 문자 바로 앞에 있는 배경의 픽셀의 상대적 밝기를 측정합니다.
3. 다음 공식을 사용하여 문자와 배경의 명암비를 계산합니다.
| (L1 + 0.05) / (L2 + 0.05), 여기서 L1은 전경색이나 배경색 중 밝은 색상의 상대적 밝기 입니다. L2는 전경색이나 배경색 중 더 어두운 색상의 상대적 밝기 입니다. |
4. 글자와 배경의 명암비가 4.5:1보다 커야 합니다.
4번 절차를 만족해야 성공입니다.
나의 정리
G17에서는 텍스트와 배경의 명암비를 7:1로 하라고 했는데, 여기에서는 4.5:1로 하라고 나와 있습니다.
G18은 G17의 명암비 7:1에 대한 완화 내용입니다.
'7:1'은 이상적인 명암비이고, 4.5:1은 최소한의 명암비라고 생각하시면 됩니다.
텍스트와 배경의 명암비를 7:1로 하여 만들면, 많은 사람들이 편하게 볼 수 있는 아주 이상적이고 적합한 명암비라고 말하고 있는 것입니다. 하지만 이를 지킬 수 없을 경우 최소 4.5:1은 지켜 달라는 것입니다.
그러니 사이트를 제작할 때는 텍스트와 배경의 명암비를 최소 4.5:1 이상으로 만들어야 합니다.
홈페이지에서 사람들이 텍스트를 읽을 때 텍스트의 크기도 중요합니다. 그래서 굵은 텍스트일 때는 14pt(=18.5px), 일반 굵기의 텍스트는 18pt(=24px)가 읽기 좋은 크기라고 합니다. 여기에 가독성을 높이려면 명암비 4.5:1을 지켜야 합니다.
다른 말로는 4.5:1이상을 유지해야 한다는 것입니다.
이를 유지하게 하기 위한 기술은 다음과 같습니다.
글자색과 배경색을 모두 단일색상으로 사용하는 겁니다. 텍스트가 있는 배경의 색을 흰색으로 하고 텍스트 색상을 검정색으로 하면 명암비 4.5:1 이상을 유지 할 수 있습니다.
만약 배경이 알록달록 여러 색상을 가지고 있거나, 이미지인 경우, 그 위에 텍스트들은 균일한 명암을 가질 수 없습니다.
배경의 밝은색 부분위의 검은색 텍스트는 명암 차이가 높아 텍스트가 잘 보일 겁니다.
하지만 어두운 배경 부분위의 검은색 텍스트는 명암 차이가 낮아 텍스트가 잘 안보일 겁니다.
이럴 때에는 텍스트에 흰색 배경색을 넣어 해결합니다. 또는 텍스트에 1픽셀 이상의 흰색 윤곽선을 넣어줍니다.
마지막으로 텍스트에 흰색 그림자를 주어 명암 차이를 높여주는 방법이 있습니다.
되도록 배경은 흰색 텍스트는 검은색으로 사용하면 좋을 것 같습니다.
혹 색상위에 텍스트를 배치해야 한다면 배경과 텍스트가 구분 될 수 있도록 만들어 줍니다.
명암비 4.5:1은 사용자들이 텍스트를 잘 볼 수 있도록 해주는 최소한의 배려라고 생각하면 좋겠습니다.
G18: Ensuring that a contrast ratio of at least 4.5:1 exists between text (and images of text) and background behind the text
https://www.w3.org/TR/WCAG20-TECHS/G18.html
G18: Ensuring that a contrast ratio of at least 4.5:1 exists between text (and images of text) and background behind
The objective of this technique is to make sure that users can read text that is presented over a background. For Success Criterion 1.4.3, this technique describes the minimum contrast ratio for text that is less than 18 point (if not bold) and less than 1
www.w3.org
'웹접근성지침(WCAG2.0)' 카테고리의 다른 글
| [웹접근성 지침-일반기술 G21] 사용자가 콘텐츠에 갇히지 않도록 해야 한다. (0) | 2024.01.25 |
|---|---|
| [웹접근성 지침-일반기술 G19] 어떤 요소든 1초 동안 3번 이상 깜빡이면 안 됩니다. (0) | 2024.01.23 |
| [웹접근성 지침-일반기술 G17] 텍스트(또는 이미지 텍스트)와 그 텍스트의 배경에 대한 명암비는 7:1이어야 한다 (0) | 2024.01.17 |
| [웹접근성 지침-일반기술 G15] '깜박이는 콘텐츠' 또는 '깜빡이는 빨간색'은 정해진 '임계값'을 시켜야 한다. (1) | 2024.01.10 |
| [웹접근성 지침-일반기술 G14] 색상 차이로 전달되는 정보는 텍스트로도 제공되어야 합니다. (1) | 2024.01.05 |
