Vælge og kontrollere brandfarver.

De fem farveroller

Under „Design“ og „Farver“ finder du „Din farvepalet“. Hver farve har en opgave: „Baggrund“ er bunden for hele siden, „Flade“ er alt, der ligger ovenpå — kort, bokse, felter. „Tekstfarve“ gælder brødteksten, „Accentfarve“ knapper, links og alt, der udfører en handling. „Skrift på knapper“ er teksten på accenten; lader du den stå tom, beregner vi den, så den er læsbar.

Du angiver en farve ved at klikke på dens farvefelt eller indtaste hex-værdien nedenunder, fx #8A4B2E, og bekræfte med Enter. Et stiplet felt betyder: endnu ikke angivet, skabelonen bestemmer. × ved siden af en angivet farve frigiver den igen, og det lille i ved siden af hver rolle forklarer den med én sætning.

1. 1Åbn „Design“, og vælg „Farver“.
2. 2Klik på en rolles farvefelt, eller indtast dens hex-værdi.
3. 3Se efter i forhåndsvisningen — der gemmes af sig selv.

Kombinationer på farvehjulet

„Udforsk farvekombinationer“ folder farvehjulet ud. Den store prik er „Basisfarve“, og den er din accentfarve: Det, du vælger på hjulet, gemmes straks som accentfarve. Du trækker prikken med mus eller finger; har den fokus, virker piletasterne også, med Skift i større trin. Skyderen „Lysstyrke“ nedenunder gør farven lysere eller mørkere.

Ved siden af vælger du en „Harmoni“: „Analog“, „Monokrom“, „Komplementær“, „Splitkomplementær“, „Triade“, „Kvadrat“, „Nuancer“ eller „Egne“. „Palet“ nedenunder viser de passende farver med hex-værdi; „Brug som …“ under en farve lægger den på en enkelt rolle.

„Anvend på brandet“ fordeler paletten på én gang: basen som accent, plus en lys baggrund, en lys flade, en mørk tekstfarve og knaptekst i sort eller hvid — beregnet, så den er læsbar. Bagefter kan du ændre hver rolle enkeltvis.

1. 1Fold „Udforsk farvekombinationer“ ud under „Farver“.
2. 2Træk den store prik hen på din hovedfarve, og vælg en harmoni.
3. 3Klik på „Anvend på brandet“.

Læsbarhed

Under paletten måler boksen „Læsbarhed“ fire farvepar: „Tekst på baggrund“, „Tekst på flade“, „Skrift på knapper“ og „Accent på baggrund“ — efter WCAG, mindst 4,5:1. Hvert par viser sin kontrast og en vurdering i ord: „Meget god læsbarhed“, „God læsbarhed“, „Knapt — svært at læse“ eller „Ikke læsbar“. Et par, hvor en af farverne endnu ikke er angivet, bliver ikke målt.

Er et par ikke læsbart, står advarslen ved begge farver („For lidt kontrast til: …“), og boksen viser konsekvensen for hvert værktøj. „Erstattes i: …“ betyder, at dette værktøj dér viser en læsbar farve i stedet for din — website, formular og WordPress sort eller hvid, butikken først sin egen farve. „Forbliver uændret i: …“ betyder, at værktøjet viser præcis dine farver, også selv om de er svære at læse.

Nedenunder står så „Sådan bliver det læsbart“: op til tre færdige paletter, hvor hvert par består. Vi beregner alle par samlet, så ingen rettelse ødelægger et andet par — hver farve bliver kun lysere eller mørkere og beholder sin farvetone; skriften på knapper forbliver din farve eller bliver sort eller hvid. En lille forhåndsvisning viser de fire par for hvert forslag, og ved siden af står, hvilken farve der flytter sig hvordan. „Anvend“ lægger paletten på dit brand, „Fortryd“ henter dine farver tilbage.

Læsbare farver hjælper alle: mennesker, der ser dårligt, og alle, der kigger på mobilen i sollys.

Kontrollere kontrasten i detaljer

„Kontrollér kontrasten i detaljer“ tager et enkelt par under lup. Øverst vælger du parret; med store tal står forholdet, fx 5,20 : 1. Nedenunder står forgrund og baggrund, hver med farvefelt og en skyder „Lysstyrke“ — det, du ændrer her, ændrer dit brands farve.

Tabellen viser, hvilke niveauer parret klarer: „Stor tekst“, „Lille tekst“ og „Grafik og betjening“, hver for AA og AAA med „Bestået“ eller „Ikke bestået“. Brødtekst kræver 4,5:1, store overskrifter 3:1; til en accent ved siden af baggrunden er 3:1 nok. Ved siden af ser du parret som en lille side med overskrift og afsnit.

Er kontrasten ikke nok, vises „Forslag — samme tone, bare lysere eller mørkere“: Et klik lægger den foreslåede farve på rollen. Kan det slet ikke lade sig gøre med farvetonen, fortæller boksen, at du skal vælge en af de to farver på ny.

1. 1Fold „Kontrollér kontrasten i detaljer“ ud under „Farver“.
2. 2Vælg øverst det par, der ikke er læsbart.
3. 3Klik på et forslag, eller træk skyderen „Lysstyrke“, indtil „Bestået“ vises.