Kontrast Checker

Hvad Kontrast Checker måler

Kontrast Checker måler forskellen mellem tekstfarve og baggrundsfarve, så en farvekombination kan vurderes, før den bruges i en grænseflade. Det centrale resultat er et kontrastforhold, for eksempel 7.90:1, som viser hvor tydeligt forgrund og baggrund adskiller sig. En color contrast checker er især nyttig, når en farve ser pæn ud i en palet, men skal fungere som læsbar tekst, knaptekst, formularlabel eller statusbesked.

Kontrast Checker arbejder med to HEX-felter, farvevælgere, lyshedsskydere og opacitetsskydere. Når farverne ændres, opdateres forhåndsvisningen, kontrastforholdet, læsbarhedsstatusserne og kontrastassistenten. Det gør det muligt at se både den visuelle effekt og den målbare læsbarhed uden at skifte mellem flere kontroller.

Sådan bruger du Kontrast Checker

1. Indtast eller vælg en tekstfarve i feltet Tekstfarve. Brug HEX-feltet, farvevælgeren eller lyshedsskyderen, hvis farven skal gøres lysere eller mørkere.
2. Indtast eller vælg en baggrundsfarve i feltet Baggrundsfarve. Forhåndsvisningen ændres med det samme, så tekst, brødtekst og knap kan vurderes sammen.
3. Juster Lyshed og Opacitet for tekst eller baggrund, hvis kombinationen næsten virker, men ikke giver nok kontrast.
4. Læs kontrastforholdet øverst i resultatfeltet, og brug resultatfelterne til at se, om kombinationen fungerer til normal tekst, stor tekst og mere krævende læsning.
5. Brug Byt farver, når forgrund og baggrund skal testes i omvendt retning, eller Nulstil, hvis du vil tilbage til startkombinationen.
6. Kopiér tekstfarven eller baggrundsfarven fra de små kopiknapper, når den valgte kombination er klar til videre brug.

Sådan læses kontrastresultatet

Et højt kontrastforhold betyder normalt, at teksten er lettere at skelne fra baggrunden. Vurderingen i Kontrast Checker viser flere niveauer, fordi god læsbarhed afhænger af tekstens størrelse og formål. Brødtekst, formularfelter og små navigationselementer bør vurderes strengere end store overskrifter eller dekorative labels.

Hvornår Kontrast Checker er mest nyttig

Kontrast Checker er mest nyttig, når en farvebeslutning påvirker læsbarhed. Det kan være en tekst på en brandfarvet knap, et badge på en lys baggrund, en fejlbesked, et link i en artikel, en tabeloverskrift eller en knap i mørk tilstand. I sådanne situationer er det ikke nok, at farverne ser harmoniske ud. Kombinationen skal også give en tydelig forskel mellem tekst og baggrund.

For designere hjælper Kontrast Checker med at sortere farvepar, før de bliver til komponenter. For udviklere er den praktisk, når HEX-værdier fra CSS eller designsystemer skal dobbelttjekkes. For indholdsansvarlige er den nyttig, når tekst lægges oven på kampagnefarver, billeder eller stærke baggrunde.

Farvepar der bør kontrolleres før brug

• Tekst på primære og sekundære knapper, især når knappen har en stærk brandfarve.
• Links, menupunkter og formularlabels, fordi de ofte er mindre end overskrifter.
• Fejl, succes, advarsel og informationsbeskeder, hvor farve også kan signalere status.
• Tekst på kort, badges og etiketter, hvor baggrunden kan være tonet eller halvtransparent.
• Elementer i mørk tilstand, hvor en farve kan se stærk ud, men stadig give lav kontrast.

Lyshed og opacitet uden at miste læsbarhed

Lyshedsskyderen ændrer farvens tone, mens opacitetsskyderen gør forgrund eller baggrund mere gennemsigtig. Begge kontroller kan være nyttige, men de bør bruges med omtanke. En tekstfarve med lav opacitet kan se elegant ud på en ensfarvet baggrund, men den faktiske kontrast bliver lavere, fordi teksten blandes med baggrunden. Det samme gælder en baggrund, der ligger oven på dokumentets grundfarve.

Når målet er læsbar tekst, er det ofte mere stabilt at ændre lysheden på selve farven end at gøre teksten gennemsigtig. Brug opacitet til sekundære dekorative elementer, og brug klare farver til brødtekst, labels og knapper, der skal kunne læses hurtigt.

Brug kontrastassistenten til hurtige justeringer

Kontrastassistenten giver forslag, når kombinationen ikke er stærk nok. Forslagene kan hjælpe med at ændre den farve, der sandsynligvis bør justeres, uden at hele paletten skal skiftes ud. Det er især nyttigt, når en brandfarve skal bevares, men tekstfarven eller baggrunden kan gøres lysere, mørkere eller mere solid.

Brug forslagene som en teknisk start, ikke som en automatisk endelig beslutning. Kontroller altid den nye farve visuelt i forhåndsvisningen, og vurder om den stadig passer til designets tone, hierarki og formål.

Forholdet til paletter og flere farver

Kontrast Checker er bedst til et enkelt forgrunds og baggrundspar. Når du skal sammenligne mange farver i en palet, kan Kontrast Checker Pro give et bredere overblik, fordi flere farver kan vurderes i en matrix. Når du kun mangler en ny værdi til tekst eller baggrund, kan Farvevælger bruges til at finde og justere en præcis farve, før den kontrolleres igen.

Almindelige fejl ved farvekontrast

• At vurdere kontrast ud fra skærmens udseende alene uden at læse kontrastforholdet.
• At teste store overskrifter, men glemme brødtekst, formularlabels og små knapper.
• At bruge en farve med lav opacitet til vigtig tekst, fordi den ser mere diskret ud.
• At glemme hover, fokus, aktiv og disabled tilstande, selv om de kan have andre farver.
• At bruge farve alene til fejl eller succes uden tekst, ikon, form eller anden tydelig markering.

Læsbarhed i praktiske UI beslutninger

Resultatstatusserne bør bruges som beslutningsstøtte for rigtige tekststørrelser. Normal tekst kræver mere kontrast end store overskrifter, fordi små bogstaver har tyndere former og mindre visuel overflade. Hvis en kombination kun fungerer for stor tekst, bør den ikke bruges til brødtekst, inputfelter eller knaptekst. Den kan stadig være egnet til store dekorative ord, korte hero-overskrifter eller tydelige grafiske flader, hvis teksten er stor nok.

Det er også vigtigt at kontrollere tekstens vægt. En lys, tynd font kan virke svagere end en fed font med samme farve. Hvis designet bruger små skriftstørrelser, tætte linjeafstande eller meget tynde skrifttyper, er det klogt at vælge et kontrastforhold, der ligger tydeligt over minimum. Det giver mere plads til forskelle mellem skærme, zoomniveauer og lysforhold.

Kontrol i lys og mørk tilstand

En farve, der fungerer på en lys baggrund, fungerer ikke automatisk på en mørk baggrund. Det samme gælder omvendt. Test derfor de samme roller i begge tilstande, hvis grænsefladen har temaer. Primære knapper, sekundære knapper, links, inputrammer, placeholders og fejltekster bør vurderes med den baggrund, brugeren faktisk ser.

Ved mørk tilstand kan mættede farver se klare ud, men stadig være svære at læse, hvis luminansen ligger tæt på baggrunden. Ved lys tilstand kan pastelfarver se behagelige ud, men mangle styrke til små labels. Kontrast Checker gør forskellen synlig, så valget ikke kun afhænger af øjemål.

Kontrol af tilstande og komponenter

Et farvepar bør kontrolleres i den komponenttilstand, hvor brugeren møder det. En knap kan have én baggrund i normal tilstand, en anden ved hover, en tredje ved fokus og en mere dæmpet farve, når den er deaktiveret. Hvis kun normaltilstanden testes, kan en vigtig variant ende med for lav kontrast. Det samme gælder links, tabs, badges, inputrammer og valideringsbeskeder.

Start med de farvepar, der bærer handling eller information. Primære knapper, fejlbeskeder og formularlabels har højere risiko end dekorative ikoner. Når de kritiske par består, kan sekundære par vurderes med mere fleksibilitet. På den måde bruges Kontrast Checker til de beslutninger, der påvirker forståelse og navigation mest.

Fra godkendt farvepar til CSS

Når et par er godkendt, bør både forgrund og baggrund gemmes sammen. En tekstfarve alene siger ikke nok, fordi den kan være læsbar på én baggrund og svag på en anden. Gem derfor kombinationen som en rolle, for eksempel tekst på primær knap, dæmpet tekst på kort eller link på lys baggrund.

Hvis farverne skal ind i CSS, kan HEX-værdierne kopieres direkte fra felterne. Brug derefter meningsfulde variabelnavne i projektet i stedet for kun at gemme farver som nummererede værdier. Det gør senere kontrastkontrol lettere, fordi rollen bag farven stadig er tydelig, og fordi nye variationer kan testes mod samme reference.

Før du kopierer farverne

Kontroller først, at kombinationen passer til den faktiske tekststørrelse. Brug derefter forhåndsvisningen til at vurdere, om knap, overskrift og brødtekst stadig har den ønskede visuelle prioritet. Hvis kombinationen kun lige består, kan en lidt stærkere forskel give mere robust læsbarhed på ældre skærme, i sollys og ved mindre skrifttyper.

Når farverne kopieres, bør de gemmes sammen med en note om deres rolle, for eksempel tekst på primær knap eller brødtekst på lys baggrund. Det gør kombinationen lettere at genbruge korrekt i CSS, design tokens eller dokumentation.