컬러 팔레트 + WCAG 검사기
대비율을 확인하고 AA/AAA 준수 여부를 검사하고 팔레트 변형을 생성하고 CSS 또는 Tailwind v4 색상 토큰을 로컬로 내보내요.
전경 색상
배경 색상
기본 색상 변환
#1A73E8rgb(26, 115, 232)hsl(214 82% 51%)oklch(0.574 0.195 257.9)생성된 팔레트
CSS 변수
:root {
}Tailwind v4 @theme
@theme {
}컬러 팔레트 + WCAG 검사기을(를) 테스트했어요 — 다음엔 색맹 검사 시도해 보세요 →
WCAG 색상 대비 검사기란?
색상 팔레트 + WCAG 검사기는 두 sRGB 색상 간의 상대 휘도 명도비를 계산하고 웹 콘텐츠 접근성 지침(WCAG)에 대해 평가합니다. 공식은 고정되어 있습니다. 각 채널을 sRGB에서 선형 광으로 선형화합니다(L = R*0.2126 + G*0.7152 + B*0.0722, 감마 디코딩 후). 그런 다음 (L_lighter + 0.05) / (L_darker + 0.05)를 계산합니다. 결과는 명도비로, 1.0(동일한 색상)에서 21.0(순검정 대 순흰색)까지 범위입니다. WCAG 2.1은 3가지 임계값을 설정합니다. 일반 본문(AA)은 4.5:1, 18pt 이상 또는 14pt 굵은 대형 텍스트(AA)는 3:1, 더 엄격한 AAA 등급은 7:1 / 4.5:1입니다. WCAG 2.2(2023년 10월 발행)는 2.1에 없던 UI 구성 요소와 포커스 가시 윤곽에 대한 3:1 요구 사항을 추가했습니다. 등급 평가를 넘어, 도구는 OKLCH 공간(HSL과 달리 지각적으로 균일)의 단일 시드 색상에서 조화로운 팔레트(상보색, 유사색, 음영, 색조)를 생성하고 결과를 CSS 사용자 정의 속성 또는 Tailwind v4 @theme 토큰으로 내보냅니다. 설계 인계용 PNG 견본 시트가 함께 제공됩니다.
WCAG 색상 검사기 사용법
전경색 및 배경색을 HEX로 입력합니다(#1A73E8 위의 #FFFFFF). 명도비 및 AA 표준(4.5:1), AAA 표준(7:1), AA 대형(3:1), AA UI(3:1, WCAG 2.2)에 대한 통과/실패 배지가 즉시 나타납니다. 색상 쌍이 실패하면, 제안자는 OKLCH 휘도 축을 따라 전경색을 더 어둡거나 더 밝게 조정하면서 색상과 채도를 유지하므로 브랜드 색상 ID가 유지됩니다. 제안된 색상 사용을 클릭하여 적용합니다. 테스트의 전형적인 실패: 순황색 #ffff00 위의 흰색 텍스트(#ffffff 전경색) — 비율은 1.07:1로 3:1보다 훨씬 낮지만, 맨눈에는 '고명도비'로 보입니다. 황색 위의 검은색은 19.55:1로 깊이 있게 통과합니다. 검사기 아래, 팔레트 패널은 입력에서 생성된 상보 및 유사 변형을 표시합니다. CSS 변수 복사, Tailwind 4 테마 토큰 복사 또는 PNG 견본을 다운로드합니다.
WCAG 색상 대비 준수가 중요한 이유
WCAG 명도비 준수는 미국의 ADA, 2025년 6월부터 EU에서 판매되는 제품 및 서비스에 대해 발효되는 유럽 접근성법(EAA), 공공 부문 조달을 위한 EN 301 549에 따라 강제 가능한 법입니다. EAA에 따른 벌금은 관할권에 따라 €30 000~€500 000에 달합니다. 법적 노출을 넘어, 4.5:1 임계값은 20/40 시력을 가진 사람이 본문을 편하게 읽기 위해 필요한 명도비에 근접합니다. 이는 경계선 장애 사례가 아니라 자연적 수정체 황변 후 40세 이상의 대부분의 독자입니다. 처음부터 준수하는 토큰을 설계하면 모든 구성 요소에서 브랜드색 핫픽스를 실행하는 리모델링 비용이 발생하지 않습니다. 일반적인 함정은 맨눈으로 명도비를 판단하는 것입니다. 브랜드 핑크색과 옅은 청록색이 설계자에게 '읽기 쉬워 보이지만'(20/20 시력, 스튜디오 조명 아래) 형광등 사무실 조명 아래에서는 2배 실패합니다. 비율을 조기에 실행하십시오 — 구성 요소 빌드 단계가 아닌 토큰 정의 단계에서 — 의견이 아닌 산술로 질문을 해결합니다.
자주 묻는 질문
통과 제안은 어떻게 작동하나요?
TeaFun은 선택한 전경 색상의 색조와 채도를 최대한 유지하면서 명도를 조정해 본문 텍스트 기준 WCAG AA에 도달하도록 해요.
Tailwind 내보내기는 새 v4 형식을 사용하나요?
네. 내보내기는 `@theme` 토큰과 `oklch()` 값을 사용해서 Tailwind v4 프로젝트에 바로 붙여넣을 수 있어요.
클라이언트 작업에 쓸 수 있나요?
네. 검사기는 브라우저 전용이라 브랜드 색상 테스트, 토큰 내보내기, PNG 스와치 생성을 외부 서비스로 아무것도 보내지 않고 할 수 있어요.
이 도구를 더 큰 작업 흐름 안에서 쓰기
이 컬렉션은 같은 작업에 자주 이어지는 도구와 가이드를 함께 묶어 둡니다.
같은 태그 둘러보기
같은 작업 흐름, 형식, 사용 사례를 공유하는 다른 도구로 바로 이동하세요.