Kontrastkontroll

Verktyg

Ange en text- och bakgrundsfärg och se direkt om kombinationen klarar WCAG AA och AAA – för både normal och stor text. Byt plats på färgerna eller låt verktyget föreslå en tillgänglig färg.

Kontrastförhållande

21:1

Utmärkt kontrast

AA normal

≥ 4,5:1

–

AA stor text

≥ 3:1

–

AAA normal

≥ 7:1

–

AAA stor text

≥ 4,5:1

–

Text #1F2937

Bakgrund #FFFFFF

Förhandsvisning

Kontrasten avgör läsbarheten

Det här är brödtext i normal storlek. Här ser du hur din textfärg fungerar mot bakgrunden i ett verkligt sammanhang.

Läs mer om kontrast Knapp / etikett

Kopierat!

Vad är kontrastkontroll?

En kontrastkontroll mäter hur mycket din textfärg skiljer sig från bakgrundsfärgen i ljushet. Resultatet uttrycks som ett förhållande mellan 1:1 (ingen skillnad alls) och 21:1 (svart mot vitt). Ju högre siffra, desto lättare är texten att läsa. Verktyget ovan räknar ut värdet enligt WCAG – den internationella standarden för tillgängligt webbinnehåll.

WCAG-nivåerna: AA och AAA

WCAG delar in kraven i två nivåer och skiljer på normal och stor text. Gränserna du behöver hålla dig till är:

AA, normal text – minst 4,5:1. Standardkravet för brödtext.
AA, stor text – minst 3:1. Gäller text från cirka 24 px, eller 18,66 px om den är fet.
AAA, normal text – minst 7:1. Den strängaste nivån för högsta läsbarhet.
AAA, stor text – minst 4,5:1.

För de flesta webbplatser är AA ett rimligt mål, medan AAA passar när innehållet ska vara läsbart för så många som möjligt.

Varför kontrast spelar roll för tillgänglighet

Låg kontrast gör text svår att läsa – särskilt i starkt solljus, på billiga skärmar eller för personer med nedsatt syn eller färgseende. Genom att säkra tillräcklig kontrast förbättrar du tillgängligheten och läsbarheten för alla besökare, samtidigt som du möter de krav som ofta ställs på offentliga webbplatser.

Behöver du hitta rätt färger från början? Prova färgväljaren för att ta fram exakta färgkoder, eller bygg en harmonisk uppsättning med färgpaletten.

Vanliga frågor

Vad är färgkontrast enligt WCAG?

Kontrast enligt WCAG (Web Content Accessibility Guidelines) mäter skillnaden i ljushet mellan text och bakgrund som ett förhållande mellan 1:1 och 21:1. Ju högre värde, desto lättare är texten att läsa. WCAG anger minimigränser så att så många som möjligt kan uppfatta innehållet, inklusive personer med nedsatt syn.

Vilket kontrastvärde behöver jag?

För normal brödtext kräver nivå AA minst 4,5:1 och den strängare nivån AAA minst 7:1. För stor text – ungefär 24 px, eller 18,66 px om den är fet – räcker 3:1 för AA och 4,5:1 för AAA. Sikta på minst AA för webbplatser; AAA är målet när läsbarheten är extra viktig.

Vad räknas som stor text?

WCAG definierar stor text som minst 18 punkter (cirka 24 px) vid normal vikt, eller minst 14 punkter (cirka 18,66 px) om texten är fet. Stor text får lägre kontrastkrav eftersom tjockare och större bokstäver är enklare att läsa även vid svagare kontrast.

Varför är kontrast viktigt för tillgänglighet?

God kontrast gör att fler kan läsa din text – i starkt solljus, på en billig skärm eller med nedsatt syn eller färgseende. Tillräcklig kontrast är ett lagkrav i många offentliga sammanhang och förbättrar dessutom läsbarheten för alla användare.