Kontrast Checker Pro
Sammenlign palet-, billed- og kodefarver i en læsbarhedsmatrix med rapporter og eksport.
Hvad Kontrast Checker Pro sammenligner
Kontrast Checker Pro sammenligner flere farver på én gang, så en hel palet, et billede eller et kodeuddrag kan vurderes for læsbarhed. I stedet for kun at teste et enkelt tekst og baggrundspar viser kontrastmatrixen, hvordan farverne fungerer mod hinanden. Det gør en contrast checker mere praktisk, når et designsystem har flere brandfarver, baggrundsflader, statusfarver og tekstfarver, der skal kombineres sikkert.
Kontrast Checker Pro har tre arbejdsmåder: Palet, Billede og Kode. Palettilstanden tester farver, du tilføjer manuelt. Billedtilstanden udtrækker farver fra et uploadet billede og kan sende dem videre til paletten. Kodetilstanden analyserer HTML og CSS-lignende uddrag og rapporterer tekstkombinationer, der ikke har nok kontrast.
Sådan bruger du Kontrast Checker Pro
- Start i fanen Palet, og brug Tilføj til at oprette flere farvefelter. Hvert felt kan ændres med farvevælgeren eller HEX-indtastningen.
- Læs Kontrastmatrix, når der er mindst to farver. Hver celle viser kontrastforholdet mellem to farver og bruger en visuel markering til at vise styrken.
- Klik på en matrixcelle for at åbne rapporten med forgrundsfarve, baggrundsfarve, kontrastforhold og læsbarhedsstatusser.
- Brug Eksportér, hvis paletten skal kopieres som CSS-variabler eller JSON-array.
- Skift til fanen Billede, hvis farver skal hentes fra et billede. Upload eller træk et PNG-, JPG- eller WEBP-billede ind i feltet.
- Brug Vælg til at plukke en ekstra farve fra billedet, og brug Analysér til at sende udtrukne farver til paletmatrixen.
- Skift til fanen Kode, indsæt et HTML- eller CSS-uddrag, og klik på Analysér for at finde kontrastproblemer i tekstfarver og baggrunde.
Palet Billede og Kode i samme kontrasttjek
De tre faner dækker forskellige beslutninger. Paletfanen er bedst, når farverne allerede er valgt og skal sammenlignes systematisk. Billedfanen er nyttig, når et visuelt udtryk, et produktfoto eller en kampagnegrafik skal omsættes til brugbare farver. Kodefanen er relevant, når en eksisterende komponent eller et HTML-udsnit skal kontrolleres uden først at skrive alle farverne ind manuelt.
| Fane | Input | Resultat | Bedst til |
|---|---|---|---|
| Palet | Manuelle HEX-farver | Kontrastmatrix og celle rapport | Brandpaletter, UI-farver og design tokens |
| Billede | PNG, JPG eller WEBP | Udtrukne farver og mulighed for paletanalyse | Hero-billeder, illustrationer og kampagnegrafik |
| Kode | HTML eller CSS-lignende uddrag | Liste over kontrastproblemer | Komponenter, knapper, kort og tekstblokke |
Sådan tolkes kontrastmatrixen
Kontrastmatrixen viser alle kombinationer mellem de farver, der er tilføjet. Diagonalen sammenligner en farve med sig selv og er derfor ikke den vigtigste del. De øvrige celler viser, om én farve kan bruges som tekst oven på en anden, eller om kombinationen bør reserveres til dekorative elementer.
En matrix er mest nyttig, når farverne har konkrete roller. Markér mentalt hvilke farver der er baggrunde, hvilke der er tekst, og hvilke der kun er accenter. En lav kontrast mellem to accentfarver kan være acceptabel, hvis de aldrig bruges som tekst og baggrund. En lav kontrast mellem tekstfarve og kortbaggrund bør derimod rettes, før designet bruges.
Rapporten for et enkelt farvepar
Når en matrixcelle åbnes, viser rapporten de to HEX-værdier, deres kontrastforhold og læsbarhedsstatusser for normal og stor tekst. Rapporten gør det lettere at vurdere et bestemt par uden at miste overblikket over resten af paletten. Knappen Åbn i farvekontrasttjek sender parret videre til Kontrast Checker, hvor farverne kan finjusteres med lyshed og opacitet.
Brug rapporten til at adskille tekniske fejl fra designvalg. Hvis et par fejler for normal tekst, kan det stadig bruges som baggrundsdekoration, kant, ikonbaggrund eller stor visuel flade. Hvis det skal bruges til tekst, bør en af farverne ændres, eller rollen i paletten bør justeres.
Billedfarver og praktisk vurdering
Billedtilstanden udtrækker en lille palet fra det uploadede billede. Det er nyttigt, når et visuelt tema skal matche tekst, knapper eller kort oven på en grafik. Udtrukne farver kan dog være påvirket af skygger, højlys og komprimering. Derfor bør de ses som forslag, der skal kontrolleres i matrixen, ikke som færdige tekstfarver.
Hvis du plukker farver direkte fra billedet, bør du vælge områder, der faktisk skal bruges i designet. En farve fra en mørk skygge kan være god som tekstfarve, men dårlig som baggrund. En meget lys nuance kan passe til en sektion, men fejle mod hvid tekst. Matrixen hjælper med at se disse forskelle tydeligt.
Kodeanalyse for eksisterende komponenter
Kodefanen kan bruges, når en komponent allerede har HTML og styling. Når et uddrag analyseres, finder funktionen tekstindhold, beregner den effektive tekstfarve og baggrund og rapporterer kombinationer med for lav kontrast. Det er især nyttigt for knapper, kort, badges, navigation og andre elementer, hvor farver ofte ligger direkte i markup eller inline styling.
Kodeanalyse bør stadig efterfølges af en manuel vurdering. Hvis et element mangler i rapporten, kan det skyldes, at teksten ikke findes direkte i det indsatte uddrag, at stilen kommer fra eksterne filer, eller at komponentens rigtige tilstand ikke er med. Brug rapporten som en hurtig teknisk kontrol, og gennemgå derefter kritiske UI-tilstande i den rigtige grænseflade.
Eksport til CSS og JSON
Eksportfunktionen samler de aktuelle paletfarver som CSS-variabler og JSON-array. CSS-variabler er praktiske, når farverne skal ind i et stylesheet eller et designsystem. JSON er nyttigt, når farverne skal gemmes, deles med et script eller bruges som data i et andet værktøj. Begge formater bevarer farverne som HEX-værdier, så de er lette at kopiere og kontrollere igen.
- Brug CSS-variabler, når farverne skal have roller som
--color-1,--color-2eller senere omdøbes til design tokens. - Brug JSON-array, når farverne skal sendes videre til dokumentation, prototyper eller automatiseret behandling.
- Eksportér først, når paletten har været gennem matrixen, så lavkontrastkombinationer ikke bliver spredt ukritisk.
Hvornår Kontrast Checker Pro bør bruges
Kontrast Checker Pro bør bruges, når farvearbejdet handler om relationer mellem mange farver. Det kan være et brandkit, et dashboard, et tema til lys og mørk tilstand, en kampagneflade, et diagram eller en komponentpakke. I disse tilfælde kan ét godkendt farvepar give falsk tryghed, fordi andre kombinationer i samme palet stadig kan fejle.
For rene referenceopgaver kan Farvekoder være et bedre næste skridt, hvis du skal slå farvenavne og værdier op. For beslutninger om tilgængelig tekst er matrixen dog mere direkte, fordi den viser hvilke kombinationer der reelt kan bruges sammen.
Almindelige fejl ved paletkontrast
- At godkende en palet ud fra de mest populære farver uden at teste sekundære baggrunde og statusfarver.
- At bruge farver fra et billede direkte som tekst eller knapper uden at kontrollere dem mod en fast baggrund.
- At se en lav matrixværdi som en fejl i alle tilfælde, selv om parret måske kun bruges dekorativt.
- At eksportere paletten, før farvernes roller og læsbarhed er afklaret.
- At teste kodeuddrag uden hover, fokus, disabled og fejltilstande, selv om de kan have egne farver.
Design tokens og farveroller
En palet bliver lettere at teste, når hver farve har en tydelig rolle. Skriv for eksempel ned hvilke farver der er primær baggrund, sekundær baggrund, brødtekst, dæmpet tekst, kant, fokusmarkering, succes, advarsel og fejl. Når rollerne er defineret, kan matrixen bruges målrettet: tekstfarver skal kontrolleres mod relevante baggrunde, mens rene accentfarver kun behøver at bestå, hvis de bærer information.
Kontrast Checker Pro er særlig nyttig tidligt i arbejdet med design tokens. Hvis en token skal bruges på tværs af komponenter, bør den ikke kun se god ud i ét kort eller én knap. Den bør også vurderes mod de baggrunde og statusfarver, den kan møde i resten af grænsefladen. Matrixen afslører hurtigt par, der bør forbydes, omdøbes eller begrænses til dekorativ brug.
Kontrol af billedbaserede farver
Farver fra billeder skal vurderes ekstra kritisk, fordi et billede ofte indeholder skygger, overgangstoner og lokale højlys. En udtrukket farve kan passe visuelt til billedet, men fejle som tekstbaggrund. Derfor bør billedfarver sendes til paletten og testes mod de tekstfarver, knapper og overlays, der faktisk skal bruges.
Hvis teksten placeres oven på selve billedet, bør flere områder kontrolleres. En farve kan være læsbar på et mørkt hjørne og ulæselig på et lyst område. Matrixen hjælper med farvevalg, men billedkomposition, gradientlag og tekstplacering skal stadig vurderes i den færdige visning.
Før farverne flyttes til produktion
Giv hver farve en rolle, før den bruges i et designsystem. En farve kan være primær baggrund, tekst, kant, accent eller status. Når rollerne er tydelige, bliver matrixen lettere at tolke, fordi du ved hvilke kombinationer der faktisk skal bestå. Gem derefter de godkendte kombinationer sammen med formålet, ikke kun med HEX-værdien.
Afslut med at kontrollere de vigtigste kombinationer i den endelige kontekst. Små skrifttyper, tynde fonte, gradients, gennemsigtige lag og billeder kan gøre en teknisk godkendt farve mindre læsbar i praksis. Kontrast Checker Pro giver overblikket, men den endelige vurdering bør altid ske dér, hvor brugeren skal læse teksten.