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.
WCAG 2.2 minsta kontrastkrav (officiell W3C): 4,5:1, 3:1 och icke-text 3:1
De officiella minimikraven för kontrast i WCAG 2.2 som används i tillgänglighetsgranskningar är tydliga: normalstor text måste ha minst 4,5:1, storskalig text minst 3:1 och icke-textuella gränssnittskomponenter samt grafiska objekt minst 3:1 mot intilliggande färger. Dessa trösklar definieras av WCAG 2.2 och valideras vanligtvis av tillgänglighetstestverktyg.
| Elementtyp | WCAG-minimum | Framgangskriterier |
|---|---|---|
| Normalstor text | 4.5:1 | 1.4.3 (AA) |
| Storskalig text | 3:1 | 1.4.3 (AA) |
| Icke-textuella gränssnittskomponenter och grafiska objekt | 3:1 | 1.4.11 (AA) |
WCAG 2.2 vs WCAG 2.1: kontrastregler
WCAG 2.2 behåller samma grundläggande kontrastförhållanden som WCAG 2.1, så dina godkänd/underkänd-nivåer ändras inte. Det som förändras för högpresterande team är genomförandet: produkt-, design- och QA-team som formaliserar WCAG 2.2 i arbetsflödet går snabbare från skanningsresultat till godkända åtgärder, minskar release-risk och skyddar konverteringskritiska gränssnitt.
WCAG-kontrastkrav efter elementtyp
WCAG-kontrastkrav varierar beroende på elementtyp. Brödtext, bildtexter och hjälpttext bedöms som textkontrast. Knappar, formulärgränser, fokusindikatorer, ikoner och statusgrafik bedöms som icke-textkontrast. För praktisk efterlevnad bör du testa båda kategorierna i design-QA, verifiera igen före release och testa om efter varje ändring av palett eller komponent.
WCAG-kontrastkontroll för färger
Oavsett om teamet använder color eller colour är WCAG-reglerna desamma. Denna WCAG-kontrastkontroll för färger utvärderar förgrund och bakgrund mot officiella W3C-trösklar och ger ett tydligt godkänd/underkänd-resultat som designers och utvecklare kan agera på direkt.
ADA-krav för färgkontrast och koppling till WCAG
I amerikanska tillgänglighetsprogram mäts ADA-åtgärder i praktiken ofta mot WCAG:s framgångskriterier. Om din organisation behöver ett ADA-flöde för kontrastkontroller, använd WCAG-trösklar som mätbar baslinje och dokumentera underlag i designgranskning, QA-signoff och release-dokumentation.
WCAG-kontroll vs kontrastkontroll
En kontrastkontroll verifierar ett kritiskt område: läsbara färgförhållanden för text och gränssnittselement. En full WCAG-kontroll täcker ett bredare efterlevnadsområde, inklusive tangentbordsstöd, formulärsemantik, etiketter, rubriker och ARIA-beteende. Starka tillgänglighetsteam använder båda: snabba kontrastkontroller i vardaglig design och utveckling samt fullständig WCAG-testning före release.
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.