AnyTools
🌓
색상 대비 계산기
모든 전경색과 배경색 간의 WCAG 2.1 대비율을 확인하고 샘플 텍스트를 미리 보고 AA/AAA 합격 결과를 즉시 확인하세요.
색상 입력
전경색
배경색
미리보기
샘플 텍스트
미리보기 제목접근 가능한 인터페이스는 활기찬 브랜드 색상과 카피를 읽기 쉽게 유지하기에 충분한 대비를 결합합니다.
대비 결과
대비율
19.79:1
상대 휘도
전경색0.003
배경색1.000
| 기준 | 필수 | 상태 | 참고 |
|---|---|---|---|
| AA – 일반 텍스트 | 4.5:1 | 합격 | 본문 ≥ 4.5:1 |
| AAA – 일반 텍스트 | 7.0:1 | 합격 | 중요도가 높은 카피 ≥ 7:1 |
| AA – 큰 텍스트 | 3.0:1 | 합격 | 텍스트 ≥ 18pt 일반 또는 14pt 굵게 ≥ 3:1 |
| AAA – 큰 텍스트 | 4.5:1 | 합격 | 큰 텍스트 ≥ 4.5:1 |
| UI 그래픽/아이콘 | 3.0:1 | 합격 | 필수 아이콘 및 시각적 상태 ≥ 3:1 |
디자인 지침
비율 표를 가드레일로 사용하고 각 상태가 목표 수준에 도달할 때까지 반복하세요.
- 사진에 텍스트를 배치할 때 투명도 또는 오버레이를 추가하여 대비를 유지하세요.
- AAA는 미션 크리티컬 카피용으로 예약하세요; AA는 대부분의 대시보드에 우수한 기본값입니다.
- 개발자가 준수 팔레트를 재사용할 수 있도록 디자인 시스템에 승인된 색상 쌍을 문서화하세요.
❓색상 대비 테스트란
색상 대비 테스트는 전경색과 배경색 휘도의 차이를 측정하여 텍스트나 아이콘이 읽기 쉽게 유지되도록 보장하며, WCAG 및 대부분의 브랜드 가이드라인의 핵심 요구 사항입니다.
✨주요 기능
🎨
라이브 색상 선택
Ant Design 선택기로 전경색과 배경색을 조정하거나 정확한 HEX 값을 입력하세요.
📊
WCAG 매트릭스
일반 텍스트, 큰 텍스트 및 UI 그래픽에 대한 AA/AAA 요구 사항을 단일 테이블에서 확인하세요.
🧮
정확한 휘도
대비율은 선형화된 RGB 채널을 사용하는 WCAG 2.1을 따르며 색상별 휘도 판독값이 포함됩니다.
👁️
미리보기 블록
선택한 팔레트로 라이브 샘플 카드 내에서 제목과 단락을 테스트하세요.
📋사용 가이드
색상 선택
전경색과 배경색의 HEX 값을 선택하거나 붙여넣으세요.
비율 검토
계산된 대비율과 AA/AAA 표를 확인하여 합격/불합격 정보를 확인하세요.
복사 조정
샘플 텍스트를 편집하여 실제 레이블, 버튼 또는 마케팅 카피를 미리 보세요.
📚기술 소개
🔢상대 휘도
각 RGB 채널은 계수 0.2126, 0.7152 및 0.0722로 휘도를 계산하기 전에 WCAG 감마 곡선을 사용하여 선형 값으로 변환됩니다.
⚖️대비율
비율 공식 (L1 + 0.05) / (L2 + 0.05)는 밝은 색상과 어두운 색상을 비교하여 모든 장치에서 일관된 가독성을 보장합니다.
📐임계값
AA 일반 텍스트는 ≥ 4.5:1, 큰 텍스트는 ≥ 3:1, AAA 일반은 7:1, AAA 큰 텍스트는 4.5:1이 필요하며 그래픽 객체는 3:1을 충족해야 합니다.
❓
Frequently Asked Questions
❓
큰 텍스트는 다른 임계값을 사용합니까?
예. ≥ 18px 일반 또는 14px 굵게의 텍스트는 큰 텍스트로 인정되며 AA의 경우 3:1, AAA의 경우 4.5:1만 필요합니다.
💬
그라데이션을 테스트하는 방법은 무엇입니까?
그라데이션에서 가장 밝은 정지점과 가장 어두운 정지점을 확인하세요. 각 정지점 쌍은 원하는 비율을 충족해야 합니다.
🔍
아이콘이 텍스트로 간주됩니까?
단색 아이콘 및 필수 UI 그래픽은 배경에 대해 최소 3:1 대비를 충족해야 합니다.
💡How To & Tips
🧭
브랜드 팔레트로 시작
동일한 기본 팔레트에서 밝은 테마와 어두운 테마를 모두 테스트하려면 색상을 빠르게 교체하세요.
🪄
작은 단계로 반복
HEX 값을 조정하거나 색상 선택기 슬라이더를 사용하여 작은 조정이 준수에 어떤 영향을 미치는지 확인하세요.
📝
콘텐츠 미리보기
실제 UI 카피를 미리보기 블록에 붙여넣어 계층 구조와 강조를 평가하세요.
🔗Related Documents
📝업데이트 로그
📌v1.0.251117v1.0.0WCAG 표, 휘도 판독값 및 라이브 미리보기 카드가 포함된 초기 릴리스.(2025-11-17)
📦추천 컴포넌트
User Comments
Loading...