3 gratis verktyg för att mäta kontrastvärden

Smarta verktyg, Redaktörstips, Tillgänglighet och lagkrav

Att använda tillräcklig kontrast mellan text och bakgrund var av de första sakerna jag själv lärde mig om tillgänglighet. Principen är enkel - om inte kontrasten är tillräcklig går det inte att läsa. Tack och lov finns det riktlinjer och verktyg som hjälper oss att hålla koll!

Jag har bråttom

Kontrast för wcag 2.1 AA och AAA

Eftersom det varierar hur mycket kontast olika personer kräver för att kunna läsa finns riktmärken att anpassa sig till med hjälp av wcag's olika klassificeringar. Två fritt översatta kriterier från definitionen av kontrastvärden Länk till annan webbplats. för wcag 2.1 från W3C Recommendations webbplats.

  • 1.4.3 Contrast (Minimum) Level AA. Den visuella presentationen av text och bilder av text har ett kontrastförhållande på minst 4,5:1. Förutom följande:
    • Stor text Storskalig text och bilder av storskalig text har ett kontrastförhållande på minst 3: 1;
    • Specialfall Följande typer av text (eller bilder av text) har inga kontrastkrav alls.
      • Texten ingår i en inaktiv komponent i användargränssnittet
      • Texten är ren dekoration
      • Texten är inte synlig för någon
      • Texten ingår i en bild som innehåller annat visuellt innehåll av betydelse
    • Logotyper Text som ingår i en logotyp eller ett varumärke har inget krav på kontrast.
  • Success Criterion 1.4.6 Contrast Level AAA. Den visuella presentationen av text och bilder av text har ett kontrastförhållande på minst 7:1. Förutom följande:
    • Stor text Storskalig text och bilder av storskalig text har ett kontrastförhållande på minst 4,5: 1
    • Specialfall Samma som för AA
    • Logotyper Samma som för AA

Vad ska jag göra då?

Förhoppningsvis behöver du som redaktör i Sitevision inte göra något alls åt detta. Dina mallar och ditt envisiontema bör redan följa dessa regler. Men på något sätt råkar undantag ofta komma vår väg och då kan det vara bra att veta hur man ska gå tillväga för att känna sig trygg med att man möter kraven.

Oavsett vilket du använder så får du reda på om din valda förgrundsfärg (textfärg) har tillräcklig kontrast mot din bakgrundsfärg.

1. Contrast Checker: Enkelt och översiktlig kontroll

Skärmavbildning av Contrast Checker

Med Contrast Checker anger du för- och bakgrundsfärg och får sedan ett översiktligt resultat för liten och stor text. Enkelt och snabbt.

2. Accessible Colors: Enkelt verktyg som ger förslag på alternativ färg om din kontrast är för låg

Skärmavbildning av Accessible Colors

Med Accessible Colors anger du för- och bakgrundsfärg, aktuella textinställningar och vilken nivå av kontrast kontrollen ska ta hänsyn till. Om din valda kombination av fäger inte är godkänd ger Accessible Colors förslag på hur du kan ändra de olika färgerna för att klara kraven.

3. Contrast ratio: Verktyg som tar opacitet (genomskilnlighet) i beräkningen

Skärmavbildning av Contrast Ratio

Contrast ratio är ett smart verktyg som tar hänsyn till att en färg kan ha en viss genomskilnlighet. Med hjälp av rgba (se inforuta nedan) anger du både färgen och dess genomskilnlighet med en enda definition. Och det är på detta sätt som Contrast ratio gör sin kontroll.

Eftersom en semitransparent färg kommer att ge olika kontrastvärden beroende på vad som ligger bakom så får du inte ett "godkänd" eller "icke-godkänd" på den här webbplatsen. Den lilla bollen i olika färger som ligger mellan textfälten för färger, se nedan, ger dig de möjliga utkomsterna av kontrollen. När du håller muspekaren över bollen får du se en lista på de olika utfallen.

Personligen använder jag denna kontroll när jag lägger ett filter över en bakgrundsbild i en mall. Eftersom jag som mallbyggare aldrig vet vilken bild ni redaktörer kommer använda anpassar jag alltid mina filter efter de hårdaste kraven. När jag sätter genomskilnligheten ser jag alltså till att min lilla boll är helt grön vilket betyder att vad som helst kan ligga bakom min semitransparenta platta - texten som ligger på den kommer ändå att ha tillräcklig kontrast för att möta kontrastkraven.

Exempel på resultat i contrast-ratio

Skärmavbildning av Contrast Ratio med tydligare förklaring till kontrastvärdet

På bilden ser du hur det ser det ut när du håller muspekaren över den lilla bollen. Den färg jag använt i den här kontrollen är rgba(0,0,0,0.1) vilket betyder svart som är 90% genomskinlig.

Så här kan ett resultat av en kontroll formuleras med Contrast Ratio (samma som bilden ovan):

The background is semi-transparent, so the contrast ratio cannot be precise. Depending on what’s going to be underneath, it could be any of the following:

  • Fails WCAG 2.0 and 2.1 :-(
  • Passes AA for large text (above 18pt or bold above 14pt) and AA for user interface components and graphical objects
  • Passes AA level for any size text, AAA for large text (above 18pt or bold above 14pt), and AA for user interface components and graphical objects
  • Passes AAA level for any size text and AA for user interface components and graphical objects

Sammanfattning

Detta är tre varianter som i grunden löser samma problem men på lite olika sätt, vilket är beskrivet ovan. Självklart finns det andra verktyg att använda samt hjälp redan i webbläsarens egna granska-funktion men detta är mina förslag. En annan fool-proof lösning är att nyttja vårt erbjudande Limepark Webboptimering som bland annat kontrollerar kontrastvärden på din webbplats med kontinuerliga automatiska kontroller. Min förhoppning är dock att du som vill göra detta själv ska, efter att ha läst denna artikel, känna dig trygg i färgdjungeln med hjälp av någon av dessa tre olika verktyg.

  1. Contrast Checker Länk till annan webbplats.
  2. Accessible Colors Länk till annan webbplats.
  3. Contrast Ratio Länk till annan webbplats.

RGBA

Red Green Blue Alpha channel (RGBA): De första tre värdena är helt enkelt röd, grön och blå som anges på en skala mellan 0-255. Det beskriver hur mycket varje färgkanal på din skärm ska lysa per pixel. Det fjärde nummret är dock en siffra mellan 0.0 - 1.0. Den beskriver den alfakanalen (den relativa transparensen) och betyder vid 0 att inget av färgen lyser igen (den är helt genomskilnlig) och vid 1.0 att inget av det som ligger bakom syns (den är helt opak).

Exempel:
Färgen röd med 50% genomskinlighet anges rgab(255, 0 0, 0.5)

Artikeln är skriven av: Ida Dahlén Webbutvecklare ida@limepark.se