Färger
Färgerna i KTH Style baserar sig på KTH:s profilfärger och är justerade för att ge tillräcklig kontrast.
Om färger i KTH Style
Komponener i KTH style är framtagna för att ge tillräcklig kontrast (se nedan: Använd tillräcklig kontrast mellan text och bakgrund). Men eftersom komponenter som bakgrunder, ikoner och kantlinjer kan kombineras på olika sätt behöver du veta hur du gör för att få rätt kontrast (se Riktlinjer för specifika färger).
Kriterier för att färgerna i KTH Style ska fungera:
- De placeras på en rätt bakgrund. Använder du färger på annat sätt än som finns beskrivet nedan (se Riktlinjer för specifika färger) behöver du kontrollera kontrasten.
- Har minst liten text (14 px), normal font.
Om färgerna i KTH Style, när de används enligt kriterierna ovan, inte ger tillräcklig kontrast så markeras det i tabellen nedan med "Observera". Du behöver då anpassa användning efter riktlinjerna.
Man kan kontrollera kontraster manuellt (automatiska testverktyg kontrollerar bara text mot bakgrund) med verktyget Contrast Ratio .
Generella riktlinjer för färger
Använd tillräcklig kontrast mellan text och bakgrund
Textstorlekar som minst gäller för att uppfylla kontrast nivå AA är liten text (14 px), normal font.
Vissa av KTH Styles färger uppfyller inte kontrast för nivå AA i WCAG för liten text utan behöver ha stor text (18px eller 14px fet). Komponenter i KTH Style som använder dessa färger är anpassade till det.
KTH Style uppfyller tilllgänglighetskrav 1.4.3 i webbriktlinjer.se .
Använd tillräckliga kontraster i komponenter och grafik
Ljusa färger som används på en vit bakgrund ger inte tillräcklig kontrast. Är det viktigt att urskilja bakgrunden för förståelse av innehållet behöver du använda den mörkare kantlinjen. Komponenter i KTH Style som använder dessa färger är anpassade till detta.
Ikoner och grafik som är informationsbärande ska ha tillräcklig kontrast mot bakgrunden. Ikoner med en färg som inte har tillräcklig kontrast mot vit bakgrund behöver ha en mörk kantlinje. Ikoner i KTH Style är anpassade efter detta.
KTH Style uppfyller tilllgänglighetskrav 1.4.11, i webbriktlinjer.se .
Använd inte enbart färg för att förmedla information
När du använder färger för att kunna filtrera information är det viktigt att färgerna går att särskilja även för den som är färgblind. Det finns olika typer av färgblindhet, och de är olika vanliga (se Defekt färseende ).
Du kan testa hur en sida ser ut för olika färgblindheter genom att installera en plugin för färgblindhet i Chrome-webläsaren (se Colorblinding ).
Komponenter i KTH Style använder färg tillsamans med form och text för att informera.
KTH Style uppfyller tilllgänglighetskrav 1.4.1 i webbriktlinjer.se .
Färgstyrka
Starka färger ska undvikas då de har negativ påverkan på personer med koncentrationssvårigheter. Det finns inget sätt att mäta om en färg är för stark utan det görs med användningstester, se Testa användbarhet och tillgänglighet .
Riktlinjer för specifika färger
Se Colors (i KTH Style, på engelska).
| Färger | Riktlinjer för användning |
|---|---|
| Dark background | Används som bakgrund. Används med vit text. Observera: $green uppfyller kontrast nivå AA om stor text (18px eller 14px fet). |
| Light background | Används som bakgrund. Används med svart text. Observera: behöver kantlinje $Grey om det är viktigt att urskilja bakgrunden. |
| Success | Används för att bekräfta success. Används som bakgrund med svart text. Observera: behöver kantlinje $Grey om det är viktigt att urskilja bakgrunden. |
| Error | Används för felhantering $Red används med vit text. $InfoRed används som bakgrund med svart text. Observera: $InfoRed behöver kantlinje $Grey om det är viktigt att urskilja bakgrunden. |
| Information and alert |
Används för att informera och uppmärksamma. $InfoYellow används som bakgrund med svart text. $InfoYellowicon används för ikoner för alert, om text så ska den vara svart. Observera: $InfoYellow behöver kantlinje $Grey om det är viktigt att urskilja bakgrunden/ ikonen. $InfoYellowicon behöver kantlinje $Grey. |
| Hover | Används för att markera att element är interaktiva när man för musen över. Används med vit text |
| Text | Används som text. $Black och $LinkBlue används som text på Ljus bakgrund. $White används som text på Mörk bakgrund. |
| Boarder | Används som kantlinje. Observera: $BorderGrey ger inte tillräcklig kontrast mot vit bakgrund. Använd $Grey om det är viktigt att urskilja kantlinjen mot bakgrunden. |