🌓
무료 WCAG 색상 대비 검사기
두 색상이 접근성을 위한 WCAG AA 및 AAA 대비 기준을 충족하는지 확인합니다. 여러 텍스트 크기의 라이브 미리보기와 대비가 너무 낮을 때 자동 제안을 제공합니다.
한 번 로드하면 오프라인에서도 작동
큰 제목 텍스트
중간 본문 텍스트(18px) — 읽기 및 콘텐츠용.
일반 본문 텍스트(16px) — 단락용.
작은 본문 텍스트(14px) — 캡션 및 메타데이터용.
14.63:1
대비율
✓WCAG AA — 일반 텍스트
필요 기준 4.5:1 · 현재 14.63:1
✓WCAG AA — 큰 텍스트
필요 기준 3.0:1 · 현재 14.63:1
✓WCAG AAA — 일반 텍스트
필요 기준 7.0:1 · 현재 14.63:1
✓WCAG AAA — 큰 텍스트
필요 기준 4.5:1 · 현재 14.63:1
✓UI 컴포넌트 / 그래픽 객체
필요 기준 3.0:1 · 현재 14.63:1
빠른 프리셋
WCAG 2.1 대비 기준을 기반으로 합니다. 큰 텍스트 = 18pt(24px) 일반 또는 14pt(18.66px) 굵게. hex 코드는 양방향으로 동기화됩니다: hex 입력 또는 색상 선택 시 두 입력이 동기화됩니다.
주요 용도
- WCAG 준수에 대한 웹페이지 감사웹사이트의 텍스트 색상이 접근성을 위한 WCAG AA 또는 AAA 대비 표준을 충족하는지 확인합니다.
- 브랜드 색상 조합 확인브랜드 색상 팔레트 쌍을 테스트하여 접근 가능한 UI 설계에 적합한지 확인합니다.
- 다크 모드 색상 팔레트 테스트밝은 텍스트는 어두운 배경에서도 대비에 실패할 수 있습니다 — 여기에서 다크 모드 팔레트 쌍을 확인하십시오.
- 인쇄 자료용 색상 쌍포스터, 표지판 및 인쇄 자료도 읽을 수 있는 대비가 필요합니다 — 특히 나이가 많은 시청자의 경우.
- 접근성 있는 버튼 색상 디자인하기CTA, 작업 버튼 및 링크가 배경에 대해 WCAG를 충족하는지 확인합니다.
사용 방법
대비 검사는 WCAG 2.1 상대 휘도 알고리즘을 사용해 전적으로 브라우저에서 실행됩니다. 라이브러리도 서버도 없이 규격을 그대로 따르는 직접 작성한 수식만 사용합니다. 입력하거나 색을 고르는 즉시 모든 결과가 업데이트됩니다.
- 116진 입력과 정규화3자리(#abc)와 6자리(#aabbcc) 16진 값을 모두 받아 완전한 RGB 세 값으로 정규화합니다. 잘못된 입력은 조용히 검정으로 대체되지 않고 즉시 거부되므로, 오해를 부르는 통과 결과 대신 빨간 테두리가 나타납니다.
- 2WCAG 휘도 계산각 색은 WCAG 2.1 공식으로 상대 휘도로 변환됩니다. sRGB 채널 값을 구간별 감마 보정으로 선형화한 뒤(0.03928 미만은 12.92로 나누고, 그 이상은 2.4제곱), 0.2126R + 0.7152G + 0.0722B로 가중합니다.
- 3대비율과 준수 여부 검사대비율은 (밝은 값 + 0.05) / (어두운 값 + 0.05)로 계산되며 WCAG 기준 다섯 가지와 비교됩니다: AA 일반 텍스트(4.5:1), AA 큰 텍스트(3:1), AAA 일반 텍스트(7:1), AAA 큰 텍스트(4.5:1), UI 구성 요소(3:1). 키를 누를 때마다 결과가 업데이트됩니다.
- 4색조를 유지하는 수정 제안색 조합이 WCAG AA를 통과하지 못하면 도구는 원래 명도에서 양방향으로 한 단계씩 HSL 명도 공간을 탐색해, 같은 색조와 채도를 유지하면서 4.5:1을 통과하는 가장 가까운 변형을 각 색마다 찾습니다. EyeDropper API(Chromium)로 화면의 어떤 색이든 직접 추출할 수도 있습니다.