Lägg hela din färgpalett i en N×N granskningstabell — WCAG-förhållanden och APCA Lc för varje förgrund × bakgrund-par, synliga på ett ögonkast.
| 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 |
Rader = textfärg (förgrund), kolumner = bakgrund. Varje cell visar det verkliga förgrund-på-bakgrund-paret med två tillgänglighetsmått: WCAG-förhållande (AA brödtext ≥ 4,5, AA stor text ≥ 3,0) och APCA Lc (75+ för brödtext, 60+ för stor text).
Alla kandidatfärger i en N×N-matris – tillgänglighet för varje förgrund × bakgrund-par på en gång.
Ta med varumärkesfärger, semantiska färger och neutrala färger (upp till 10). Rader är förgrunder, kolumner är bakgrunder.
Varje cell visar WCAG-förhållande och APCA Lc. Prickarna lyser upp: brödtext vill ha Lc 75+, stor text 60+.
Spåra knapppar och brödpar i din designspec; eliminera icke-godkända kombinationer innan de lanseras.
Tre vanliga frågor vid fullmatrisgranskningar.
Integrera godkända par i din semantiska palett och spec.
WCAG 2.1 kontrastvalidering mellan valfri förgrunds- och bakgrundsfärg.
Simulera 8 typer av färgseende-brist för att granska tillgänglighet.
De de facto standarderna för akademisk publicering — Okabe-Ito (rekommenderad av Nature Methods), Paul Tol-serien, Nature NPG-tidningens palett och den perceptuellt enhetliga viridis. Varje färgprov levereras med en APCA-kontrastgrad, och en simulator för 8-typer av färgseende nedan verifierar varje palett live.
Ange en märkesfärg, få primär / sekundär / framgång / varning / fara — exporteras som Tailwind-konfiguration och CSS-variabler.