Utilia
Kategorier ▾
Språk: sv ▾

Kontrastkontroll

Gratis kontrastkontroll enligt WCAG. Ange text- och bakgrundsfärg och få kontrastförhållandet, resultat för AA/AAA och närmaste godkända färg.

Textfärg
Bakgrundsfärg
Kontrastförhållande
–

Resultat enligt WCAG 2.2

AAAAA
Normal text
Stor text
Gränssnittskomponenter och grafik–

Förhandsvisning

Normal text (16 px). Flygande bäckasiner söka hwila på mjuka tuvor.

Stor text (24 px)

Stor fet text (18,66 px fet)

Knapp

Förslag

Närmaste godkända textfärg
–
Närmaste godkända bakgrundsfärg
–

Så använder du kontrastkontrollen

  1. Ange Textfärg och Bakgrundsfärg. Använd färgrutorna eller skriv valfritt CSS-värde i fälten: en HEX-kod som #595959, rgb(89 89 89), hsl(0 0% 35%) eller ett namn som navy.
  2. Kontrastförhållande uppdateras medan du skriver, från 1:1 (ingen kontrast) till 21:1 (svart på vitt).
  3. Tabellen Resultat enligt WCAG 2.2 visar Godkänd eller Underkänd för Normal text, Stor text och Gränssnittskomponenter och grafik, på nivåerna AA och AAA.
  4. Titta på Förhandsvisning: den visar normal text, stor text, stor fet text, en knappkontur och en ikon i dina två färger.
  5. Om en nivå inte klaras väljer du ett Mål under Förslag. Verktyget föreslår Närmaste godkända textfärg och Närmaste godkända bakgrundsfärg. Klicka på Använd för att tillämpa ett förslag. Byt färger byter plats på text och bakgrund.

Allt beräknas i din webbläsare; inget skickas någonstans.

Så beräknas kontrastförhållandet

WCAG 2.x definierar förhållandet som (L1 + 0,05) / (L2 + 0,05), där L1 är den relativa luminansen för den ljusare färgen och L2 för den mörkare. Den relativa luminansen räknas fram ur linjäriserade sRGB-kanaler: varje kanal avkodas med sRGB-överföringskurvan, och sedan är L = 0,2126 R + 0,7152 G + 0,0722 B. Grönt väger tyngst eftersom ögat är mest känsligt för det, och därför ser rent grönt mycket ljusare ut än rent blått med samma ”styrka”.

Förhållandet avrundas aldrig uppåt. #777777 på vitt ger ungefär 4,48:1 och underkänns för normal text på nivå AA, även om det ser ut som ”4,5”. Verktyget trunkerar det visade värdet till två decimaler, så att det du ser är det som WCAG kontrollerar.

Om textfärgen är halvgenomskinlig (till exempel rgb(0 0 0 / 60%)) blandas den först med bakgrunden, precis som webbläsaren skulle rita den. Transparens i bakgrundsfärgen ignoreras, eftersom det som ligger bakom sidan är okänt.

WCAG-nivåerna i korthet

Innehåll AA AAA
Normal text 4,5:1 7:1
Stor text (24 px, eller 18,66 px fet) 3:1 4,5:1
Gränssnittskomponenter och meningsbärande grafik 3:1 –

”Stor text” betyder minst 18 punkter (24 CSS-pixlar), eller 14 punkter fet stil (cirka 18,66 px). Logotyper och rent dekorativ text har inga krav. Regeln om 3:1 för gränssnittskomponenter (framgångskriterium 1.4.11) gäller kanter på inmatningsfält och knappar, fokusmarkeringar, ikoner och linjer i diagram som användarna behöver se.

Så fungerar förslagen

De föreslagna färgerna behåller nyans och kroma från din färg i OKLCH-rymden och ändrar bara ljusheten, mörkare eller ljusare, tills målförhållandet nås. Verktyget väljer sedan den riktning som visuellt ligger närmast din ursprungliga färg, mätt i OKLab. Resultatet kontrolleras igen efter avrundning till en HEX-kod, så att det verkligen klarar kravet. Om ingen ljushet kan nå målet (till exempel 7:1 mot en mellangrå färg) säger verktyget det.

Om APCA

APCA (Accessible Perceptual Contrast Algorithm) är en nyare kontrastmodell som övervägs för ett framtida WCAG 3. Den tar hänsyn till teckensnittets vikt, storlek och polaritet (mörkt på ljust jämfört med ljust på mörkt). Den är fortfarande ett utkast och inget juridiskt eller normativt krav, så det här verktyget redovisar resultat enligt WCAG 2.x, som fortfarande är referensen för den europeiska tillgänglighetsstandarden EN 301 549, Section 508 och de flesta lagar – även den svenska lagen om tillgänglighet till digital offentlig service.

Vanliga frågor

Vilket kontrastförhållande behöver brödtext?

Minst 4,5:1 för nivå AA, som är den nivå de flesta lagar och riktlinjer kräver. Sikta på 7:1 (AAA) för längre läsning eller för personer med nedsatt syn.

Klarar vit text på min profilfärg kraven?

Ange vitt som textfärg och din profilfärg som bakgrund. Många blå, orange och gröna mellantoner når bara 3:1: det räcker för stora rubriker och knappar med stora etiketter, men inte för liten text. Använd den föreslagna bakgrundsfärgen om du behöver AA för normal text.

Varför ändras inte förhållandet när jag byter ordning på färgerna?

Formeln delar alltid den ljusare luminansen med den mörkare, så mörkt på ljust och ljust på mörkt ger samma förhållande. Den upplevda kontrasten kan ändå skilja sig något, vilket är ett av problemen som APCA försöker lösa.

Räcker 4,49:1 för att bli godkänd?

Nej. Gränsvärdena i WCAG är strikta minimikrav: 4,49:1 underkänns för normal text på nivå AA. Använd förslaget för att få en färg som verkligen klarar kravet.

Fungerar kontrastkontrollen för platshållartext och inaktiverad text?

Platshållartext måste uppfylla samma minimum på 4,5:1 när den förmedlar information. Inaktiverade kontroller är undantagna från kontrastkraven, men läsbara inaktiverade lägen hjälper ändå användarna.

Relaterade verktyg