Kontrollera färgkontrast och läsbarhet enligt WCAG-standarder

Verktyget visar kontrastförhållandet på en skala från 1:1 (ingen kontrast) till 21:1 (maximal kontrast – svart text på vit bakgrund). Resultatet jämförs med trösklar definierade i WCAG-standarden:

• Vanlig text – kräver kontrast minst 4.5:1 för nivå AA (minimistandard) eller 7:1 för nivå AAA (utökad standard). Gäller text under 18pt (24px) eller under 14pt (18.5px) bold.
• Stor text / bold – kräver kontrast minst 3:1 för nivå AA eller 4.5:1 för nivå AAA. Gäller text från 18pt (24px) eller från 14pt (18.5px) bold – rubriker, knappar, markeringar.
• Ikoner och grafiska element – kräver kontrast minst 3:1 för nivå AA. Gäller ikoner, knappar, formulärfält och andra UI-element som förmedlar information.

Nivå AA är minimum som krävs av tillgänglighetslagstiftning i många länder, inklusive EU:s webbtillgänglighetsdirektiv. Nivå AAA ger bättre läsbarhet, men är inte alltid praktiskt uppnåeligt för alla element.

Om kontrasten är för låg behöver du inte leta efter rätt färg med trial-and-error. Funktionen Match hittar automatiskt en variant av textfärgen som uppfyller den valda kontrasttröskeln.

Så fungerar anpassningen:

1. Välj anpassningsmål från listan – t.ex. AA för vanlig text eller AAA för stor text.
2. Starta funktionen med Match-knappen.
3. Verktyget söker igenom ljusstyrke-varianter av textfärgen och föreslår den närmaste som uppfyller kraven.
4. Den föreslagna färgkoden kan kopieras till urklipp eller direkt ställas in som ny textfärg.

Algoritmen bevarar nyansen och mättnaden hos den ursprungliga färgen och ändrar enbart ljusstyrkan. Den föreslagna färgen förblir därmed konsekvent med den visuella identiteten och uppfyller samtidigt tillgänglighetsstandarden.

Jag ser ett felmeddelande om färgformat

Kontrollera färgformatet. HEX-kod ska börja med # och innehålla 3 eller 6 tecken (t.ex. #fff eller #ffffff). För RGB-format kontrollera att värdena är separerade med kommatecken och ligger i intervallet 0-255.

Match-funktionen hittar inte en lämplig färg

När bakgrund och text har liknande ljusstyrka i samma nyans kanske algoritmen inte hittar en variant som uppfyller kraven utan att ändra nyansen. I så fall bör du överväga att ändra bakgrundsfärgen eller välja en helt annan textfärg.

Färgen i väljaren matchar inte den angivna koden

Webbläsarens färgväljare stöder enbart HEX-format utan genomskinlighet. Om du anger en färg i RGBA- eller HSLA-format med genomskinlighet visar väljaren enbart färgdelen (utan alpha). Kontrastberäkningarna tar fortfarande hänsyn till genomskinligheten.

Färgblindhet är en störning av färgseendet som drabbar ca 8% av män och 0,5% av kvinnor. Färgblinda personer kan ha svårt att skilja vissa färgpar, även när ljusstyrkekontrasten är tillräcklig.

De vanligaste typerna av färgblindhet:

• Deuteranopi – svårigheter att skilja grönt och rött (den vanligaste formen)
• Protanopi – svårigheter att se rött
• Tritanopi – svårigheter att se blått och gult (sällsynt)

Detta verktyg kontrollerar ljusstyrkekontrast, som är viktig för alla användare. Vid design bör du dock dessutom undvika problematiska färgkombinationer (t.ex. röd text på grön bakgrund) och inte enbart förlita dig på färg för att förmedla information – använd även former, ikoner och text.

Sverige har implementerat EU:s webbtillgänglighetsdirektiv genom DOS-lagen (2018:1937) - Lagen om tillgänglighet till digital offentlig service.

• Offentlig sektor - alla statliga, regionala och kommunala webbplatser och appar ska uppfylla WCAG 2.1 nivå AA. Myndigheten för digital förvaltning (DIGG) övervakar efterlevnaden.
• EU:s tillgänglighetsdirektiv (EAA) - från juni 2025 utvidgas kraven till den privata sektorn: e-handel, banker, transporttjänster och medieplattformar.
• Svensk tillgänglighetskultur - Sverige har en stark tradition av inkluderande design. Många svenska företag uppfyller redan WCAG AA frivilligt, och konsumenter förväntar sig tillgängliga digitala tjänster.

Kontrastförhållandet 4,5:1 för normal text och 3:1 för stor text är ett lagkrav. Detta verktyg kontrollerar exakt dessa tröskelvärden.