De fem färgrollerna
Under ”Design” och ”Färger” finns ”Din färgpalett”. Varje färg har en uppgift: ”Bakgrund” är grunden för hela sidan, ”Yta” allt som ligger ovanpå — kort, rutor, fält. ”Textfärg” gäller brödtexten, ”Accentfärg” knappar, länkar och allt som utför något. ”Text på knappar” är etiketten på accenten; lämnar du den tom räknar vi fram den så att den blir läsbar.
Du ställer in en färg genom att klicka på dess färgruta eller skriva in hex-värdet under den, till exempel #8A4B2E, och bekräfta med Enter. En streckad ruta betyder: ännu inte inställd, mallen avgör. ×:et bredvid en inställd färg tar bort den igen, och det lilla i:et bredvid varje roll förklarar den med en mening.
- Öppna ”Design” och välj ”Färger”.
- Klicka på en rolls färgruta eller skriv in dess hex-värde.
- Kontrollera i förhandsvisningen — sparandet sker av sig självt.
Kombinationer på färghjulet
”Utforska färgkombinationer” fäller ut färghjulet. Dess stora punkt är ”Basfärg”, och den är din accentfärg: det du väljer på hjulet sparas direkt som accentfärg. Du drar punkten med musen eller fingret; när den har fokus fungerar även piltangenterna, med Skift i större steg. Reglaget ”Ljusstyrka” nedanför gör färgen ljusare eller mörkare.
Bredvid väljer du en ”Harmoni”: ”Analog”, ”Monokrom”, ”Komplementär”, ”Delad komplementär”, ”Triad”, ”Kvadrat”, ”Nyanser” eller ”Egna”. ”Palett” nedanför visar de passande färgerna med hex-värde; ”Använd som …” under en färg lägger den på en enskild roll.
”Använd på varumärket” fördelar paletten på en gång: basen som accent, plus en ljus bakgrund, en ljus yta, en mörk textfärg och knapptext i svart eller vitt — beräknat för att vara läsbart. Därefter kan du ändra varje roll för sig.
- Fäll ut ”Utforska färgkombinationer” under ”Färger”.
- Dra den stora punkten till din huvudfärg och välj en harmoni.
- Klicka på ”Använd på varumärket”.
Läsbarhet
Under paletten mäter rutan ”Läsbarhet” fyra färgpar: ”Text på bakgrund”, ”Text på yta”, ”Text på knappar” och ”Accent på bakgrund” — enligt WCAG, minst 4,5:1. Varje par visar sin kontrast och ett omdöme i ord: ”Mycket lättläst”, ”Lättläst”, ”Knappt — svårläst” eller ”Inte läsbar”. Ett par där en av färgerna ännu inte är inställd mäts inte.
Om ett par inte är läsbart visas varningen vid båda färgerna (”För lite kontrast mot: …”) och i rutan följden för varje verktyg. ”Ersätts i: …” betyder att verktyget där visar en läsbar färg i stället för din — webbplats, formulär och WordPress svart eller vitt, butiken i första hand sin egen färg. ”Förblir så i: …” betyder att verktyget visar exakt dina färger, även om de är svårlästa.
Nedanför visas då ”Så blir det läsbart”: upp till tre färdiga paletter där varje par godkänns. Vi beräknar alla par tillsammans så att ingen korrigering förstör ett annat par — varje färg blir bara ljusare eller mörkare och behåller sin färgton; texten på knappar förblir din färg eller blir svart eller vit. En liten förhandsvisning visar de fyra paren för varje förslag, och bredvid står hur varje färg förskjuts. ”Tillämpa” lägger paletten på ditt varumärke, ”Ångra” hämtar tillbaka dina färger.
Läsbara färger hjälper alla: personer med nedsatt syn och alla som tittar på mobilen i solljus.
Kontrollera kontrasten i detalj
”Kontrollera kontrasten i detalj” granskar ett par noggrant. Högst upp väljer du paret; dess förhållande visas stort, till exempel 5,20 : 1. Nedanför finns förgrund och bakgrund, var och en med färgruta och ett reglage ”Ljusstyrka” — det du ändrar här ändrar ditt varumärkes färg.
Tabellen visar vilka nivåer paret klarar: ”Stor text”, ”Liten text” och ”Grafik och gränssnitt”, var och en för AA och AAA med ”Godkänd” eller ”Underkänd”. Brödtext kräver 4,5:1, stora rubriker 3:1; för en accent mot bakgrunden räcker 3:1. Bredvid ser du paret som en liten sida med rubrik och stycke.
Räcker kontrasten inte visas ”Förslag — samma ton, bara ljusare eller mörkare”: ett klick lägger den föreslagna färgen på rollen. Går det inte alls med färgtonen talar rutan om att du måste välja en av de två färgerna på nytt.
- Fäll ut ”Kontrollera kontrasten i detalj” under ”Färger”.
- Välj högst upp det par som inte är läsbart.
- Klicka på ett förslag eller dra reglaget ”Ljusstyrka” tills ”Godkänd” visas.