전체 팔레트를 N×N 감사 테이블에 넣으세요 — 모든 전경 × 배경 쌍에 대한 WCAG 비율과 APCA Lc를 한눈에 확인하세요.
| fg ↓ / bg → | |||||||
|---|---|---|---|---|---|---|---|
Ag1.0Lc0 | Ag4.2Lc+35 | Ag3.8Lc+31 | Ag5.2Lc+42 | Ag8.4Lc+62 | Ag1.2Lc0 | Ag17.4Lc+104 | |
Ag4.2Lc-33 | Ag1.0Lc0 | Ag1.1Lc0 | Ag1.3Lc0 | Ag2.0Lc+25 | Ag5.0Lc-34 | Ag4.2Lc+67 | |
Ag3.8Lc-29 | Ag1.1Lc0 | Ag1.0Lc0 | Ag1.4Lc+10 | Ag2.2Lc+30 | Ag4.6Lc-30 | Ag4.6Lc+72 | |
Ag5.2Lc-40 | Ag1.3Lc0 | Ag1.4Lc-11 | Ag1.0Lc0 | Ag1.6Lc+18 | Ag6.3Lc-41 | Ag3.3Lc+60 | |
Ag8.4Lc-61 | Ag2.0Lc-27 | Ag2.2Lc-32 | Ag1.6Lc-20 | Ag1.0Lc0 | Ag10.2Lc-62 | Ag2.1Lc+40 |
행 = 텍스트 색상(전경), 열 = 배경. 각 셀은 실제 전경-배경 쌍을 두 가지 접근성 지표와 함께 렌더링합니다: WCAG 비율(AA 본문 ≥ 4.5, AA 큰 텍스트 ≥ 3.0) 및 APCA Lc(본문 텍스트의 경우 75+, 큰 텍스트의 경우 60+).
모든 후보 색상을 N×N 매트릭스에 한 번에 모든 전경×배경 쌍의 접근성과 함께 표시합니다.
브랜드 색상, 의미적 색상, 중성색을 가져옵니다(최대 10개). 행은 전경, 열은 배경입니다.
각 셀은 WCAG 비율과 APCA Lc를 표시합니다. 점이 켜집니다: 본문 텍스트는 Lc 75 이상, 큰 텍스트는 60 이상을 원합니다.
버튼 쌍과 본문 쌍을 디자인 사양에 기록하세요; 출시 전에 실패하는 조합을 제거하세요.
전체 매트릭스 감사에서 자주 묻는 세 가지 질문입니다.
통과한 쌍을 의미적 팔레트와 사양에 반영하세요.
임의의 전경색과 배경색 간의 WCAG 2.1 대비 검증을 수행합니다.
8가지 유형의 색각 이상을 시뮬레이션하여 접근성을 검토하세요.
학술 출판의 사실상 표준인 Okabe-Ito(Nature Methods에서 권장), Paul Tol 시리즈, Nature NPG 저널 팔레트 및 지각적으로 균일한 Viridis입니다. 모든 색상 견본에는 APCA 대비 등급이 포함되며, 아래에 있는 8가지 유형의 색각 시뮬레이터가 각 팔레트를 실시간으로 검증합니다.
하나의 브랜드 색상을 입력하면 primary / secondary / success / warning / danger를 제공하며 Tailwind 설정과 CSS 변수로 내보낼 수 있습니다.