WCAG 1.4.3: 대비 (최소)

이 규칙의 의미

WCAG 1.4.3 — 대비(최소)는 웹 콘텐츠 접근성 지침 2.2의 지침 1.4(식별 가능) 아래에 있는 레벨 AA 성공 기준이다. 이 기준은 텍스트와 텍스트 이미지의 시각적 표현이 배경과 충분한 휘도 대비 비율을 유지하도록 요구하여, 중등도 저시력을 가진 사람이 대비를 높여 주는 보조 기술에 의존하지 않고도 콘텐츠를 읽을 수 있게 한다.

필요한 대비 비율은 다음과 같다. 일반 텍스트 — 18포인트(대략 24 CSS 픽셀) 미만이거나 14포인트 볼드(대략 18.67 CSS 픽셀) 미만인 모든 텍스트 — 는 최소 4.5:1의 대비 비율을 달성해야 한다. 큰 텍스트는 18포인트 이상(보통 굵기) 또는 14포인트 이상(볼드 굵기)인 텍스트로 정의되며, 최소 3:1의 대비 비율이 필요하다. 동일한 기준은 텍스트 이미지에도 적용된다. 읽을 수 있는 문자를 렌더링하는 래스터 또는 벡터 이미지 역시 인접한 배경색에 대해 이 비율을 충족해야 한다.

대비 비율은 WCAG 명세에 정의된 상대 휘도 공식으로 계산된다. 상대 휘도(L)는 감마 보정 후 sRGB 색상 값으로부터 계산되며, 비율은 (L1 + 0.05) / (L2 + 0.05)로 표현된다. 여기서 L1은 두 휘도 값 중 더 밝은 값이고 L2는 더 어두운 값이다. 1:1 비율은 전혀 대비가 없음을 의미하며(동일한 색), 21:1은 순수한 흰색 위의 순수한 검정에서만 달성되는 최대 대비이다.

이 기준은 브라우저가 렌더링하는 모든 전경 텍스트를 포함한다. 버튼, 링크, 레이블, 폼 필드, 테이블 셀, 툴팁, 입력 필드 내부의 플레이스홀더 텍스트, 이미지나 그라디언트 위에 오버레이된 텍스트 등이 모두 포함된다. 또한 SVG 텍스트 요소와 CSS 생성 콘텐츠(::before 및 ::after 의사 요소)를 통해 렌더링되는 텍스트도 포함된다.

WCAG 1.4.3은 요구 사항에서 명시적으로 제외되는 몇 가지 공식 예외를 정의한다.

• 부수적 텍스트: 순수하게 장식용이거나, 보이지 않거나, 비활성(비활성화된) 사용자 인터페이스 구성 요소의 일부인 텍스트 또는 텍스트 이미지는 예외이다. 예를 들어, 비활성화된 폼 필드의 흐릿한 레이블은 이 비율을 충족할 필요가 없다.
• 로고타입: 로고나 브랜드 이름의 일부인 텍스트는 최소 대비 요구 사항이 없다. 이는 브랜드 아이덴티티가 특정 색상 선택에 의존하는 경우가 많고, 사용자가 로고를 시각적으로 인식할 것으로 기대되기 때문이다.
• 큰 텍스트: 앞서 언급했듯이, 큰 텍스트는 4.5:1이 아닌 3:1의 완화된 비율이 적용되며, 이는 더 큰 글자 형태가 낮은 대비에서도 더 쉽게 식별된다는 점을 반영한다.

통과는 계산된 대비 비율이 모든 보이는 비예외 텍스트에 대해 해당 임계값 이상일 때 발생한다. 실패는 보이는 비예외 텍스트 또는 텍스트 이미지 중 하나라도 임계값보다 조금이라도 낮은 대비 비율을 가질 때 발생한다.

왜 중요한가

세계보건기구에 따르면 전 세계적으로 약 22억 명이 어떤 형태로든 시각 장애를 가지고 있다. 이들 중 상당수 — 백내장, 녹내장, 황반변성, 당뇨망막병증과 같은 저시력 상태를 가진 사람들을 포함해 — 는 대비가 충분할 경우 화면의 텍스트를 읽을 수 있지만, 대비가 낮을 때는 읽기 어렵거나 아예 읽지 못한다. 대비(최소) 기준은 텍스트가 접근 불가능해지는 하한선을 측정 가능하고 테스트 가능한 방식으로 설정함으로써 이 집단의 요구를 직접적으로 다룬다.

진단된 저시력 외에도, 북유럽계 남성의 약 8%와 여성의 0.5%가 어떤 형태로든 색각 이상(색맹)을 경험하는 것으로 추정된다. 색맹은 낮은 대비와는 별개의 개념이지만, 많은 유형의 색맹은 특정 색조 사이의 지각된 휘도 차이를 줄여, 불충분한 대비를 더욱 문제적으로 만든다. 예를 들어, 녹색 배경 위의 빨간 레이블은 듀테라노피아를 가진 사람에게 거의 균일한 회색으로 보일 수 있으며, 이때 기본적인 휘도 대비가 충분하지 않다면 텍스트는 사실상 보이지 않게 된다.

고령자는 특히 큰 영향을 받는다. 나이가 들수록 눈의 대비 민감도가 떨어지고 동공 크기가 줄어들어 망막에 도달하는 빛의 양이 감소한다. 70대의 사람은 임상적으로 저시력 진단을 받지 않았더라도, 30대의 사람과 동일한 가독성을 얻기 위해 훨씬 더 높은 휘도 대비가 필요할 수 있다.

구체적인 실제 사례를 생각해 보자. 한 터키 전자상거래 웹사이트가 제품 설명과 가격 정보를 위해 흰색 배경(#FFFFFF) 위에 연한 회색 텍스트(#999999)를 사용한다고 하자. 이는 미니멀한 미학 때문에 선호되는 흔한 디자인 트렌드다. 이 조합의 대비 비율은 약 2.85:1로, 4.5:1 임계값보다 훨씬 낮다. 초기 황반변성을 가진 사용자는 제품 가격을 전혀 읽지 못해 구매를 포기할 수 있다. 이는 사용자를 기본적인 상거래 행위에서 배제할 뿐 아니라, 판매자에게 직접적인 매출 손실을 초래하고, 접근성 준수를 의무화한 관할 구역에서는 법적 리스크를 의미하기도 한다.

사용성과 SEO 관점에서 볼 때, 고대비 텍스트는 모든 사용자가 어려운 환경에서 이익을 얻도록 한다. 예를 들어, 강한 햇빛 아래의 모바일 화면, 저품질 디스플레이 패널, 또는 단순히 모니터를 보정하지 않은 사용자 등이다. 접근 가능한 색상 선택은 장시간 읽기 동안 시력이 정상인 사용자에게도 눈의 피로를 줄여 주며, 가독성 향상은 이탈률 감소와 페이지 체류 시간 증가와 상관관계가 있다. 이는 검색 엔진이 품질 지표로 사용하는 신호들이다.

관련 Axe-core 규칙

• color-contrast: WCAG 1.4.3을 레벨 AA에서 강제하는 기본 자동화 규칙이다. axe-core 엔진은 DOM의 모든 텍스트 노드에 대해 CSS 캐스케이드, 불투명도, z-index 스태킹, 알파 투명도를 고려하여 전경색과 배경색을 계산한다. 일반 텍스트는 4.5:1, 큰 텍스트는 3:1보다 낮은 대비 비율을 가진 텍스트 요소를 모두 표시한다. 이 규칙은 발견된 실제 대비 비율, 요구되는 비율, 실패한 특정 요소를 보고하여 수정 작업을 단순하게 만든다. 다만 axe-core는 계산된 스타일에서 파악할 수 있는 색상만 분석할 수 있다. <canvas> 내부에 렌더링된 텍스트, 복잡한 CSS 그라디언트 위의 텍스트, 배경 이미지 위의 텍스트 등은 추가적인 문맥 없이는 완전히 해석되지 않을 수 있으며, axe는 이러한 경우를 명확한 통과나 실패가 아닌 “검토 필요”로 표시한다. 폼 입력의 플레이스홀더 텍스트도 이 규칙의 검사 대상이다.
• color-contrast-enhanced: 이 규칙은 WCAG 1.4.6 — 대비(향상)의 더 엄격한 임계값인 일반 텍스트 7:1, 큰 텍스트 4.5:1(레벨 AAA)을 강제한다. 1.4.6은 AA 적합성에 필수는 아니지만, 향상된 접근성을 목표로 하거나 AAA 요구 사항을 채택할 수 있는 규제 환경을 준비하는 팀에게 개발 중에 이 규칙을 실행하는 것은 유용하다. Axe-core는 이 규칙 위반을 별도로 보고하여, 팀이 AA 실패(color-contrast)와 지향적인 AAA 개선(color-contrast-enhanced)을 구분해 우선순위를 정할 수 있게 한다.

자동화 도구가 완전히 해결할 수 없는 여러 상황에서는 수동 테스트가 필요하다. 텍스트가 배경 이미지나 CSS 그라디언트 위에 오버레이되는 경우, 텍스트 경계 상자 전체에 걸쳐 유효한 배경색이 달라진다. 자동화 도구는 지배적인 색을 샘플링하거나, 최악의 영역을 가정하거나, 수동 검토자에게 판단을 맡겨야 한다. 마찬가지로, <canvas> 요소 내부의 텍스트는 접근성 트리에 사용 가능한 의미 있는 색상 정보 없이 픽셀로 렌더링되므로, 스포이트 도구를 사용한 수동 검사가 유일하게 신뢰할 수 있는 접근 방식이다. :hover나 :focus 상태에서만 나타나는 텍스트 역시 자동화 도구가 평가하기 전에 수동 상호작용으로 상태를 트리거해야 할 수 있다.

테스트 방법

1. axe DevTools를 사용한 자동 스캔: Chrome, Firefox, Edge에서 사용할 수 있는 axe DevTools 브라우저 확장 프로그램을 설치한다. 테스트할 페이지로 이동한 후 확장 패널을 열고 전체 페이지 분석을 실행한다. 결과 패널에서 규칙 ID color-contrast와 color-contrast-enhanced로 필터링한다. 각 위반 항목에 대해 도구는 실패한 요소를 강조 표시하고, 실제 대비 비율(예: "2.85:1"), 요구되는 비율(예: "4.5:1"), 계산된 전경색과 배경색(16진수)을 보고한다. 결과를 CSV 또는 JSON으로 내보내 추적한다. 반응형 레이아웃이 글꼴 크기를 변경(큰 텍스트 임계값에 영향)하거나 색 구성표를 교체할 수 있으므로, 모든 브레이크포인트에서 반복 실행한다.
2. Lighthouse 감사: Chrome DevTools를 열고 Lighthouse 탭으로 이동한 뒤 "Accessibility"를 선택하고 감사를 실행한다. Lighthouse는 접근성 섹션에서 요소 참조와 함께 색 대비 위반을 표시한다. 일부 환경에서 Lighthouse는 구버전 axe-core를 사용하므로, axe DevTools를 직접 사용하는 것이 더 많은 문제를 포착할 수 있다.
3. 수동 대비 측정: 브라우저 내장 DevTools 색상 선택기나 WebAIM Contrast Checker(webaim.org/resources/contrastchecker/), TPGi Colour Contrast Analyser 데스크톱 애플리케이션과 같은 전용 도구를 사용한다. 스포이트로 전경색과 배경색을 선택하고, 보고된 비율이 임계값을 충족하는지 확인한다. 그라디언트나 이미지 위의 텍스트의 경우, 텍스트 영역 전반에 걸쳐 여러 지점을 샘플링하고, 가장 낮은 대비 측정값을 최종 값으로 사용한다.
4. 인터랙티브 상태 테스트: 링크와 인터랙티브 요소에 대해 :hover, :focus, :active, :visited 상태를 수동으로 트리거한 뒤, 각 상태별로 대비를 측정한다. 일부 디자인은 의도치 않게 실패하는 낮은 대비의 hover 색을 사용한다. 브라우저 DevTools의 "Force element state" 기능을 사용해 상태를 고정한 채 측정한다.
5. 스크린 리더 및 키보드 검토(맥락적): 대비는 시각적 기준이며 스크린 리더로 직접 감지할 수는 없지만, NVDA + Firefox, VoiceOver + Safari, JAWS + Chrome으로 테스트하면 텍스트가 접근성 트리에 존재하며 color: transparent와 같은 CSS 기법으로 시각적으로 접근 불가능하게 숨겨져 있지 않은지 확인할 수 있다. 스크린 리더가 화면에서 보이지 않는 텍스트를 읽어 준다면, 시력이 있는 사용자를 위해 시각적 렌더링이 대비 요구 사항을 충족하는지 조사해야 한다.
6. 줌 및 글꼴 확대: 브라우저의 기본 글꼴 크기(설정 → 모양 → 글꼴 크기)와 줌을 200%까지 높인다. 이때 "일반"에서 "큰" 텍스트로 전환되는 텍스트가 여전히 적절한 임계값을 충족하는지 확인한다. 기본 줌에서 14px인 글꼴은 200% 줌에서 28px이 되어, 적용되는 임계값이 달라질 수 있다.

수정 방법

본문 텍스트 대비 부족 — 잘못된 예

<!-- Light gray text on white background: contrast ratio ~2.85:1 -->
<style>
  p.description {
    color: #999999;
    background-color: #ffffff;
    font-size: 16px;
  }
</style>
<p class='description'>This product is handcrafted from premium materials.</p>

본문 텍스트 대비 부족 — 올바른 예

<!-- Darkened text color achieves 7:1 contrast ratio, exceeding 4.5:1 AA requirement -->
<style>
  p.description {
    color: #595959; /* contrast ratio 7.0:1 against #ffffff */
    background-color: #ffffff;
    font-size: 16px;
  }
</style>
<p class='description'>This product is handcrafted from premium materials.</p>

콜투액션 버튼 대비 부족 — 잘못된 예

<!-- White text on a light blue button: contrast ratio ~2.5:1 -->
<style>
  .btn-primary {
    background-color: #6eb5ff;
    color: #ffffff;
    font-size: 16px;
    padding: 12px 24px;
    border: none;
    border-radius: 4px;
  }
</style>
<button class='btn-primary'>Add to Cart</button>

콜투액션 버튼 대비 부족 — 올바른 예

<!-- Darker blue background raises contrast to 4.56:1 against white text -->
<style>
  .btn-primary {
    background-color: #0057b8; /* contrast ratio 4.56:1 against #ffffff */
    color: #ffffff;
    font-size: 16px;
    padding: 12px 24px;
    border: none;
    border-radius: 4px;
  }
</style>
<button class='btn-primary'>Add to Cart</button>

폼 입력의 플레이스홀더 텍스트 — 잘못된 예

<!-- Default browser placeholder is often ~#757575 or lighter; some resets make it worse -->
<style>
  input::placeholder {
    color: #bbbbbb; /* contrast ratio ~1.6:1 against white background */
  }
  input {
    background-color: #ffffff;
    font-size: 16px;
  }
</style>
<input type='email' placeholder='Enter your email address' />

폼 입력의 플레이스홀더 텍스트 — 올바른 예

<!-- #767676 achieves exactly 4.54:1 against white — the practical AA floor for normal text -->
<style>
  input::placeholder {
    color: #767676; /* contrast ratio 4.54:1 against #ffffff — passes AA */
  }
  input {
    background-color: #ffffff;
    font-size: 16px;
  }
</style>
<input type='email' placeholder='Enter your email address' />

배경 이미지 또는 그라디언트 위의 텍스트 — 잘못된 예

<!-- Dark text directly on a light-to-dark gradient: passes in some regions, fails in others -->
<style>
  .hero {
    background: linear-gradient(to right, #ffffff, #0057b8);
    padding: 40px;
  }
  .hero h1 {
    color: #333333;
    font-size: 32px;
  }
</style>
<section class='hero'>
  <h1>Welcome to Our Store</h1>
</section>

배경 이미지 또는 그라디언트 위의 텍스트 — 올바른 예

<!-- A semi-transparent dark scrim behind the text ensures consistent contrast regardless of gradient -->
<style>
  .hero {
    background: linear-gradient(to right, #ffffff, #0057b8);
    padding: 40px;
    position: relative;
  }
  .hero-content {
    background-color: rgba(0, 0, 0, 0.65); /* dark scrim guarantees contrast */
    padding: 16px 24px;
    display: inline-block;
    border-radius: 4px;
  }
  .hero h1 {
    color: #ffffff; /* white on near-black scrim exceeds 4.5:1 */
    font-size: 32px;
    margin: 0;
  }
</style>
<section class='hero'>
  <div class='hero-content'>
    <h1>Welcome to Our Store</h1>
  </div>
</section>

자주 발생하는 실수

• 보정된 모니터에서 보기 좋아 보인다고 가정하는 것: 넓은 색 영역과 높은 밝기를 가진 고급 디스플레이는, 정상 시력을 가진 디자이너가 통제된 환경에서 볼 때 저대비 조합도 읽을 수 있는 것처럼 보이게 만들 수 있다. 그러나 동일한 텍스트는 저가형 노트북 화면이나 형광등 아래의 사무실 환경에서는 읽을 수 없을 수 있다. 항상 시각적 판단이 아니라 대비 비율 도구로 검증해야 한다.
• 인터랙티브 상태를 별도로 테스트하는 것을 잊는 것: 링크는 기본 상태에서 4.5:1을 통과하더라도, 색이 밝아지는 :hover 상태에서 2.8:1로 떨어질 수 있다. 각 인터랙티브 상태는 독립적으로 임계값을 충족해야 한다.
• 비활성 폼 필드를 모두 예외로 취급하는 것: 예외는 비활성 UI 구성 요소에만 적용된다. 필드가 시각적으로는 비활성처럼 보이지만 실제로는 disabled 속성이 없어 프로그램상 활성 상태라면, 예외가 아니며 대비 요구 사항을 충족해야 한다.
• 유효 색상을 고려하지 않고 불투명도로 텍스트를 흐리게 하는 것: 어두운 텍스트에 opacity: 0.5를 설정하면, 텍스트가 배경과 혼합되어 더 밝은 합성 색을 만든다. 대비 비율은 원래 CSS 값이 아니라 결과적인 합성 색에 대해 계산해야 한다. 예를 들어, 흰색 위의 50% 불투명도 #000000은 대략 #808080으로 렌더링되며, 대비 비율은 약 3.9:1로 일반 텍스트의 4.5:1 임계값보다 낮다.
• SVG 요소 내부의 텍스트를 간과하는 것: CSS color가 아닌 fill로 스타일링된 SVG <text> 요소 역시 1.4.3의 적용 대상이다. SVG가 어떻게 포함되었는지(인라인 vs. <img> vs. <object>)에 따라 자동화 도구가 이를 놓칠 수 있다. 인라인 SVG가 가장 신뢰성 있게 테스트할 수 있는 방식이다.
• 큰 텍스트 예외를 위한 텍스트 크기를 잘못 파악하는 것: 18pt / 14pt 볼드 임계값은 소스의 CSS 픽셀 값이 아니라, 사용자의 브라우저에서 렌더링된 크기를 의미한다. CSS font-size: 24px는 정확히 18pt(1pt = 1.333px)이지만, 사용자가 더 큰 기본 글꼴 크기를 설정했다면 16px 요소가 18pt보다 크게 렌더링될 수 있다. 브라우저 기본 글꼴 크기에서 테스트하고 크기 계산을 주의 깊게 확인해야 한다.
• 링크 텍스트를 본문 텍스트와 구분하는 데 색상만 사용하는 것: 링크에 밑줄을 사용하지 않고 주변 텍스트와 구분하기 위해 색상만 사용하는 경우, 링크 색상은 페이지 배경에 대해 4.5:1을 충족하는 것 외에도 본문 텍스트 색상에 대해 3:1을 달성해야 한다. 많은 디자인이 이 요구 사항 중 하나 또는 둘 다를 충족하지 못한다. 밑줄(또는 색상이 아닌 다른 시각적 표시)을 추가하는 것이 더 안전한 접근이다.
• 서드파티 위젯과 채팅 플러그인 내부의 텍스트를 무시하는 것: 임베디드 위젯 — 라이브 채팅 창, 쿠키 동의 배너, 리뷰 캐러셀, 소셜 미디어 피드 — 은 페이지의 일부이며 WCAG 1.4.3 준수 범위에 포함된다. 서드파티 위젯 내부의 저대비 텍스트는, 자체 코드베이스가 완전히 준수하더라도 실패에 해당한다.
• 다크 모드나 고대비 모드 활성화 후 재테스트를 하지 않는 것: CSS 커스텀 프로퍼티를 신중하게 관리하지 않으면, 라이트 모드에서 통과한 색 구성표가 다크 모드에서는 실패할 수 있다. 마찬가지로, Windows 고대비 모드는 많은 CSS 색 선언을 재정의한다. 강제 색상 환경에서 텍스트가 여전히 읽을 수 있고, 사용자 정의 CSS가 저대비 조합을 다시 도입하지 않는지 확인해야 한다.
• CSS background-clip: text나 그라디언트 텍스트 기법을 대체 수단 없이 사용하는 것: -webkit-background-clip: text; color: transparent로 만든 그라디언트 채워진 텍스트는 글자 내부의 색이 위치에 따라 달라지므로 복잡한 대비 문제를 야기한다. 자동화 도구는 일반적으로 이를 해석할 수 없으며, 글자 형태 각 부분의 실제 휘도를 페이지 배경과 수동으로 비교해야 한다.

터키 접근성 규제와의 관계

터키의 2025/10호 대통령 공고는 2025년 6월 21일 관보(Resmî Gazete) 제32933호에 게재되었으며, 디지털 접근성을 위한 구속력 있는 국가 프레임워크를 수립한다. 이 공고는 국제적으로 인정된 웹 접근성 표준 준수를 의무화하여 터키 규제 요구 사항을 사실상 WCAG 2.2와 정렬시키고, 가족·사회서비스부(Aile ve Sosyal Hizmetler Bakanlığı)가 발급하는 공식 인증 마크로서 Erişilebilirlik Logosu(접근성 로고)를 도입하여, 적합한 디지털 제품과 서비스에 부여한다.

WCAG 1.4.3 — 대비(최소)는 레벨 AA 성공 기준이며, 레벨 AA 적합성은 접근성 로고를 획득하기 위한 최소 기준이다. 이는 로고를 추구하는 모든 기관이 웹사이트와 애플리케이션의 모든 보이는 비예외 텍스트 및 텍스트 이미지가 이 기준에서 정의한 4.5:1(일반 텍스트) 및 3:1(큰 텍스트) 대비 임계값을 충족해야 함을 의미한다. 1.4.3을 충족하지 못하는 것은 자동화 검사에서 가장 흔히 발견되는 위반 중 하나이며, 인증에 대한 직접적인 장애물이 된다.

이 공고는 광범위한 민간 및 공공 부문 기관에 적용된다. 대상 기관에는 중앙 및 지방 정부 수준의 공공 기관 및 단체, 은행 규제감독청(BDDK)의 규제를 받는 은행 및 금융 기관, 공공 및 민간 병원 및 의료 서비스 제공자, 20만 명 이상의 가입자를 보유한 통신 사업자, 관련 매출 또는 거래량 기준을 충족하는 전자상거래 플랫폼, 여행사, 민간 운송 회사, 그리고 교육부(MEB)의 인가를 받은 사립 학교 및 교육 기관이 포함된다.

이들 기관에게 대비 준수는 단순한 모범 사례 권고가 아니라 규제적 의미를 가진다. 비준수 조직은 행정적 감시와 평판상의 결과를 감수해야 하는 반면, 준수 조직은 터키의 약 850만 명의 장애인은 물론, 고령 사용자, 모바일 사용자, 그리고 읽기 쉬운 고대비 디자인의 혜택을 받는 일반 대중에게 신뢰의 신호로서 Erişilebilirlik Logosu를 표시할 수 있다.

아직 WCAG 1.4.3 감사를 수행하지 않은 터키 내 조직은, 웹, 모바일 웹, 필요 시 네이티브 애플리케이션 등 모든 대외 디지털 접점에 대한 자동 스캔을 우선시하고, 그라디언트 배경, 이미지 오버레이, 서드파티 임베디드 구성 요소에 대한 수동 검토를 이어서 수행해야 한다. 사전에 승인되고 대비가 검증된 색상 쌍을 포함하는 디자인 토큰 시스템을 구축하는 것이 가장 확장 가능한 장기 해결책이다. 이를 통해 새로운 UI 구성 요소가 기본적으로 접근 가능한 색 조합을 상속받도록 하고, 향후 리디자인에서 대비 실패가 의도치 않게 도입되는 것을 방지할 수 있다.