컬러 팔레트 + WCAG 검사기

대비율을 확인하고 AA/AAA 준수 여부를 검사하고 팔레트 변형을 생성하고 CSS 또는 Tailwind v4 색상 토큰을 로컬로 내보내요.

모든 색상 계산이 브라우저에서 로컬로 실행돼요. 업로드도, 계정도 없고 디자인 데이터가 기기 밖으로 나가지 않아요.

전경 색상

배경 색상

대비율 4.51:1

AA 본문 텍스트 통과

AAA 본문 텍스트 실패

AA 큰 텍스트 통과

색맹 안전성 테스트

기본 색상 변환

HEX #1A73E8

RGB rgb(26, 115, 232)

HSL hsl(214 82% 51%)

OKLCH oklch(0.574 0.195 257.9)

생성된 팔레트

#1A73E8

주색

#E88F1A

보색

#1ADAE8

유사색 좌

#281AE8

유사색 우

#0F4A97

음영

#6DA6F0

밝은 톤

CSS 변수

:root {
  --color-primary: #1A73E8;
  --color-background: #FFFFFF;
  --color-accessible: #1A73E8;
  --color-complementary: #E88F1A;
  --color-analogous-left: #1ADAE8;
  --color-analogous-right: #281AE8;
  --color-shade: #0F4A97;
  --color-tint: #6DA6F0;
}

Tailwind v4 @theme

@theme {
  --color-primary: oklch(0.574 0.195 257.9);
  --color-background: oklch(1.000 0.000 89.9);
  --color-accessible: oklch(0.574 0.195 257.9);
  --color-complementary: oklch(0.727 0.156 65.4);
  --color-analogous-left: oklch(0.811 0.135 203.2);
  --color-analogous-right: oklch(0.443 0.276 269.2);
  --color-shade: oklch(0.421 0.139 257.6);
  --color-tint: oklch(0.717 0.124 255.4);
}

WCAG 색상 대비 검사기란?

색상 팔레트 + WCAG 검사기는 전경-배경 색상 조합을 웹 콘텐츠 접근성 지침(WCAG 2.1) 대비율 요구사항에 따라 평가합니다. 정확한 대비율, 본문과 큰 텍스트 크기 모두에서 AA 및 AAA 준수의 통과/실패 상태를 보고하며, 실패 시 가장 가까운 통과 색상을 제안합니다. 대비 검사 외에도 기본 색상에서 보색, 유사색, 셰이드, 틴트 변형을 포함한 전체 색상 팔레트를 생성하고 CSS 사용자 정의 속성 또는 Tailwind v4 @theme 토큰(oklch() 값)으로 내보냅니다. 디자인 핸드오프용 PNG 스와치 시트도 다운로드할 수 있습니다. 모든 계산이 로컬에서 실행되며 서드파티 서비스가 관여하지 않습니다.

WCAG 색상 검사기 사용법

전경색과 배경색을 HEX 값으로 입력합니다(예: #1A73E8 on #FFFFFF). 검사기가 즉시 대비율과 WCAG AA 본문 텍스트(4.5:1), AAA 본문 텍스트(7:1), AA 큰 텍스트(3:1)의 통과/실패 배지를 표시합니다. 실패하면 원래 색조와 채도를 유지한 가장 가까운 통과 전경색이 제안됩니다. '제안 색상 사용'을 클릭하여 적용합니다. 검사기 아래에서 생성된 팔레트 변형을 탐색하고, CSS 변수나 Tailwind v4 테마 토큰을 복사하며, 디자이너와 공유할 PNG 스와치를 다운로드할 수 있습니다.

WCAG 색상 대비 준수가 중요한 이유

WCAG 2.1 대비 요구사항은 선택적 가이드라인이 아니라 ADA(미국), EAA(EU), EN 301 549(유럽)에 따른 많은 관할권에서 법적 요구사항입니다. AA 대비율을 충족하지 못하면 일부 사용자가 물리적으로 텍스트를 읽을 수 없으며 접근성 소송에 노출됩니다. 처음부터 WCAG 준수를 내장한 디자인 시스템은 비용이 많이 드는 사후 수정을 피할 수 있습니다. 컴포넌트가 구축되기 전의 디자인 토큰 단계에서 대비를 검사하는 것이 출시된 제품을 감사하는 것보다 훨씬 저렴합니다. CSS 변수나 Tailwind v4 @theme 값으로 직접 준수 토큰을 내보내면 디자인 의도와 프로덕션 코드 사이의 격차를 메웁니다.

자주 묻는 질문

통과 제안은 어떻게 작동하나요?

TeaFun은 선택한 전경 색상의 색조와 채도를 최대한 유지하면서 명도를 조정해 본문 텍스트 기준 WCAG AA에 도달하도록 해요.

Tailwind 내보내기는 새 v4 형식을 사용하나요?

네. 내보내기는 `@theme` 토큰과 `oklch()` 값을 사용해서 Tailwind v4 프로젝트에 바로 붙여넣을 수 있어요.

클라이언트 작업에 쓸 수 있나요?

네. 검사기는 브라우저 전용이라 브랜드 색상 테스트, 토큰 내보내기, PNG 스와치 생성을 외부 서비스로 아무것도 보내지 않고 할 수 있어요.

같은 태그 둘러보기

같은 작업 흐름, 형식, 사용 사례를 공유하는 다른 도구로 바로 이동하세요.