Styleguide

Textkontraster

För att texten ska vara lätt att läsa krävs det att den har tillräcklig kontrast. Det innebär att texten ibland måste vara mörk och ibland ljus, beroende på bakgrunden.

Styleguidens färger har en egen nummerserie och för att kontrasten ska bli rätt måste det skilja tillräckligt många steg mellan de valde färgernas nummer.

Kontrast mellan olika färger

För att få rätt kontrast mellan de färger du väljer behöver det skilja minst fyra steg, det vill säga det måste skilja minst 400 mellan de valda färgernas nummer.

Exempel: Mörkblå text med koden blå-700 har tillräcklig kontrast både om bakgrunden har färgen grön-300 eller blå-300.

Kontrast mellan grå nyanser

För att få rätt kontrast mellan de grå färgerna i styleguiden behöver det skilja minst 5 steg, det vill säga minst 500 mellan de valda färgernas nummer.

Exempel: Mörkgrå text med koden grå-070 har tillräcklig kontrast mot bakgrunden (grå-020).

Textlänkar på grå bakgrund

Du behöver tänka på bakgrunden.

När du har en mörk länk, blå-600, bör den ljusgrå bakgrunden inte vara mörkare än grå-005.
När du har en ljus länk, till exempel blå-400, bör den mörkgrå bakgrunden vara färgen grå-070 eller en ännu mörkare färg.

När du behöver skapa egna komponenter

Om du behöver göra egna komponenter är det bra att känna till följande:

Behöver du skapa en egen tabell eller något annat med zebraeffekt ska du använda färgen (#ebebeb). Kontakta styleguideteamet för mer information.
Undvik att ha text över bilder. Särskilt responsiva bilder ändrar sig beroende på innehåll och webbläsarens skärmstorlek. Det är omöjligt att veta vad bakgrundsfärgen blir mot texten.
Lite inte på dina ögon för att bestämma den korrekta kontrasten utan kontrollera den med digitala verktyg. Även om en vit text över ljust orange eller neongrönt verkar lätt att läsa är kontrasten ofta för låg.