Profilfärger som klarar kontrastkraven
Av CodexierPublicerad 5 min läsning
En profilpalett är oftast tre eller fyra färger valda för en logotyp och ett visitkort. Lägg samma färger på en hemsida, och vit text på profilorangen underkänns i kontrastkontrollen, den ljusgrå brödtexten blir oläslig på en mobil i solsken, och tillgänglighetslagen för företagshemsidor börjar spela roll. Den här guiden visar hur du växer paletten till par som klarar kraven, så att varumärket förblir igenkännligt och sajten förblir laglig och läsbar.
Därför klarar många profilfärger inte kraven
Kontrast handlar om ljushet, inte kulör. En mättad orange känns stark, men dess ljushet ligger mitt i skalan, vilket är precis där varken vit eller svart text kommer tillräckligt långt ifrån den. Detsamma gäller de ljusgrå toner designers gillar för sekundär text. Kontrollen som lagen och webbläsarverktygen gör är mekanisk, så svaret måste också vara mekaniskt: mät paren, inte känslan.
Bygg nyanser och toner
Bygg för varje profilfärg en skala på ungefär tio steg från nästan vitt till nästan svart, med samma kulör och justerad ljushet. Den ursprungliga profilfärgen hamnar någonstans i mitten. De ljusaste stegen blir bakgrunder, de mörkaste blir text, och originalet behålls för logotyper, stora rubriker och accenter där kontrast inte krävs.
- Utgå från profilfärgen och generera steg i en perceptuell färgrymd, så att lika steg ser lika ut. Verktygen inbyggda i Figma och de flesta generatorer för designtokens gör det.
- Justera mättnaden något i skalans ändar så att de mycket ljusa och mycket mörka stegen fortfarande känns som varumärket och inte som grått.
- Namnge stegen med nummer, inte adjektiv: brand-100 till brand-900 åldras bättre än ljus och ljusare.
- Gör samma sak för en neutral gråskala med en antydan av profilkulören, vilket är det brödtext och kantlinjer faktiskt kommer att använda.
- Lägg till en semantisk uppsättning för lyckat, varning och fel, byggd på samma sätt, så att statusfärgerna också klarar kraven.
Varianter för mörkt läge
Mörkt läge är inte samma palett inverterad. Helvit text på helsvart bländar, mättade profilfärger ser ut som neon på mörka bakgrunder, och skuggor slutar fungera. Skalorna du byggt innehåller redan svaret: använd de mörkaste neutrala stegen som bakgrunder, de ljusare neutrala för text, och flytta varumärkesanvändningen några steg ljusare så att knappen som var brand-700 på vitt blir brand-400 på neutral-900.
Bakgrunder
Mörkt neutralt, inte svart. Lagra ytor genom att göra upphöjda element något ljusare i stället för att lägga till skugga.
Text
Bruten vit för brödtext, ett ljusare neutralt steg för sekundär. Båda behöver fortfarande 4.5:1-kontrollen mot den mörka ytan.
Varumärkesaccenter
Minska mättnaden något och gör ljusare. Profilfärgen som bär en knapp i ljust läge är oftast för mörk för att klara kraven i mörkt läge.
Avgör om ni behöver det
Mörkt läge fördubblar antalet par att underhålla. Lägg till det när er produkt används i långa pass eller när användarna ber om det, inte för att mallen erbjuder det.
Dokumentera godkända kombinationer
Mätningarna är värdelösa om nästa designer eller utvecklare väljer ett nytt par ur skalan utan att kontrollera. Skriv in de godkända paren i designsystemet som namngivna tokens: text-on-brand, brand-on-light, link, focus. Koden använder tokens, inte råa färger, så ett godkänt par kan inte tyst bli ett underkänt. Lägg kontrastvärdet bredvid varje par i dokumentationen, och lägg till en automatisk kontroll i bygget som stoppar när ett tokenpar faller under målet. Det är den del av ett designsystem och UI-kit som sparar mest besvär senare, och den hör ihop med de andra hållbara valen i webbdesign som håller i flera år.
När du inte behöver det här: en enda landningssida med mörk text på vitt och en knapp kan kontrolleras för hand på fem minuter. Du behöver inget tokensystem för det. Skalan och dokumentationen betalar sig när flera personer levererar gränssnittsarbete under flera år. Valdes era profilfärger innan hemsidan fanns och har ingen mätt dem, boka ett kostnadsfritt 15-minuterssamtal så kör vi paren ni använder i dag genom kontrollen tillsammans.
Vanliga frågor
Måste vi byta profilfärg om den underkänns?
Nej. Behåll den för logotyp, stora rubriker och dekorativ användning, där kontrastreglerna är lösare eller inte gäller. Lägg till mörkare och ljusare steg i samma kulör för text och knappar. Varumärket är kulören, inte det enda exakta värdet.
Är 4.5:1 ett lagkrav i Sverige?
För offentlig sektors webbplatser hänvisar tillgänglighetslagen till WCAG, som anger det värdet för vanlig text. För privata företag som omfattas av tillgänglighetskraven för vissa digitala tjänster från 2025 gäller samma standard. För alla andra är det god praxis som dessutom gör sajten läsbar på mobil utomhus.
Vilket verktyg ska vi använda för att kontrollera kontrast?
Alla WCAG-kontrastkontroller ger samma värde, eftersom formeln är fast. Figma-tillägg kontrollerar par under designarbetet, webbläsarens utvecklarverktyg visar värdet på skarpa sidor, och en kontroll av tokens vid bygge fångar försämringar.
Kan färg ensam visa att något är ett fel eller en länk?
Nej. Färg måste paras med en annan signal: understrykning för länkar, ikon eller text för fel, kantlinje för fokus. Färgblinda användare och alla i starkt ljus missar annars signalen även när kontrasten är godkänd.
Osäker på om er palett klarar kraven?
Skicka profilfärgerna och en sida där de används. På femton minuter säger vi vilka par som underkänns, vilka steg som skulle rätta dem och om en tokenuppsättning är värd det för er.
Boka ett kostnadsfritt 15-minuterssamtal