Kontrast på text och komponenter

Owned by Marielle Sellin
maj 30, 2022
1 min read

På denna sida så beskrivs riktlinjerna för hur man ska tänka med kontraster för olika storlekar av text och icke-textobjekt som exempelvis knappar, inputfält med mera.

Källor för riktlinjen:

Kontrast för text

Tillräckligt hög kontrast är viktigt för alla användare oavsett synnedsättning eller ej. Det finns två krav när det gäller färgkontraster. Kontrast på text och kontraster på icke-textobjekt.

När det gäller text så ska vanlig brödtext ha minst 4.5:1 i kontrastvärde mot bakgrunden (detta inkluderar länkade texter). Om det är stor text så ska minst 3.0:1 i kontrastvärde uppnås.

Vad är stor text då?

  • Text som är 18 point eller 14 point med fetstil/bold

(24px eller 18,5px med fetstil/bold)

Kontrast på komponenter

Även komponenter som knappar, fokusramar, inputfält med mera ska uppnå minst 3.0:1 i kontrastvärde mot bakgrunden.

Undantag:

  • Grafik som enbart är dekoration, det vill säga grafik som inte förmedlar någon form av information till användaren.

  • Om informationen kan nås i någon annan form, exempelvis i text eller tabell i anslutning till grafiken.

  • Logotyper och varumärken behöver inte uppnå kontrastkriteriet även om de innehåller text.

  • Färger på foton och flaggor behöver inte uppnå kontrastkriteriet om det skulle riskera att grafiken förlorar sin innebörd.

  • Framställningar med syfte att visa hur någonting faktiskt ser ut, som blir missvisande om färgerna förändras. Till exempel skärmdumpar och medicinska diagram som använder färgskalor som finns i naturen.

 

Verktyg för att verifiera kontraster

För att kolla färgkontraster på text och komponenter så kan man använda olika verktyg, här finns några exempel: