색상 대비 검사기

전경색과 배경색 간의 WCAG AA 및 AAA 대비 비율 검사

예시 시도

전경(텍스트) 색상

배경 색상

큰 텍스트 샘플 (18px 굵게)

일반 텍스트 샘플 — 선택하신 배경 색상에서 본문 텍스트가 이렇게 보입니다.

대비 비율

14.63:1

WCAG 준수 여부

통과

일반 AA

통과

일반 AAA

통과

큰 텍스트 AA

통과

큰 텍스트 AAA

WCAG AA일반 텍스트: 4.5:1, 큰 텍스트 (18px 이상 또는 14px 굵게): 3:1

WCAG AAA일반 텍스트: 7:1, 큰 텍스트 (18px 이상 또는 14px 굵게): 4.5:1

색상 대비 검사란?

색상 대비 검사는 전경색(일반적으로 텍스트)과 배경색 사이의 휘도 차이를 측정하여 그 결과를 비율로 나타냅니다. 1:1 비율은 두 색상이 동일함을 의미하며, 21:1은 흰색 바탕의 검정 또는 그 반대를 나타내는 최댓값입니다. W3C가 발행한 웹 콘텐츠 접근성 지침(WCAG)은 저시력자나 색각 이상이 있는 사람들이 텍스트를 읽을 수 있도록 텍스트가 충족해야 하는 최소 대비 비율을 정의합니다.

대비 비율 공식은 WCAG 2.x에서 도출되었으며 상대 휘도에 의존합니다. 상대 휘도는 색상이 사람 눈에 얼마나 밝게 보이는지를 측정하는 지표입니다. 상대 휘도는 각 sRGB 채널을 선형화(감마 제거)하고 ITU-R BT.709 계수로 채널에 가중치를 적용하여 계산합니다. 계수는 빨간색 0.2126, 녹색 0.7152, 파란색 0.0722입니다. 사람의 눈이 녹색 빛에 가장 민감하기 때문에 녹색이 가장 큰 기여를 합니다. 비율은 (L1 + 0.05) / (L2 + 0.05)이며, 여기서 L1은 더 밝은 색상의 휘도입니다.

WCAG는 두 가지 적합성 수준을 정의합니다. Level AA는 일반 크기 텍스트에 최소 4.5:1, 큰 텍스트(18px 이상 또는 14px 굵게)에 3:1의 대비 비율을 요구합니다. Level AAA는 기준을 각각 7:1과 4.5:1로 높입니다. WCAG 2.1은 또한 테두리, 아이콘, 포커스 표시기와 같은 비텍스트 UI 구성 요소에 3:1 비율을 요구하는 성공 기준 1.4.11을 도입했습니다.

이 대비 검사기를 사용하는 이유

눈으로 대비를 확인하는 것은 신뢰할 수 없습니다. 보정된 디스플레이에서 뚜렷해 보이는 색상이 저품질 노트북 화면, 직사광선 아래, 또는 적녹 색각 이상자에게는 구분하기 어려울 수 있습니다. 수치 비율은 추측을 제거하고 WCAG 표준에 대한 통과/실패 판정을 제공합니다.

즉각적인 비율 계산
두 색상을 선택하거나 입력하면 대비 비율이 실시간으로 업데이트됩니다. 제출 폼도, 페이지 새로 고침도 필요 없습니다.
🔒
개인정보 보호 우선 처리
휘도 계산은 브라우저에서 완전히 실행됩니다. 색상 값이 서버로 전송되지 않으며, 쿠키나 분석 도구가 선택 사항을 추적하지 않습니다.
🎯
AA 및 AAA 판정
결과는 일반 텍스트와 큰 텍스트 크기 모두에 대해 WCAG AA 및 AAA의 통과/실패 상태를 표시하므로, 어떤 기준을 충족하는지 정확히 알 수 있습니다.
📋
계정 불필요
페이지를 열고 바로 검사를 시작하세요. 회원 가입도, 요청 제한도 없습니다. 페이지가 로드된 후에는 오프라인에서도 작동합니다.

대비 검사기 활용 사례

프런트엔드 개발
UI 변경 사항을 배포하기 전에 CSS의 텍스트 색상과 배경 색상을 검사기에 붙여넣어 해당 조합이 WCAG AA를 충족하는지 확인하세요. 이를 통해 코드 리뷰나 자동화된 감사에 도달하기 전에 대비 문제를 발견할 수 있습니다.
디자인 핸드오프
디자이너는 Figma 파일의 모든 색상 조합이 엔지니어에게 사양을 전달하기 전에 요구되는 WCAG 수준을 통과하는지 확인할 수 있습니다. 디자인 단계에서 대비 문제를 수정하는 것이 구현 후에 수정하는 것보다 훨씬 비용이 적게 듭니다.
접근성 감사
WCAG 감사를 진행하는 QA 엔지니어는 Lighthouse나 axe와 같은 자동화 도구에서 표시된 특정 색상 조합을 직접 확인할 수 있습니다. 검사기는 정확한 비율과 어떤 수준이 통과하거나 실패하는지 확인해 줍니다.
디자인 시스템 토큰
디자인 시스템의 색상 토큰을 정의할 때 각 전경/배경 조합을 테스트하여 토큰 팔레트가 최소한 AA를 충족하는지 확인하세요. 하위 팀이 선택을 신뢰할 수 있도록 토큰과 함께 비율을 문서화하세요.
이메일 템플릿 테스트
이메일 클라이언트는 불투명도와 블렌드 모드 같은 CSS 기능을 제거하므로 실제 렌더링 색상이 소스와 다를 수 있습니다. 수신함에 도달하는 최종 전경색과 배경색 값을 테스트하여 가독성을 확인하세요.
접근성 표준 학습
WCAG를 배우는 학생들은 다양한 색상 조합을 실험하면서 비율이 어떻게 변하는지 즉시 확인할 수 있습니다. 채널을 하나씩 조정하면서 다른 값이 변하는 것을 보면 휘도와 인식된 대비의 관계에 대한 실질적인 이해를 쌓을 수 있습니다.

WCAG 대비 비율 요구 사항

아래 표는 WCAG 2.1에서 다양한 콘텐츠 유형과 적합성 수준에 대해 요구하는 최소 대비 비율을 요약합니다. 큰 텍스트는 일반 굵기에서 18px(24 CSS 픽셀) 이상, 또는 굵은 굵기에서 14px(18.66 CSS 픽셀) 이상으로 정의됩니다.

수준최소 비율적용 대상참고
AA Normal text4.5 : 1Body text, paragraphs, labelsMinimum for most UI text
AA Large text3.0 : 1Text >= 18px, or >= 14px boldMinimum for headings
AA UI components3.0 : 1Borders, icons, focus indicatorsNon-text contrast (WCAG 1.4.11)
AAA Normal text7.0 : 1Body text at highest standardEnhanced readability
AAA Large text4.5 : 1Large text at highest standardEnhanced for headings

휘도, AA, AAA 설명

대비 비율 계산은 세 단계로 이루어집니다: 각 색상의 휘도 계산, 비율 도출, WCAG 기준과 비교.

상대 휘도
색상이 얼마나 밝게 보이는지를 나타내는 0(검정)에서 1(흰색) 사이의 단일 숫자입니다. 비선형 sRGB 감마 곡선과 빨간색, 녹색, 파란색에 대한 사람 눈의 불균등한 민감도를 반영합니다. 순수 녹색(#00FF00)의 휘도는 0.7152이며, 순수 파란색(#0000FF)은 0.0722에 불과합니다.
WCAG AA
EU의 유럽 접근성 법(EAA)과 미국의 Section 508을 포함한 대부분의 법적 표준에서 요구하는 기본 접근성 수준입니다. AA는 일반 텍스트에 4.5:1, 큰 텍스트에 3:1의 비율을 요구합니다. 대부분의 디자인 시스템은 모든 텍스트 요소에 대해 AA를 최소 기준으로 설정합니다.
WCAG AAA
심각한 시각 장애가 있는 사용자를 포함하여 가능한 한 넓은 독자층이 읽을 수 있어야 하는 콘텐츠를 위한 강화된 수준입니다. AAA는 일반 텍스트에 7:1, 큰 텍스트에 4.5:1을 요구합니다. 전체 사이트에서 모든 페이지에 걸쳐 AAA를 달성하는 경우는 드물지만, 법적 고지사항이나 의료 정보와 같은 중요 콘텐츠는 종종 이를 목표로 합니다.

코드 예제

WCAG 대비 비율을 프로그래밍 방식으로 계산하세요. 각 예제는 WCAG 2.x의 상대 휘도 공식과 대비 비율 계산을 구현합니다. 비교를 위해 동일한 흰색 바탕의 검정과 흰색 바탕의 인디고 조합을 테스트합니다.

JavaScript
// Calculate relative luminance per WCAG 2.x (sRGB)
function luminance(r, g, b) {
  const [rs, gs, bs] = [r, g, b].map(c => {
    c /= 255
    return c <= 0.04045 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4)
  })
  return 0.2126 * rs + 0.7152 * gs + 0.0722 * bs
}

// Contrast ratio between two RGB colors
function contrastRatio(fg, bg) {
  const l1 = luminance(...fg)
  const l2 = luminance(...bg)
  const lighter = Math.max(l1, l2)
  const darker  = Math.min(l1, l2)
  return (lighter + 0.05) / (darker + 0.05)
}

contrastRatio([0, 0, 0], [255, 255, 255])  // -> 21.0
contrastRatio([99, 102, 241], [255, 255, 255]) // -> 3.95
contrastRatio([29, 78, 216], [255, 255, 255])  // -> 6.06 (AA pass)
Python
def luminance(r: int, g: int, b: int) -> float:
    """Relative luminance per WCAG 2.x, ITU-R BT.709 coefficients."""
    channels = []
    for c in (r, g, b):
        c /= 255
        channels.append(c / 12.92 if c <= 0.04045 else ((c + 0.055) / 1.055) ** 2.4)
    return 0.2126 * channels[0] + 0.7152 * channels[1] + 0.0722 * channels[2]

def contrast_ratio(fg: tuple, bg: tuple) -> float:
    l1 = luminance(*fg)
    l2 = luminance(*bg)
    lighter, darker = max(l1, l2), min(l1, l2)
    return (lighter + 0.05) / (darker + 0.05)

print(f"{contrast_ratio((0, 0, 0), (255, 255, 255)):.2f}")  # -> 21.00
print(f"{contrast_ratio((99, 102, 241), (255, 255, 255)):.2f}")  # -> 3.95

# Check WCAG AA for normal text
ratio = contrast_ratio((29, 78, 216), (255, 255, 255))
print(f"{ratio:.2f} — {'AA pass' if ratio >= 4.5 else 'AA fail'}")  # -> 6.06 — AA pass
Go
package main

import (
	"fmt"
	"math"
)

func linearize(c float64) float64 {
	c /= 255
	if c <= 0.04045 {
		return c / 12.92
	}
	return math.Pow((c+0.055)/1.055, 2.4)
}

func luminance(r, g, b int) float64 {
	return 0.2126*linearize(float64(r)) +
		0.7152*linearize(float64(g)) +
		0.0722*linearize(float64(b))
}

func contrastRatio(fgR, fgG, fgB, bgR, bgG, bgB int) float64 {
	l1 := luminance(fgR, fgG, fgB)
	l2 := luminance(bgR, bgG, bgB)
	lighter := math.Max(l1, l2)
	darker := math.Min(l1, l2)
	return (lighter + 0.05) / (darker + 0.05)
}

func main() {
	ratio := contrastRatio(0, 0, 0, 255, 255, 255)
	fmt.Printf("%.2f\n", ratio) // -> 21.00

	ratio = contrastRatio(29, 78, 216, 255, 255, 255)
	fmt.Printf("%.2f\n", ratio) // -> 6.06 (AA pass for normal text)
}
CSS
/* WCAG-safe color pairs — tested contrast ratios */

/* 12.63:1 — passes AAA normal text */
.high-contrast {
  color: #1e293b;          /* slate-800 */
  background: #f8fafc;     /* slate-50  */
}

/* 7.07:1 — passes AAA normal text */
.dark-theme-text {
  color: #e2e8f0;          /* slate-200 */
  background: #0f172a;     /* slate-900 */
}

/* 4.57:1 — passes AA normal, fails AAA */
.accent-on-white {
  color: #1d4ed8;          /* blue-700  */
  background: #ffffff;
}

/* 2.14:1 — fails AA for text, but passes 3:1 for large text */
.muted-heading {
  color: #94a3b8;          /* slate-400 */
  background: #ffffff;
}

자주 묻는 질문

텍스트에 적합한 대비 비율은?
웹의 본문 텍스트에는 최소 4.5:1(WCAG AA)을 목표로 하세요. 7:1 이상의 비율은 WCAG AAA를 충족하며 장시간 읽기에 더 편안합니다. 흰색 바탕의 검정은 최대 비율인 21:1을 산출하지만, 흰색 바탕의 매우 짙은 회색(#1e293b)도 약 12.6:1로 AAA를 훨씬 초과합니다.
WCAG에서 큰 텍스트는 무엇인가요?
WCAG는 큰 텍스트를 일반 굵기에서 18px(24 CSS 픽셀), 또는 굵은 굵기에서 14px(18.66 CSS 픽셀) 이상으로 정의합니다. 큰 텍스트는 자형이 더 크기 때문에 인식하기 쉬워 더 낮은 대비 기준이 적용됩니다. CSS에서 1px은 0.75pt와 같으므로 18pt는 24px에 해당합니다.
WCAG AA는 법적으로 의무인가요?
많은 국가에서 그렇습니다. 2025년 6월에 발효되는 유럽 접근성 법(EAA)은 WCAG 2.1 AA를 참조합니다. 미국 재활법 Section 508은 연방 기관이 WCAG 2.0 AA를 충족하도록 요구합니다. 미국 장애인법(ADA)은 미국 법원에 의해 접근 가능한 웹사이트를 요구하는 것으로 해석되며, WCAG AA가 기준입니다. 캐나다, 호주, 영국도 유사한 규정을 두고 있습니다.
상대 휘도는 어떻게 계산하나요?
각 sRGB 채널 값(0-255)을 255로 나눈 후 선형화합니다. 0.04045 이하의 값은 12.92로 나누고, 그 이상의 값은 ((c + 0.055) / 1.055) ^ 2.4로 변환합니다. 선형화된 세 채널에 ITU-R BT.709 계수(0.2126 R, 0.7152 G, 0.0722 B)를 곱하여 합산합니다. 결과는 0과 1 사이의 숫자입니다.
WCAG 대비 공식에서 0.05 오프셋을 사용하는 이유는?
0.05 오프셋은 색상 중 하나가 순수 검정(휘도 = 0)일 때 0으로 나누는 것을 방지합니다. 또한 가장 어두운 픽셀의 인식 휘도를 약간 높이는 주변 빛과 화면 반사를 반영합니다. 이 오프셋이 없으면 검정과 어두운 색상의 조합은 무한하거나 오해를 불러일으키는 높은 비율을 생성할 것입니다.
두 색상이 AA를 통과해도 읽기 어려울 수 있나요?
그렇습니다. WCAG 대비 비율은 휘도 차이를 측정하며 색조 차이는 측정하지 않습니다. 채도가 높은 빨간색과 채도가 높은 녹색은 기술적으로 비율 기준을 통과할 수 있지만, 특히 적녹 색각 이상이 있는 시청자에게는 읽기 불편합니다. 휘도와 색조 모두에서 차이가 나는 색상 조합이 더 편안한 결과를 만들어내는 경향이 있습니다.
WCAG 2.x 대비와 APCA의 차이는?
WCAG 2.x는 전경과 배경을 대칭적으로 처리하는 단순한 휘도 비율을 사용합니다. WCAG 3.0을 위해 제안된 APCA(Advanced Perceptual Contrast Algorithm)는 극성을 반영하는 지각적 밝기 모델을 사용합니다. 밝은 배경의 어두운 텍스트는 동일한 휘도 차이에서 어두운 배경의 밝은 텍스트와 다른 인식 대비를 가집니다. APCA는 여전히 작업 초안 상태이며 어떤 규정에서도 WCAG 2.x 방식을 대체하지 않았습니다.