배경 이미지나 배경색 위에 텍스트가 있는 경우에 배경과 텍스트의 명암비가 최소 3:1이어야 합니다.
기술설명
이 기술의 목적은 배경 위에 있는 텍스트를 잘 읽을 수 있게 하는 것입니다.
텍스트의 굵기가 얇은 경우에는 크기를 18pt 이상으로 하고, 굵은 경우에는 14pt 이상로 이어야 하며, 배경과 택스트의 명함비는 4.5:1이어야 합니다.
*CSS에서 픽셀과 포인트의 비율은 1pt = 1.333px입니다. 14포인트는 18.5px이고 18포인트는 24px입니다.
배경색이 전부 검은색이거나 흰색인 것처럼 단색인 경우에는 배경과 텍스트의 명함비가 3:1이 되도록 만듭니다.
배경에 이미지나 패턴이 들어가는 경우 글자마다 명함비가 다를 수 있습니다. 이때에는 텍스트 주변에 음영을 넣어 음영과 글자간의 명암비를 3:1로 만들어야 합니다. 이렇게 하면 모든 글자의 명암비를 일정하게 만들 수 있습니다.
또는 글자에 후광을 주는 것도 방법입니다.
예시
회사 로고와 어울리는 밝은 색의 글자를 사용하기 위해 배경색을 검은색으로 설정했습니다.
회사 전경 사진 위에 텍스트를 배치합니다.
사진에는 다양한 색상과 밝기가 있기 때문에 텍스트가 위치할 부분에 흰색 안개효과를 주어 사진을 희미하게 만들었습니다. 그 위에 검은색 텍스트를 배치하여 명암비 3:1을 유지하게 했습니다.
자료
색상 결핍으로 인해 색상 대비만 손실되었을 때 색상 대비를 휘도 대비로 복원하도록 색상 손실에 따라 이미지를 변환하는 도구입니다.
점검절차
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.4G sRGB <= 0.03928이면 G = G sRGB / 12.92, else G = ((G sRGB +0.055)/1.055) ^ 2.4B 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 / 255G sRGB = G 8bit / 255B sRGB = B 8bit / 255 |
| * "^" 문자는 지수 연산자입니다.* 앨리어싱된 문자의 경우 문자 가장자리에서 2픽셀 떨어진 상대 휘도 값을 사용합니다. |
2. 동일한 공식을 사용하여 문자 바로 앞에 있는 배경의 픽셀의 상대적 밝기를 측정합니다.
3. 다음 공식을 사용하여 문자와 배경의 명암비를 계산합니다.
| (L1 + 0.05) / (L2 + 0.05), 여기서 L1은 전경색이나 배경색 중 밝은 색상의 상대적 밝기입니다. L2는 전경색이나 배경색 중 더 어두운 색상의 상대적 밝기 입니다 |
4. 글자와 배경의 명암비가 3:1인지 확인합니다.
나의 정리
배경 이미지나 배경색 위에 텍스트가 있는 경우에 배경과 텍스트의 명암비가 3:1이어야 한다고 합니다.
이전 '일반적 기술'들의 내용을 보면 7:1 또는 4.5:1의 명암비를 유지하라고 했습니다.
이번에는 최소 3:1로 유지하라고 합니다. 저는 이렇게 이해했습니다. 명암비 7:1이 가장 이상적인 수치이고, 4.5:1은 가장 기본적인 수치이다. 그리고 3:1은 최소한 지켜내야 하는 수치이다.
3:1은 최소한이므로 4.5:1을 목표로 만들면 좋을 것 같습니다.
G145: Ensuring that a contrast ratio of at least 3:1 exists between text (and images of text) and background behind the text
https://www.w3.org/TR/2016/NOTE-WCAG20-TECHS-20161007/G145.html
G145: Ensuring that a contrast ratio of at least 3:1 exists between text (and images of text) and background behind t
The objective of this technique is to make sure that users can read text that is presented over a background. This technique relaxes the 4.5:1 contrast ratio requirement for text that is at least 18 point (if not bold) or at least 14 point (if bold). Note:
www.w3.org
독학으로 힘들어 하시는 분들을 위해 과외를 준비 했습니다.
2024년 11월 한 달간 맞춤형 과외를 할 예정입니다.
입문자 분들의 참여 부탁드립니다.
교육과정은 인터뷰 후에 맞춤으로 진행할 예정입니다.
'웹접근성지침(WCAG2.0)' 카테고리의 다른 글
| [웹접근성 지침-일반기술 G148] 배경과 글자색을 지정하지 않고, 해당 기본 값을 변경하는 기술도 사용하지 않는다. (5) | 2024.10.28 |
|---|---|
| [웹접근성 지침-일반기술 G146] 동적 레이아웃(liquid layout) 사용하기 (9) | 2024.10.25 |
| [웹접근성 지침-일반기술 G144] 다른 방법으로 동일한 목표를 달성하는 또 다른 캡차(CAPTCHA)가 웹페이지에 있는지 확인하자 (14) | 2024.10.23 |
| [웹접근성 지침-일반기술 G143] 캡차(CAPTCHA)의 목적을 설명하는 대체 텍스트를 제공해야 합니다. (4) | 2024.10.22 |
| [웹접근성 지침-일반기술 G142] 브라우저에서 제공하는 확대 기능을 이용하자. (6) | 2024.10.21 |
