색상 대비 검사기
신규텍스트와 배경색 사이의 WCAG AA/AAA 대비 비율 확인.
Large heading — 24px bold
Large text, 18.66px and up reads at 3:1.
Normal body text. The quick brown fox jumps over the lazy dog and reads comfortably at 4.5:1 or better.
Small print and captions — the hardest text to read.
Keeps your hue & saturation — only the lightness changes — so brand colors stay recognizable.
Pairwise palette grid
Paste several colors (hex, one per line or separated by spaces / commas) to see which foreground/background pairs pass AA (4.5:1). First 8 colors are used.
Runs entirely in your browser. Nothing is uploaded.
브라우저에서 WCAG 색상 대비 확인하기
이 색상 대비 검사기는 텍스트와 배경색 사이의 WCAG 대비율을 측정하고, 해당 조합이 일반 텍스트·큰 텍스트·UI 컴포넌트에서 AA와 AAA를 통과하는지 즉시 알려줍니다. 16진수 값을 입력하거나, RGB 또는 HSL 필드를 편집하거나, 밝기 슬라이더를 드래그하거나, 스포이트로 화면의 어느 색이든 가져올 수 있습니다. 대비율·합격/불합격 매트릭스·실시간 미리보기가 입력과 동시에 업데이트됩니다.
WebAIM과 Adobe Color가 사용하는 것과 동일한 WCAG 계산 공식을 기반으로 동작하면서, 실시간 가독성 미리보기·APCA(WCAG 3) 점수·불합격 조합의 원클릭 수정 기능이 추가되어 있습니다. 모든 계산은 브라우저의 JavaScript에서 로컬로 실행되어 색상이 기기를 벗어나지 않으며 계정도 필요 없습니다.
WCAG AA 및 AAA 기준값 설명
WCAG 대비율은 1:1(동일한 두 색)에서 21:1(흰 배경에 검정 텍스트)까지입니다. AA 레벨——ADA, 섹션 508 등 대부분의 법률이 요구하는 기준——은 일반 텍스트에서 4.5:1, 큰 텍스트에서 3:1을 요구합니다. AAA 레벨은 이를 각각 7:1과 4.5:1로 높입니다. 큰 텍스트는 18pt(24px) 이상, 또는 14pt(약 18.66px) 이상의 굵은 텍스트를 의미합니다.
합격/불합격 매트릭스는 각 기준값을 별도로 표시하므로, 흰 배경의 #767676 회색이 4.54:1로 AA 본문 텍스트를 통과하지만 AAA에 필요한 7:1에는 미치지 못한다는 것을 한눈에 확인할 수 있습니다. 법적 준수(ADA, EN 301 549, 섹션 508)가 필요한 경우 AA가 충족해야 할 최소 기준입니다. 저시력 사용자가 많은 읽기 중심 인터페이스에서는 디자인이 허락하는 한 AAA를 목표로 할 가치가 있습니다.
접근성 색상 조합 미리보기, 수정, 배포
숫자만으로는 절반밖에 알 수 없기 때문에, 실시간 미리보기는 지정한 색상으로 실제 제목·본문·소인쇄물·샘플 버튼과 칩을 렌더링합니다. 단순히 대비율을 읽는 것이 아니라 실제 가독성을 확인하세요. 조합이 기준을 통과하지 못할 경우, '통과시키기' 제안 기능이 색조와 채도를 유지하면서 선택한 레벨(AA, AA 큰 텍스트, AAA)을 통과하는 가장 가까운 색으로 밝기를 조정하고 원클릭으로 적용합니다.
페어와이즈 그리드는 전체 팔레트를 받아 어떤 색상 조합이 통과하는지 한눈에 표시합니다. 모든 전경색과 배경색 조합이 안전해야 하는 디자인 시스템을 구축할 때 특히 유용합니다. 수십 개의 조합을 하나씩 테스트하는 대신 팔레트를 한 번 붙여넣으면 전체 매트릭스가 즉시 표시됩니다.
APCA: WCAG 3 대비의 미리보기
기존 대비율과 함께 이 검사기는 APCA Lc 점수도 표시합니다. 이는 WCAG 3을 위해 제안된 지각적 대비 지표입니다. APCA는 눈이 실제로 어두운 배경의 밝은 텍스트와 밝은 배경의 어두운 텍스트를 어떻게 읽는지 모델링하고 폰트 굵기를 고려하기 때문에, WCAG 2 대비율이 놓칠 수 있는 가독성 문제를 감지합니다. 대략적인 기준: 본문 텍스트 Lc 75+, 큰 텍스트 Lc 60+, 큰 제목 Lc 45+.
WCAG 3은 아직 초안 단계이며 WCAG 2.2를 대체하지 않았으므로, 현재 준수는 4.5:1과 3:1 기준값을 충족하는 것을 의미합니다. 현재 대비율 옆에 APCA를 함께 표시하면 규격이 확정되기를 기다리지 않고도 팔레트를 미래에 대비할 수 있습니다.
아이콘과 UI 컴포넌트의 비텍스트 대비
대비는 텍스트에만 해당되지 않습니다. WCAG 2.1 SC 1.4.11은 인터랙티브 컴포넌트의 경계——입력 테두리, 포커스 표시기, 토글 상태——와 의미 있는 아이콘 및 그래픽에 대해 인접 색과 3:1 대비를 요구합니다. 매트릭스에는 3:1 기준의 전용 UI 및 그래픽 확인 행이 있어 버튼 윤곽이나 아이콘이 보이는지 개별적으로 확인할 수 있습니다.
많은 팀이 인식하지 못한 채 감사에서 불합격하는 영역입니다. 연한 회색 입력 테두리(흰 배경의 #D1D1D1은 1.4:1)는 페이지의 모든 텍스트가 통과하더라도 WCAG 2.1 위반에 해당합니다. 여기서 UI 컴포넌트를 확인하는 데는 몇 초밖에 걸리지 않으며 공식 감사에서 의외의 결과를 방지할 수 있습니다.
WebAIM, Adobe Color, Chrome DevTools와의 비교
WebAIM 대비 검사기(webaim.org)는 가장 널리 인용되는 무료 접근성 도구로, 이 도구와 동일한 WCAG 2 공식을 사용합니다. 다만 APCA 표시 없음, 실시간 텍스트 미리보기 없음, 불합격 조합 자동 수정 불가, 여러 색상 조합을 동시에 테스트하는 페어와이즈 팔레트 그리드 없음이 차이점입니다.
Adobe Color 접근성 도구는 AA/AAA 합격 여부와 색맹 시뮬레이터를 제공하지만, 작업 저장에 무료 Adobe 계정이 필요하며 합격 색상을 자동 제안하지 못합니다.
Chrome DevTools는 요소 패널 색상 선택기에 대비율 배지가 있어 브라우저 내 확인에 유용하지만, DevTools 내에서만 사용 가능하며 특정 색상 조합 링크를 공유할 수 없습니다.
이 검사기는 로그인 없이 동작하고, WCAG 2 대비율과 APCA Lc 점수를 모두 표시하며, 선택한 색상으로 실시간 미리보기를 렌더링하고, 한 화면에서 전체 팔레트 그리드를 테스트할 수 있습니다. 모든 계산은 로컬 JavaScript에서 실행됩니다.
Frequently asked questions
색상 대비 검사기란 무엇인가요?
색상 대비 검사기는 텍스트(전경) 색상과 배경 색상 사이의 WCAG 대비율을 측정하고, 접근성 지침에 따라 해당 조합이 읽을 수 있는지 알려주는 도구입니다. 두 가지 색상을 입력하면 1:1(동일)부터 21:1(흰 배경에 검정)까지의 대비율과 일반 텍스트, 큰 텍스트, UI 컴포넌트에 대한 AA 및 AAA 합격/불합격 결과가 반환됩니다. 이 도구는 완전히 브라우저에서 실행되어 색상이 서버로 전송되지 않으며 계정도 필요 없습니다.
WCAG에서 요구하는 최소 대비율은 얼마인가요?
WCAG는 텍스트와 배경 사이의 최소 대비율을 정의합니다. AA 레벨에서 일반 텍스트 4.5:1, 큰 텍스트 3:1이며, AAA 레벨에서는 각각 7:1과 4.5:1로 높아집니다. 순수한 검정(#000000)의 흰색(#FFFFFF) 배경 최댓값은 21:1입니다. 이 기준값은 WCAG 2.0, 2.1, 2.2에서 동일하게 적용됩니다.
WCAG AA와 AAA의 차이점은 무엇인가요?
AA는 광범위하게 요구되는 기본 수준으로 일반 텍스트 4.5:1, 큰 텍스트 3:1입니다. AAA는 강화된 수준으로 일반 텍스트 7:1, 큰 텍스트 4.5:1입니다. 대부분의 접근성 법률(ADA, 섹션 508, 유럽 EN 301 549)은 AA를 목표로 합니다. AAA는 저시력 사용자가 많은 읽기 위주의 인터페이스에서 디자인이 허락하는 한 추구할 가치가 있습니다.
아이콘과 UI 컴포넌트도 대비 기준을 충족해야 하나요?
그렇습니다. WCAG 2.1 SC 1.4.11(비텍스트 대비)은 인터랙티브 컴포넌트의 시각적 경계——입력 테두리, 포커스 링, 토글 상태——와 의미 있는 아이콘 및 그래픽에 대해 인접 색과 최소 3:1 대비를 요구합니다. 이 도구의 결과 그리드에는 3:1의 전용 UI 및 그래픽 행이 포함되어 있어 별도 계산 없이 버튼 윤곽과 아이콘의 적합성을 확인할 수 있습니다.
대비율이 기준을 통과하지 못할 때 어떻게 수정하나요?
가장 빠른 방법은 브랜드 색조를 유지하면서 밝기만 변경하여 텍스트 색상을 어둡게 하거나 배경을 밝게 하는 것입니다. 내장된 '통과시키기' 제안 기능이 자동으로 이 작업을 수행합니다——텍스트 또는 배경을 가장 가까운 합격 색상으로 조정하고 원클릭으로 적용하므로 16진수 값을 수동으로 조정할 필요가 없습니다.
APCA란 무엇이며 왜 중요한가요?
APCA(Accessible Perceptual Contrast Algorithm)는 차세대 WCAG 3을 위해 제안된 대비 방법입니다. 단일 비율 대신 약 -108에서 106까지의 지각적 밝기 대비(Lc) 값을 반환합니다. 절댓값이 클수록 대비가 높습니다. 대략적인 기준: 본문 텍스트 Lc 90 권장/Lc 75 최소, 큰 텍스트 Lc 60, 큰 제목 Lc 45. APCA는 WCAG 2 대비율보다 어두운 배경/밝은 배경의 극성과 폰트 굵기를 더 잘 반영합니다.
현재 WCAG 2.1과 2.2 중 어느 버전이 요구되나요?
대비 기준값은 WCAG 2.0, 2.1, 2.2에서 동일합니다. WCAG 2.2가 현재 W3C 권고안이며 대부분의 신규 규정이 참조하는 버전이므로 2.2 AA 레벨을 목표로 하는 것이 좋습니다. 기존의 2.0 또는 2.1 AA 준수 작업은 핵심 대비 요구사항이 변경되지 않았으므로 텍스트 대비 측면에서 여전히 유효합니다.
Related tools
모든 도구 보기
신규 CSS Box-Shadow 생성기
프리셋과 라이브 미리보기로 다중 레이어 CSS box-shadow 제작. CSS, 값 또는 React 스타일을 즉시 복사.
신규 색상 팔레트 생성기
보색, 유사색, 삼색, 단색 팔레트 생성.
신규 Cubic Bezier 생성기
조절점을 드래그해 CSS 이징 곡선을 디자인 — 라이브 미리보기.
신규 Border Radius 생성기
CSS 둥근 모서리와 유기적 블롭 모양을 시각적으로 제작.
신규 CSS Flexbox 플레이그라운드
라이브 미리보기와 함께 flex 속성을 조정하고 CSS 복사.
신규 CSS Grid 플레이그라운드
라이브 미리보기와 CSS와 함께 그리드 열, 간격, 정렬 조정.