색상 대비 매트릭스
팔레트 안의 색상 대비 비율을 한 번에 비교합니다.
이 도구에 대해
팔레트의 모든 색상을 서로 비교해 WCAG 대비 비율과 통과 여부를 확인합니다.
텍스트, 배지, 차트 라벨, 디자인 토큰 조합을 구현 전에 점검할 때 유용합니다.
| 대비 | ||||
|---|---|---|---|---|
| #111827 | 1.00 본문 텍스트: 미달 큰 텍스트: 미달 | 3.43 본문 텍스트: 미달 큰 텍스트: 통과 | 6.33 본문 텍스트: 통과 큰 텍스트: 통과 | 17.74 본문 텍스트: 통과 큰 텍스트: 통과 |
| #2563EB | 3.43 본문 텍스트: 미달 큰 텍스트: 통과 | 1.00 본문 텍스트: 미달 큰 텍스트: 미달 | 1.84 본문 텍스트: 미달 큰 텍스트: 미달 | 5.17 본문 텍스트: 통과 큰 텍스트: 통과 |
| #F97316 | 6.33 본문 텍스트: 통과 큰 텍스트: 통과 | 1.84 본문 텍스트: 미달 큰 텍스트: 미달 | 1.00 본문 텍스트: 미달 큰 텍스트: 미달 | 2.80 본문 텍스트: 미달 큰 텍스트: 미달 |
| #FFFFFF | 17.74 본문 텍스트: 통과 큰 텍스트: 통과 | 5.17 본문 텍스트: 통과 큰 텍스트: 통과 | 2.80 본문 텍스트: 미달 큰 텍스트: 미달 | 1.00 본문 텍스트: 미달 큰 텍스트: 미달 |
사용 방법
- 1
필요한 값을 입력하거나 텍스트를 붙여넣습니다.
- 2
옵션이나 단위를 원하는 방식으로 조정합니다.
- 3
표시된 결과를 확인하고 필요한 곳에 복사해 사용합니다.
기능
즉시 결과
값을 입력하면 결과가 브라우저에서 바로 업데이트됩니다.
브라우저 처리
입력값은 서버로 업로드하지 않고 기기 안에서 처리됩니다.
간단한 입력
반복 사용에 맞춘 명확한 입력 필드와 출력값을 제공합니다.
무료 사용
가입이나 설치 없이 바로 사용할 수 있습니다.
주요 사용 사례
- ›팔레트에서 접근성에 맞는 텍스트/배경 조합을 찾습니다.
- ›버튼, 배지, 알림에 쓸 수 있는 색상 조합을 고릅니다.
- ›디자인 리뷰용 대비 비율을 정리합니다.