Go Toolstack

WCAG 웹 접근성 색상 대비 검사기

웹 콘텐츠 접근성 지침을 충족하도록 텍스트와 배경 색상의 명도 대비율 검증.

WCAG 웹 접근성 색상 대비 검사기

웹 콘텐츠 접근성 지침을 충족하도록 텍스트와 배경 색상의 명도 대비율 검증.

사용 방법

1
Enter Query Details
Specify the parameters, location, or query data you want to look up.
2
Fetch or Validate Data
Retrieve or validate information securely within your session.
3
Inspect Detailed Results
Review schedules, reference figures, or comprehensive data tables.

이 카테고리의 다른 클라이언트 사이드 유틸리티를 살펴보세요

개발자 도구 허브 • 워크플로 및 기능 비교

모든 개발자 도구 도구, 브라우저 제한 사항 및 선택 가이드를 살펴보세요.

허브 살펴보기 →
JSON 포맷터 및 유효성 검사기

64비트 정수 왜곡 없이 JSON을 포맷 및 압축하고 JSON Schema(Draft-07 / 2020-12) 규칙으로 검증합니다.
Base64 인코더 및 디코더

텍스트 및 파일을 Base64 형식으로 인코딩하거나 원본 텍스트로 디코딩.
SQL 포맷터 및 코드 압축기

브라우저에서 직접 SQL 쿼리를 들여쓰기하고, 예약어를 대문자화하며 미니파이.

관련 블로그 가이드

기술 가이드, 문제 해결 및 모범 사례 안내서

개념 및 지식 허브

WCAG 웹 접근성 색상 대비 검사기: 명도 대비율 분석 및 AA·AAA 판정기

WCAG 웹 접근성 색상 대비 검사기는 웹사이트 UI 컴포넌트의 텍스트 전경색(Foreground)과 배경색(Background) 간의 명도 대비율(Contrast Ratio)을 W3C 웹 콘텐츠 접근성 지침(WCAG 2.1) 표준 공식에 입각하여 정밀 측정하는 디자인 및 프론트엔드 검증 도구입니다. 저시력자, 색약자 및 고령 사용자를 포함한 모든 사용자가 디지털 화면의 정보를 명확히 인식할 수 있도록 최소 명도 기준 통과 여부를 과학적으로 판정합니다. 텍스트 크기와 굵기에 따른 세부 기준을 즉시 대조할 수 있습니다.

실제 웹 디자인 시스템의 버튼 컴포넌트 검증 시나리오에서 배경색으로 #2563EB(블루)를 지정하고 텍스트 전경색으로 #FFFFFF(화이트)를 입력하면, 계산 엔진이 sRGB 상대 휘도(Relative Luminance)를 즉각 도출하여 명도 대비율 4.88:1을 계산해 내며 일반 텍스트 AA 기준(4.5:1 이상) 및 대형 텍스트 AAA 기준(4.5:1 이상) 통과(Pass)를 0.005초 내로 판정하여 웹 접근성 인증 심의 통과를 지원합니다.

모든 감마 보정 및 색상 대비율 수학 공식 계산은 브라우저 내부 자바스크립트 엔진에서 즉각 수행됩니다. 작업 중인 클라이언트 브랜드 전용 컬러 팔레트나 미출시 웹사이트의 디자인 토큰 수치가 외부로 노출되지 않아 안전한 작업 환경과 완벽한 디자인 기밀성을 보장합니다.

핵심 아키텍처 및 수학 공식

대비율 = (L1 + 0.05) / (L2 + 0.05) ; L1, L2: sRGB 감마 보정 기반 상대 휘도(L1 >= L2)

두 색상의 R, G, B 채널을 각각 sRGB 선형 공간으로 감마 변환한 후 가중치 합(0.2126R + 0.7152G + 0.0722B)으로 상대 휘도를 구하고 비율을 산출합니다.

모범 사례 및 필수 지침

  • 일반 텍스트 최소 AA 기준(4.5:1) 준수: 18pt(24px) 미만 또는 볼드체 14pt(약 18.66px) 미만의 일반 본문 텍스트는 최소 4.5:1 이상의 대비율을 유지해야 접근성 인증을 통과할 수 있습니다.
  • 대형 텍스트 및 UI 그래픽 요소 기준(3:1): 제목 텍스트나 입력 폼 테두리, 포커스 인디케이터 등 주요 UI 컴포넌트는 최소 3:1 이상의 명도 대비를 확보해야 합니다.
  • 야외 시인성 및 저가형 디스플레이 배려: 스마트폰의 햇빛 반사 환경이나 저가형 TN 패널 모니터에서는 색상 구분이 더욱 어려워지므로 가급적 최고 기준인 AAA(7:1) 수준을 지향하세요.
  • 색상만으로 정보 전달 지양: 오류 메시지나 필수 입력 필드를 단순히 빨간색으로만 표현하지 않고 아이콘이나 명시적인 텍스트 라벨을 병행하여 전색맹 사용자에게도 정보를 전달하세요.

자주 묻는 질문 (FAQ)

WCAG AA 등급과 AAA 등급의 실무적 차이는 무엇인가요?
AA 등급은 전 세계 주요 공공기관 및 상용 웹사이트에서 법적으로 요구하는 표준 접근성 준수 수준(4.5:1)이며, AAA 등급은 시각 장애인을 위한 최고 수준의 고대비 기준(7:1)을 뜻합니다.
HEX 코드 외에 RGB나 HSL 색상 형식도 입력할 수 있나요?
지원됩니다. 도구 내부의 색상 변환 모듈이 6자리/3자리 HEX뿐만 아니라 rgb(r, g, b) 및 hsl(h, s, l) 형식을 자동으로 감지하여 표준 sRGB 휘도로 변환해 계산합니다.
배경에 그라디언트나 이미지가 깔려 있는 경우는 어떻게 측정하나요?
그라디언트 영역 중 텍스트와 닿는 가장 밝은 지점과 가장 어두운 지점의 색상을 각각 추출하여 두 지점 모두에서 최소 대비 기준을 충족하는지 최악의 조건(Worst-case)으로 검증해야 합니다.
입력한 색상 팔레트 정보가 외부 서버에 기록되나요?
기록되지 않습니다. 모든 sRGB 수학적 상대 휘도 연산은 사용자의 로컬 브라우저 메모리 안에서 자바스크립트로 즉시 처리되어 완벽한 기밀성을 유지합니다.