Färgkontrastkontroll
Se till att din text och UI uppfyller WCAG 2.1-kontrastkrav, en viktig del av EAA/EN 301 549-efterlevnad. Klistra in varumärkesfärger, förhandsgranska kombinationer och få tydligt godkännande eller varning för normal text, stor text och UI-komponenter.
Color Contrast Checker
The quick brown fox jumps over the lazy dog
Contrast Ratio
8.67:1
Betrodd av organisationer över hela Europa som arbetar mot tillgänglighetskrav enligt WCAG och EAA
Vad är en kontrastkontroll och varför använda den?
Tillräcklig kontrast ökar läsbarheten för alla, särskilt för användare med nedsatt syn, färgseendeproblem eller på skärmar med låg kvalitet.
Kontrollera 1.4.3 Kontrast (Minimumnivå), 1.4.6 Kontrast (Utökad) och 1.4.11 Kontrast för icke-text för UI-komponenter och grafik.
Europeiska tillgänglighetsdirektivet hänvisar till EN 301 549 som i sin tur refererar WCAG, kontrast är en nyckeldel för att uppfylla skyldigheter.
Tillgängliga färgpaletter skapar robusta, läsbara gränssnitt som fungerar i ljusa och mörka teman och på olika enheter.
WCAG 2.1 kontrasttrösklar (snabb referens)
Minsta förhållande: 4,5:1 (text under 24 px vanlig / 19 px fet).
Minsta förhållande: 3:1 (≥ 24 px vanlig eller ≥ 19 px fet).
Minsta kontrast mot intilliggande färger: 3:1 (fokusramar, formulärfält, ikoner etc.).
Förstå WCAG-färgkontrast för webbtillgänglighet
En färgkontrastkontroller är ett väsentligt verktyg för webbdesigners och utvecklare för att säkerställa att deras digitala innehåll uppfyller tillgänglighetsstandarder. WCAG-färgkontrastriktlinjer hjälper till att skapa gränssnitt som är läsbara och användbara för alla, inklusive personer med synnedsättning.
Vad är WCAG-färgkontrast?
WCAG (Web Content Accessibility Guidelines) definierar specifika kontrastförhållanden mellan text- och bakgrundsfärger för att säkerställa läsbarhet. Kontrastkontrollern beräknar dessa förhållanden med hjälp av relativa luminansvärden och ger ett matematiskt mått på hur urskiljbara färger är från varandra. Att uppfylla dessa standarder är avgörande för WCAG 2.1-efterlevnad och refereras av föreskrifter som den europeiska tillgänglighetslagen (EAA) genom EN 301 549.
Hur fungerar en kontrastkontroller?
Vår WCAG-färgkontrastkontroller analyserar luminansskillnaden mellan förgrunds- (text-) och bakgrundsfärger. Den beräknar automatiskt kontrastförhållandet och jämför det med WCAG-framgångskriterierna 4,5:1 för normal text (Nivå AA), 3:1 för stor text och 7:1 för förbättrad kontrast (Nivå AAA). Denna omedelbara feedback hjälper dig att fatta välgrundade designbeslut utan manuella beräkningar.
Bästa praxis för färgkontrast
Börja med att testa dina varumärkesfärger tidigt i designprocessen med hjälp av en kontrastkontroller. Se till att alla textelement, knappar, formulärfält och ikoner uppfyller minimikraven. Förlita dig inte enbart på färg för att förmedla information – använd också textetiketter, ikoner eller mönster. Regelbunden testning med en WCAG-kontrastkontroller hjälper till att upprätthålla tillgänglighetsstandarder under hela projektets livscykel.
Testa färgkontrastkontrollen
Ange förgrunds- och bakgrundsfärger (HEX). Verktyget räknar ut kontrastkvoten och visar godkänd/ej godkänd för WCAG-nivåer. Resultat uppdateras medan du skriver.
Vanliga frågor
Ändras kontrastkraven i WCAG 2.1?
Kräver EAA WCAG-kontrast?
Vad räknas som ”stor text”?
Gör kontrastkontroller till en del av din arbetsprocess
Kör kontrastkontroller under designgranskningar och kodgranskningar. Kombinera med automatisk skanning för att fånga problem i stor skala.