명도 대비 기준은 4.5:1이고, 흰 바탕 회색 글자는 #767676까지 통과합니다
명도 대비는 글자색과 배경색의 밝기 차이를 1:1부터 21:1까지의 비율로 나타낸 값입니다. 같은 색끼리는 1:1이고 검정과 흰색은 21:1입니다. 웹 접근성 국제 기준인 WCAG 2.2는 본문 같은 일반 크기 글자에 최소 4.5:1(AA 수준)을 요구합니다. 흰 바탕에 회색 글자를 쓴다면 #767676이 4.54:1로 통과하는 가장 밝은 회색이고, 한 단계 밝은 #777777은 4.47:1로 미달입니다. 대비율은 두 색의 순서와 상관이 없어서, #767676 바탕에 흰 글자를 올려도 똑같이 4.54:1입니다.
위 검사기에 글자색과 배경색을 넣으면 대비율과 함께 일반 글자·큰 글자·아이콘 기준의 통과 여부가 바로 나옵니다. 글자 크기와 굵기를 넣으면 그 글자에 어느 기준이 적용되는지 골라 주고, 기준에 못 미치면 색상은 그대로 두고 명도만 바꿔 통과하는 가장 가까운 색을 찾아 줍니다. 아래쪽 미리 보기에서는 같은 두 색이 색각 이상이 있는 사람에게 어떻게 보일지와 그때의 대비율도 확인할 수 있습니다.
명도 대비를 확인해야 하는 경우
대비가 낮은 글자는 시력이 좋은 사람에게는 조금 흐려 보이는 정도이지만, 저시력인 사람이나 고령자, 색각 이상이 있는 사람에게는 아예 읽히지 않을 수 있습니다. 한국형 웹 콘텐츠 접근성 지침도 명도 대비 항목의 목적을 저시력장애인, 색각장애인, 고령자 등도 콘텐츠를 인식할 수 있게 하는 것이라고 설명합니다. 실제로 대비를 계산해 봐야 하는 때는 다음과 같습니다.
- 브랜드 색을 버튼과 링크에 쓸 때: 화면에서 선명해 보이는 파랑·빨강·초록도 흰 바탕이나 흰 글자와는 대비가 낮은 경우가 많습니다. 흰 바탕의 #3B82F6 링크는 3.67:1, #EF4444 버튼 위 흰 글자는 3.76:1로 둘 다 본문 기준에 못 미칩니다.
- 안내 문구와 보조 글을 연한 회색으로 쓸 때: 입력칸 안내 문구나 날짜·출처 같은 보조 글에 자주 쓰는 #9CA3AF는 흰 바탕에서 2.53:1입니다. 덜 중요해 보이게 하려다 읽을 수 없게 만드는 흔한 경우입니다.
- 다크 모드 색을 정할 때: 어두운 배경에서는 같은 회색도 대비가 완전히 달라지므로 밝은 화면과 따로 계산해야 합니다.
- 디자인 시스템의 색 토큰을 만들 때: 글자색·배경색 짝을 처음부터 숫자로 정해 두면, 화면을 새로 만들 때마다 다시 검사하지 않아도 됩니다.
- 웹 접근성 점검이나 납품 검수를 준비할 때: 공공기관 사이트처럼 접근성 준수가 요구되는 곳에서는 명도 대비가 대표적인 점검 항목입니다.
대비율 계산 방법
WCAG 2.2는 대비율을 상대 휘도라는 값으로 계산합니다. 먼저 R·G·B 각 값(0~255)을 255로 나누고, 그 값이 0.04045 이하이면 12.92로 나누며, 그보다 크면 ((값 + 0.055) ÷ 1.055)2.4로 선형 값을 구합니다. 상대 휘도는 L = 0.2126 × R + 0.7152 × G + 0.0722 × B이고, 대비율은 (밝은 색의 L + 0.05) ÷ (어두운 색의 L + 0.05)입니다. 초록에 가장 큰 가중치가 붙는 이유는 사람 눈이 초록 빛의 밝기에 가장 민감하기 때문입니다.
2021년 5월 전의 정의에는 문턱값이 0.04045가 아니라 0.03928로 적혀 있었습니다. WCAG 2.2는 이 차이가 지침의 계산에 실질적인 영향을 주지 않는다고 설명하는데, 실제로 8비트 값 가운데 두 문턱 사이에 드는 값이 없습니다(10/255 = 0.0392, 11/255 = 0.0431). 다음은 흰 바탕의 #3B82F6을 계산한 과정입니다.
| 단계 | R | G | B |
|---|---|---|---|
| 8비트 값 | 59 | 130 | 246 |
| ÷ 255 | 0.2314 | 0.5098 | 0.9647 |
| 선형 값 | 0.0437 | 0.2232 | 0.9216 |
| 가중치 | 0.2126 | 0.7152 | 0.0722 |
상대 휘도는 0.2126 × 0.0437 + 0.7152 × 0.2232 + 0.0722 × 0.9216 = 0.2355이고, 흰색의 상대 휘도는 1이므로 대비율은 (1 + 0.05) ÷ (0.2355 + 0.05) = 3.6779…입니다. W3C 해설 문서는 계산한 값을 반올림하지 않는다고 밝히며 4.499:1도 4.5:1에 못 미친다는 예를 듭니다. 그래서 이 검사기는 소수 둘째 자리에서 내림한 3.67:1을 보여 주고, 판정도 화면에 보이는 그 값으로 합니다.
WCAG 2.2 대비 기준 한눈에 보기
| 대상 | AA | AAA | 성공 기준 |
|---|---|---|---|
| 일반 글자(본문·버튼 글자 등) | 4.5:1 | 7:1 | 1.4.3 · 1.4.6 |
| 큰 글자(18pt 이상, 또는 14pt 이상 굵게) | 3:1 | 4.5:1 | 1.4.3 · 1.4.6 |
| 아이콘·입력칸 테두리·그래프 같은 비텍스트 요소 | 3:1 | — | 1.4.11 |
글자 기준에는 예외가 있습니다. 비활성 상태인 사용자 인터페이스 구성 요소의 글자, 순수한 장식, 누구에게도 보이지 않는 글자, 다른 시각 내용이 많은 사진 속 글자는 대비 요구가 없습니다. 로고나 브랜드 이름에 들어간 글자도 대비 요구가 없습니다. 아이콘과 테두리에 대한 1.4.11은 이웃한 색과의 대비를 보며, 비활성 구성 요소와 브라우저 기본 모양을 그대로 쓴 요소는 예외입니다.
AA는 대부분의 법과 지침이 요구하는 수준이고 AAA는 더 읽기 쉬운 화면을 위한 수준입니다. WCAG 2.2도 일부 콘텐츠는 AAA를 모두 충족할 수 없다는 이유로, 사이트 전체에 AAA를 일반 정책으로 요구하는 것은 권하지 않는다고 적고 있습니다.
큰 글자는 몇 px부터인가요
WCAG의 큰 글자는 18pt 이상이거나 14pt 이상인 굵은 글자입니다. CSS에서 1pt는 4/3px이므로 보통 굵기는 24px 이상, 굵은 글자는 18.67px 이상입니다. W3C 해설 문서는 14pt를 약 18.5px로 적고 있으니 18.5px에서 18.67px 사이의 굵은 글자는 경계에 있다고 보면 됩니다. 이 검사기는 1pt = 4/3px로 정확히 환산해 판단합니다. 글자 크기는 사용자가 확대하기 전, 콘텐츠가 전달될 때의 크기를 기준으로 합니다.
| 글자 크기 | pt | 굵기 | 적용 기준(AA) |
|---|---|---|---|
| 12px | 9pt | 보통 | 일반 글자 4.5:1 |
| 16px | 12pt | 보통 | 일반 글자 4.5:1 |
| 18px | 13.5pt | 굵게 | 일반 글자 4.5:1 |
| 19px | 14.25pt | 굵게 | 큰 글자 3:1 |
| 20px | 15pt | 보통 | 일반 글자 4.5:1 |
| 24px | 18pt | 보통 | 큰 글자 3:1 |
한글·일본어·중국어 글꼴에 대해서는 같은 크기에 해당하는 글꼴 크기로 판단하라는 문장만 있고 따로 정한 숫자는 없습니다. WCAG는 획이 아주 가늘거나 모양이 낯선 글꼴은 낮은 대비에서 더 읽기 어렵다는 주석도 달아 두었습니다. 획이 많은 한글을 가는 글꼴로 쓴다면 큰 글자라도 4.5:1 이상을 맞추는 편이 안전합니다.
자주 쓰는 색의 흰 바탕·검정 바탕 대비
아래 표의 흰 바탕 값은 그 색 바탕에 흰 글자를 올렸을 때의 값과 같습니다. 판정은 일반 글자 AA(4.5:1) 기준입니다.
| 색 | 흰 바탕 | 검정 바탕 | 일반 글자 AA |
|---|---|---|---|
| #999999 | 2.84:1 | 7.37:1 | 검정 바탕만 통과 |
| #888888 | 3.54:1 | 5.92:1 | 검정 바탕만 통과 |
| #777777 | 4.47:1 | 4.68:1 | 검정 바탕만 통과 |
| #767676 | 4.54:1 | 4.62:1 | 둘 다 통과 |
| #666666 | 5.74:1 | 3.65:1 | 흰 바탕만 통과 |
| #595959 | 7.00:1 | 2.99:1 | 흰 바탕만 통과(AAA도 통과) |
| #3B82F6 | 3.67:1 | 5.70:1 | 검정 바탕만 통과 |
| #2563EB | 5.16:1 | 4.06:1 | 흰 바탕만 통과 |
| #EF4444 | 3.76:1 | 5.58:1 | 검정 바탕만 통과 |
| #DC2626 | 4.82:1 | 4.34:1 | 흰 바탕만 통과 |
| #16A34A | 3.29:1 | 6.37:1 | 검정 바탕만 통과 |
| #15803D | 5.01:1 | 4.18:1 | 흰 바탕만 통과 |
| #F59E0B | 2.14:1 | 9.77:1 | 검정 바탕만 통과 |
| #B45309 | 5.02:1 | 4.18:1 | 흰 바탕만 통과 |
표에서 보듯 #767676 부근의 중간 회색은 흰 글자와 검정 글자 모두 4.5:1을 조금 넘습니다. 계산해 보면 어떤 배경이든 흰 글자와 검정 글자 가운데 하나는 최소 4.58:1이 나오므로, 글자를 흰색이나 검정으로 바꾸면 AA는 언제나 맞출 수 있습니다. 반대로 노랑·주황 계열처럼 밝은 색은 흰 바탕 위 글자로 쓰기 어렵고, 같은 계열에서 명도를 크게 낮춘 색(#B45309 등)을 써야 합니다.
기준에 못 미칠 때 색을 고치는 방법
검사기의 ‘명도로 맞추기’는 고른 쪽 색을 OKLCH 색 공간으로 바꾼 뒤 색상각은 그대로 두고 명도만 0.001씩 옮겨 가며, 기준을 처음 넘는 색을 어두운 쪽과 밝은 쪽에서 하나씩 찾습니다. 둘 중 원래 명도에서 덜 움직인 색을 제안하고, 8비트 HEX로 반올림한 뒤의 대비로 다시 확인합니다. 명도를 옮기다 화면에 표시할 수 없는 색이 되면 CSS Color 4의 색역 맞춤처럼 채도만 줄입니다. 그래서 제안된 색은 원래 색과 같은 계열로 보입니다.
| 상황 | 지금 대비 | AA 맞춤 | AAA 맞춤 |
|---|---|---|---|
| 흰 바탕의 파란 링크 #3B82F6(글자색 바꾸기) | 3.67:1 | #2B72E5 · 4.52:1 | #0352C2 · 7.02:1 |
| #EF4444 버튼의 흰 글자(배경색 바꾸기) | 3.76:1 | #DF3337 · 4.50:1 | #B5001A · 7.04:1 |
| #EF4444 버튼의 흰 글자(글자색 바꾸기) | 3.76:1 | #1C1C1C · 4.52:1 | 불가능 |
| 다크 모드 #111827 위 #9CA3AF(글자색 바꾸기) | 6.98:1 | 이미 통과 | #9DA4B0 · 7.07:1 |
#EF4444 버튼처럼 배경의 상대 휘도가 0.10에서 0.30 사이이면, 흰 글자로는 최대 7:1 미만이고 검정 글자로도 7:1 미만이라 어떤 글자색으로도 AAA를 맞출 수 없습니다. 이때는 배경색을 바꿔야 하며, 검사기에서 ‘배경색’을 고르면 버튼 색을 얼마나 진하게 해야 하는지 바로 볼 수 있습니다. 브랜드 색을 지켜야 한다면 큰 글자(24px 이상)나 굵은 18.67px 이상 글자에만 그 색을 쓰고 본문에는 진한 색을 쓰는 방법도 있습니다.
반투명 글자는 섞인 색으로 계산합니다
CSS에서 rgba()나 8자리 HEX로 쓴 반투명 글자는 배경과 섞여 보입니다. 섞인 색은 채널마다 글자 × 불투명도 + 배경 × (1 − 불투명도)로 구하고, 화면처럼 8비트 값으로 반올림한 뒤 대비를 계산합니다. 흰 바탕 위 검정 글자의 불투명도에 따라 대비가 이렇게 달라집니다.
| 글자색 | 불투명도 | 보이는 색 | 흰 바탕 대비 |
|---|---|---|---|
| #000000DE | 87% | #212121 | 16.10:1 |
| #00000099 | 60% | #666666 | 5.74:1 |
| #0000008A | 54% | #757575 | 4.60:1 |
| #00000061 | 38% | #9E9E9E | 2.67:1 |
반투명 글자는 배경이 바뀌면 보이는 색도 바뀌므로, 같은 글자가 놓이는 배경마다 따로 확인해야 합니다. 그라데이션이나 사진 위의 글자는 글자 뒤에서 대비가 가장 낮아지는 지점의 색을 배경색으로 넣어 확인하는 것이 안전합니다.
색각 이상이 있을 때의 대비
대비율 계산식은 일반적인 색각을 기준으로 한 가중치를 씁니다. 제1형(적색맹) 색각 이상이 있으면 빨강이 어둡게 보이기 때문에, 검정 바탕의 빨간 글자는 계산값보다 대비가 낮게 느껴질 수 있습니다. 검사기의 미리 보기는 Chrome 개발자 도구의 시각 결함 에뮬레이션과 같은 Machado·Oliveira·Fernandes(2009) 모델로 가장 강한 정도의 색각 이상을 흉내 내고, 그렇게 바뀐 두 색의 대비율을 다시 계산합니다.
| 글자 / 배경 | 원래 색 | 제1형 | 제2형 | 제3형 |
|---|---|---|---|---|
| #E53935 / #000000 | 4.96:1 | 3.49:1 | 5.95:1 | 5.20:1 |
| #3B82F6 / #FFFFFF | 3.67:1 | 3.24:1 | 4.00:1 | 3.22:1 |
| #FFFFFF / #EF4444 | 3.76:1 | 5.25:1 | 3.17:1 | 3.93:1 |
| #E53935 / #43A047 | 1.27:1 | 1.92:1 | 1.01:1 | 1.20:1 |
마지막 줄의 빨강·초록 조합은 원래도 1.27:1이라 글자로 쓸 수 없고, 제2형(녹색맹)에서는 1.01:1로 거의 같은 색이 됩니다. 이렇게 색으로만 구분하는 정보(빨강은 오류, 초록은 정상)는 대비와 별개로 WCAG 1.4.1과 한국형 웹 콘텐츠 접근성 지침 5.4.1이 금지하는 방식이므로, 글자나 무늬를 함께 써야 합니다. 시뮬레이션 값은 이해를 돕는 근사치이고, 기준 판정은 원래 색의 대비율로 합니다. 내 색각을 확인해 보고 싶다면 색맹 테스트를 함께 써 보세요.
한국 웹 접근성 기준과 법
「장애인차별금지 및 권리구제 등에 관한 법률」 제21조 제1항은 법이 정한 행위자 등이 생산·배포하는 전자정보와 비전자정보에 대해 장애인이 장애인 아닌 사람과 동등하게 접근·이용할 수 있도록 필요한 수단을 제공하도록 정합니다. 같은 법 시행령 제14조 제2항 제1호는 그 수단으로 ‘누구든지 신체적·기술적 여건과 관계없이 웹사이트를 통하여 원하는 서비스를 이용할 수 있도록 접근성이 보장되는 웹사이트’를 들고, 의무를 지는 기관의 단계적 범위는 시행령 별표 3에 있습니다(법 2025년 11월 11일, 시행령 2026년 10월 2일 시행본 기준).
웹 접근성을 점검할 때 쓰는 국내 표준은 한국형 웹 콘텐츠 접근성 지침 2.2(KS X OT0003:2022, 2022년 12월 28일 개정)입니다. 검사 항목 5.4.3(텍스트 콘텐츠의 명도 대비)은 ‘텍스트 콘텐츠와 배경 간의 명도 대비는 4.5 대 1 이상이어야 한다’고 정하고, 다음 경우를 예외로 둡니다.
- 18pt 이상이거나 14pt 이상인 굵은 글꼴을 쓰는 경우 3 대 1까지 낮출 수 있습니다.
- 화면 확대가 가능하도록 구현한 텍스트 콘텐츠는 3 대 1까지 낮출 수 있습니다. 이 예외는 WCAG에는 없습니다.
- 로고, 장식 목적의 콘텐츠, 마우스나 키보드로 초점을 받았을 때 명도 대비가 커지는 콘텐츠는 예외입니다.
KWCAG의 숫자는 WCAG AA와 같으므로 이 검사기의 일반 글자 AA·큰 글자 AA 판정을 그대로 쓸 수 있습니다. 다만 화면 확대 예외를 적용할지는 실제 점검 기관의 판단에 따르므로, 본문은 4.5:1을 기준으로 맞추는 편이 안전합니다.
자주 틀리는 경우
- 반올림해서 통과로 보는 경우: #777777은 흰 바탕에서 4.478…:1이라 반올림하면 4.5처럼 보이지만 미달입니다.
- 18px 굵은 글자를 큰 글자로 보는 경우: 14pt는 18.67px이므로 18px 굵은 글자는 일반 글자 기준(4.5:1)을 적용합니다.
- 안내 문구를 예외로 보는 경우: WCAG의 예외는 비활성 구성 요소, 장식, 보이지 않는 글자, 사진 속 글자, 로고입니다. 사용할 수 있는 입력칸의 안내 문구와 보조 글은 이 목록에 없습니다.
- 마우스를 올렸을 때 색을 빠뜨리는 경우: 호버·포커스·선택 상태의 색도 각각 계산해야 합니다. KWCAG는 초점을 받았을 때 대비가 커지는 콘텐츠를 예외로 두지만, 대비가 작아지는 상태는 예외가 아닙니다.
- 밝은 화면만 확인하는 경우: 다크 모드는 배경이 달라 대비가 완전히 바뀌므로 따로 계산합니다.
- 아이콘만 있는 버튼을 놓치는 경우: 글자가 없는 아이콘 버튼과 입력칸 테두리는 1.4.11에 따라 3:1이 필요합니다.
한계
- WCAG 2.2의 대비 식은 글자 크기를 일반·큰 글자 두 가지로만 나누고 글꼴의 획 두께는 반영하지 않습니다. 같은 4.5:1이라도 가는 글꼴은 더 읽기 어렵습니다.
- WCAG 3.0은 아직 작업 초안이라 새 대비 계산법이 확정되지 않았습니다. 이 검사기는 현행 권고안인 WCAG 2.2의 식을 씁니다.
- 화면 밝기, 주변 빛, 모니터마다 다른 색 표현은 반영하지 않습니다. 계산은 sRGB 색을 기준으로 합니다.
- 배경은 한 가지 색만 넣을 수 있습니다. 그라데이션이나 사진 배경은 가장 불리한 지점의 색으로 따로 확인해야 합니다.
- 색각 이상 미리 보기는 모델에 따른 근사치이며, 실제로 보이는 정도는 사람마다 다릅니다.
- 명도 대비는 접근성의 한 항목일 뿐입니다. 키보드 사용, 대체 텍스트, 글자 확대 같은 다른 항목은 따로 점검해야 합니다.
- 입력한 색은 브라우저 안에서만 계산하고 서버로 보내지 않습니다.
기준일: 2026년 10월 20일. WCAG 2.2(W3C 권고안, 2024년 12월 12일 판), 한국형 웹 콘텐츠 접근성 지침 2.2(KS X OT0003:2022), 「장애인차별금지 및 권리구제 등에 관한 법률」(2025년 11월 11일 시행)과 같은 법 시행령(2026년 10월 2일 시행)을 기준으로 썼습니다.
출처
- 01W3C — Web Content Accessibility Guidelines (WCAG) 2.2상대 휘도·대비율·큰 글자 정의, 성공 기준 1.4.3·1.4.6·1.4.11, 적합성 주석(2024년 12월 12일 판)
- 02W3C — Understanding SC 1.4.3: Contrast (Minimum)대비율을 반올림하지 않음(4.499:1 미달), 14pt·18pt ≈ 18.5px·24px
- 03W3C — Understanding SC 1.4.6: Contrast (Enhanced)AAA 7:1·큰 글자 4.5:1
- 04W3C — Understanding SC 1.4.11: Non-text Contrast사용자 인터페이스 구성 요소·그래픽 3:1
- 05국립전파연구원 — 한국형 웹 콘텐츠 접근성 지침 2.2(KS X OT0003:2022)검사 항목 5.4.3 명도 대비 본문과 예외, 5.4.1 색에 무관한 콘텐츠 인식
- 06국가법령정보센터 — 장애인차별금지 및 권리구제 등에 관한 법률제21조 정보통신·의사소통 등에서의 정당한 편의제공의무
- 07국가법령정보센터 — 같은 법 시행령제14조 제2항 제1호 접근성이 보장되는 웹사이트, 별표 3 단계적 범위
- 08Machado, Oliveira, Fernandes (2009) — A Physiologically-based Model for Simulation of Color Vision Deficiency색각 이상 시뮬레이션 행렬(심도 1.0)
- 09Chrome for Developers — Simulating color vision deficiencies in the Blink Renderer개발자 도구의 시각 결함 에뮬레이션이 같은 모델을 쓴다는 설명
- 10Björn Ottosson (2020) — A perceptual color space for image processingOKLab 변환식(명도로 맞추기)
- 11W3C — CSS Color Module Level 4, 14. Gamut Mapping색역 밖 색은 색상각을 두고 채도를 줄이는 방식
자주 묻는 질문
명도 대비 4.5:1은 무슨 뜻인가요?
두 색 가운데 밝은 색의 상대 휘도에 0.05를 더한 값을 어두운 색의 상대 휘도에 0.05를 더한 값으로 나눈 비율입니다. 같은 색끼리는 1:1, 검정과 흰색은 21:1이 됩니다. WCAG 2.2는 일반 크기 글자와 배경 사이에 최소 4.5:1(AA)을 요구하고, 더 엄격한 AAA는 7:1을 요구합니다.
4.48:1이면 반올림해서 4.5:1로 봐도 되나요?
안 됩니다. W3C의 Understanding SC 1.4.3 문서는 계산한 값을 반올림하지 않는다고 밝히고, 4.499:1도 4.5:1 기준을 충족하지 못한다는 예를 듭니다. 이 검사기는 대비율을 소수 둘째 자리에서 내림해 보여 주고 그 값으로 판정합니다. 흰 바탕의 #777777은 4.47:1로 미달이고, 한 단계 진한 #767676은 4.54:1로 통과합니다.
큰 글자는 몇 px부터인가요?
WCAG의 큰 글자는 18pt 이상이거나 14pt 이상인 굵은 글자입니다. CSS에서 1pt는 4/3px이므로 보통 굵기는 24px 이상, 굵은 글자는 약 18.67px 이상이 큰 글자에 해당합니다(W3C 해설 문서는 약 18.5px로 적습니다). 16px 본문이나 18px 굵은 글자는 일반 글자 기준인 4.5:1을 적용해야 합니다.
AA와 AAA 중 무엇을 맞춰야 하나요?
한국형 웹 콘텐츠 접근성 지침 2.2와 미국 ADA 규칙(WCAG 2.1 AA), 유럽 EN 301 549처럼 실제 기준으로 쓰이는 문서는 대부분 AA 수준을 요구합니다. AAA(7:1)는 더 읽기 쉬운 화면을 위한 권장 수준이며, WCAG 2.2도 모든 콘텐츠가 AAA를 충족하기는 어렵다며 사이트 전체에 AAA를 일반 정책으로 요구하는 것을 권하지 않습니다. 본문처럼 오래 읽는 글은 AAA에 가깝게 맞추면 더 좋습니다.
반투명 글자(rgba)는 어떻게 계산하나요?
반투명 글자는 배경과 섞여서 보이므로, 섞인 뒤의 실제 색으로 대비를 계산합니다. 흰 바탕에 불투명도 54%의 검정 글자(#0000008A)를 쓰면 화면에는 #757575로 보이고 대비는 4.6:1입니다. 같은 글자라도 배경이 바뀌면 섞인 색이 달라지므로 배경마다 다시 확인해야 합니다. 배경 자체가 반투명이라면 아래에 깔린 색과 섞은 값을 배경색으로 넣어 주세요.
아이콘이나 입력칸 테두리에도 대비 기준이 있나요?
있습니다. WCAG 2.2 성공 기준 1.4.11(비텍스트 대비, AA)은 사용자 인터페이스 구성 요소를 알아보는 데 필요한 시각 정보와, 내용을 이해하는 데 필요한 그래픽이 이웃한 색과 3:1 이상 대비를 이루도록 요구합니다. 입력칸 테두리, 체크 상자, 정보를 전하는 아이콘이 여기에 해당합니다. 비활성 상태의 구성 요소와 브라우저 기본 모양을 그대로 쓴 요소는 예외입니다.
기준을 넘는 색은 어떻게 찾나요?
명도로 맞추기 영역에서 글자색이나 배경색 중 바꿀 쪽을 고르면, 색상은 그대로 두고 명도만 바꿔 AA와 AAA를 넘는 가장 가까운 색을 보여 줍니다. 배경이 어떤 색이든 검정이나 흰색 글자 가운데 하나는 4.58:1 이상이 나오므로 AA는 언제든 맞출 수 있습니다. 하지만 배경의 상대 휘도가 0.10에서 0.30 사이(예: #EF4444)이면 어떤 글자색으로도 7:1이 나오지 않으니 배경색을 바꿔야 합니다.
한국형 웹 콘텐츠 접근성 지침(KWCAG)도 기준이 같은가요?
기본 숫자는 같습니다. KWCAG 2.2(KS X OT0003:2022)의 검사 항목 5.4.3은 텍스트 콘텐츠와 배경 간의 명도 대비가 4.5 대 1 이상이어야 한다고 정하고, 18pt 이상이거나 14pt 이상인 굵은 글자는 3 대 1까지 낮출 수 있다고 합니다. 여기에 화면 확대가 가능하도록 구현한 텍스트 콘텐츠도 3 대 1까지 낮출 수 있다는 예외가 더 있고, 로고와 장식 목적의 콘텐츠는 예외입니다.