텍스트를 문제없이 읽기 위해서는 텍스트와 배경의 명암비가 '7:1'이어야 합니다.
기술설명
이 기술의 목적은 배경이미지 위에 있는 텍스트를 잘 읽을 수 있게 하기 위한 것입니다.
이 기술은 4.5:1 대비를 뛰어넘는,, 더 높은 단계의 명암비를 제공하여 시력이 낮은 사람들도 읽기 쉽도록 해야 합니다.
텍스트의 배경이 한 가지 색으로만 된 경우, 텍스트 각각의 글자와 배경의 명암비가 7:1이 되도록 해야 합니다.
텍스트의 배경에 문양이나 패턴이 있는 경우, 텍스트에 음영을 주어 텍스트와 배경의 명암비가 7:1이 되도록 해야 합니다.
페이지 전체에 배경이미지를 사용하는 경우, 배경이미지의 위치에 따라 밝기와 색상이 다릅니다. 그러므로 텍스트의 색을 거기에 맞게 변경하여 명암비를 유지해야 합니다.
만약 배경 이미지의 전체 색상과 밝기가 비슷하다면, 배경 이미지 위에 있는 텍스트 주위에 후광을 주는 것도 방법입니다.
예시
- 회사 로고와 어울리는 밝은 색을 텍스트 색상으로 사용하려고 합니다.
텍스트가 잘 보이도록 검은색 배경을 사용하였습니다.
- 대학 캠퍼스 사진 위에 테스트가 있습니다. 사진은 위치에 따라 색상과 밝기가 다양합니다.
그래서 텍스트는 검은색으로 하고 텍스트에 흰색 음영을 주어 명암비 7: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/
관련기술
G148: 배경색을 지정하지 않고, 텍스트 색상을 지정하지 않고, 해당 기본값을 변경하는 기술 기능을 사용하지 않습니다.
G174: 사용자가 충분한 대비를 사용하는 프레젠테이션으로 전환할 수 있도록 충분한 대비 비율을 갖춘 컨트롤 제공
점검절차
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. 글자와 배경의 명암비가 7:1인지 확인합니다..
4번 절차를 만족해야 성공입니다.
나의 정리
사이트를 보다 보면 이미지나 색상 위에 텍스트가 위치하는 경우가 있습니다.
예를 들면 빨간색 바탕에 텍스트가 있거나, 풍경사진 위에 텍스트가 있는 것들을 말합니다.
이런 경우 사용자가 텍스트를 문제없이 읽기 위해서는 텍스트와 배경의 명암비가 '7:1'이어야 한다는 것입니다.
최소한의 명암비 '4.5:1'을 지켜도 되지만 '7:1'로 하면 사용자가 더 편하게 텍스트를 읽을 수 있다고 합니다.
- 텍스트 밑에 있는 배경색이 검은색이나 흰색처럼 단색으로 되어 있는 경우에는 명암비 7:1을 지킬 수 있는 텍스트 색상을 수정하면 됩니다.
- 텍스트 밑에 패턴이나 사진이 배경인 경우에는 텍스트 주변에 그림자나 외곽선을 효과를 주어 명암비를 지켜내야 합니다.
텍스트 밑에 밝기가 다양한 이미지를 배경으로 하는 경우, 텍스트 하나마다 배경에 대한 명암비가 다양할 것입니다.
그러니 배경 이미지를 어둡게 편집하거나 텍스트에 음영효과를 주어야 합니다.
점검 절차를 보시면 알 수 없는 공식으로 명암비를 찾으라고 하는데요.
포털에 '웹접근성 명암비'로 검색해 보시면 명암비 계산해 주는 툴 들이 나옵니다.
툴들을 이용하셔서 점검해 보시는 것을 추천합니다.
G17: Ensuring that a contrast ratio of at least 7:1 exists between text (and images of text) and background behind the text
https://www.w3.org/TR/WCAG20-TECHS/G17.html
G17: Ensuring that a contrast ratio of at least 7:1 exists between text (and images of text) and background behind the
The objective of this technique is to make sure that users can read text that is presented over a background. This technique goes beyond the 4.5:1 contrast technique to provide a higher level of contrast to make it easier for people with low vision to read
www.w3.org
'웹접근성지침(WCAG2.0)' 카테고리의 다른 글
| [웹접근성 지침-일반기술 G19] 어떤 요소든 1초 동안 3번 이상 깜빡이면 안 됩니다. (0) | 2024.01.23 |
|---|---|
| [웹접근성 지침-일반기술 G18] 텍스트(또는 이미지 텍스트)와 그 텍스트의 배경에 대한 명암비는 4.5:1이어야 한다 (1) | 2024.01.19 |
| [웹접근성 지침-일반기술 G15] '깜박이는 콘텐츠' 또는 '깜빡이는 빨간색'은 정해진 '임계값'을 시켜야 한다. (1) | 2024.01.10 |
| [웹접근성 지침-일반기술 G14] 색상 차이로 전달되는 정보는 텍스트로도 제공되어야 합니다. (1) | 2024.01.05 |
| [웹접근성 지침-일반기술 G13] 사이트 내에서 변화를 일으킬 수 있는 폼 컨트롤이 있다면, 변경 시 어떤 일이 일어나는지를 미리 설명해 줘야 한다. (1) | 2024.01.03 |
