WCAG-kontrastkontroll
Kontrollera färgkontrastförhållanden för att uppfylla tillgänglighetskraven i WCAG AA och AAA
Indata och alternativ
Snabbval och exempel
Körs i din webbläsare. Dina indata stannar på den här enheten.
Resultat
Ange dina värden för att se resultatet.
Om WCAG-kontrastkontrollen
Vår kostnadsfria WCAG-kontrastkontroll online hjälper designers, utvecklare och tillgänglighetsexperter att kontrollera att kombinationer av text- och bakgrundsfärg uppfyller kontrastkraven i Web Content Accessibility Guidelines (WCAG) 2.1. Tillgänglig färgkontrast gör att alla användare, även de med nedsatt syn eller färgsynsavvikelser, kan läsa och använda ditt webbinnehåll.
Verktyget beräknar kontrastförhållandet mellan två valfria färger med W3C:s officiella formel för relativ luminans och visar direkt om kombinationen klarar eller inte klarar nivåerna WCAG AA och WCAG AAA för både normal och stor text. Alla beräkningar sker i realtid direkt i din webbläsare, och inga data skickas till någon server.
Oavsett om du genomför en tillgänglighetsgranskning, utformar ett nytt gränssnitt eller går igenom befintligt innehåll för att kontrollera efterlevnad ger den här kontrastkontrollen dig exakta resultat enligt standarden, tillsammans med liveförhandsvisningar av text och konkreta förslag för att rätta färgkombinationer som inte klarar kraven.
Så fungerar WCAG:s kontrastkrav
Riktlinjerna Web Content Accessibility Guidelines (WCAG) är den internationellt erkända standarden för webbtillgänglighet och publiceras av World Wide Web Consortium (W3C). WCAG anger särskilda gränsvärden för kontrastförhållande för att säkerställa att text är läsbar för användare med olika synförmåga.
- WCAG nivå AA (normal text): Ett kontrastförhållande på minst 4,5:1 krävs. Det gäller brödtext, stycken och all text som är mindre än 18 pt (24 px) eller 14 pt fet (18,66 px fet).
- WCAG nivå AA (stor text): Ett kontrastförhållande på minst 3:1 krävs. Stor text definieras som text på minst 18 pt (24 px) eller 14 pt fet (18,66 px fet).
- WCAG nivå AAA (normal text): Ett kontrastförhållande på minst 7:1 krävs. Det är den högsta nivån av tillgänglighetsefterlevnad för text i normal storlek.
- WCAG nivå AAA (stor text): Ett kontrastförhållande på minst 4,5:1 krävs för stor text på nivå AAA.
Att uppfylla minst WCAG AA anses vara basnivån för tillgänglig webbdesign och krävs i många rättsliga ramverk runt om i världen, bland andra Americans with Disabilities Act (ADA), European Accessibility Act och Section 508 i Rehabilitation Act. WCAG AAA ger en förhöjd tillgänglighetsnivå som rekommenderas där det är möjligt.
Så beräknas kontrastförhållandet
Kontrastförhållandet mellan två färger bestäms utifrån varje färgs relativa luminans, enligt definitionen i WCAG 2.1-specifikationen. Relativ luminans mäter en färgs upplevda ljusstyrka på en skala från 0 (mörkaste svart) till 1 (ljusaste vit).
Beräkningen sker i tre steg. Först omvandlas varje färgkanal (röd, grön, blå) från sitt 8-bitars sRGB-värde (0-255) till ett normaliserat sRGB-värde (0-1) genom division med 255. Sedan genomgår varje normaliserat värde en gammakorrigering: om värdet är 0,04045 eller lägre divideras det med 12,92, annars omvandlas det med formeln ((value + 0.055) / 1.055) ^ 2.4. Slutligen kombineras de linjäriserade kanalvärdena med viktade koefficienter: L = 0.2126 * R + 0.7152 * G + 0.0722 * B.
Det slutliga kontrastförhållandet beräknas som (L1 + 0.05) / (L2 + 0.05), där L1 är den relativa luminansen hos den ljusare färgen och L2 är den relativa luminansen hos den mörkare färgen. Resultatet är ett värde från 1:1 (ingen kontrast, identiska färger) till 21:1 (maximal kontrast, ren svart på ren vit).
Viktiga funktioner
- Beräkning av kontrastförhållande i realtid med W3C:s officiella luminansformel för WCAG 2.1
- Indikatorer för godkänt/underkänt för WCAG AA och AAA, för både normal och stor text
- Interaktiv färgväljare och hex-inmatning för både förgrunds- och bakgrundsfärg
- Byt färger med ett klick för att testa omvända färgkombinationer
- Tio snabba färgförval med vanliga tillgängliga färgpar
- Liveförhandsvisning av text som visar hur dina färger ser ut i normal och stor textstorlek
- Automatiskt förslag på närmaste förgrundsfärg som klarar kraven när den nuvarande kombinationen inte gör det
- Tekniska luminansdetaljer för både förgrunds- och bakgrundsfärg
- Fullt stöd för mörkt läge för bekväm användning i alla miljöer
- All bearbetning sker lokalt i webbläsaren, utan att några data skickas till externa servrar
Så använder du WCAG-kontrastkontrollen
- Ange förgrundsfärgen: Klicka på färgväljarens ruta eller skriv ett hex-värde (t.ex. #1A1A2E) i textfältet för att ange din text- eller förgrundsfärg.
- Ange bakgrundsfärgen: Använd på samma sätt färgväljaren eller hex-inmatningen för att ange bakgrundsfärgen bakom texten.
- Granska resultaten: Kontrastförhållandet och resultaten för godkänt/underkänt på alla fyra WCAG-nivåerna visas direkt när du ändrar färger.
- Kontrollera liveförhandsvisningen: Scrolla ned för att se faktisk text med din valda färgkombination i både normal och stor storlek.
- Använd förslag: Om kombinationen inte klarar WCAG AA visas en föreslagen förgrundsfärg. Klicka på Använd för att använda den.
- Prova förvalen: Använd snabbförvalen för att testa välkända tillgängliga eller otillgängliga färgkombinationer.
- Byt färger: Klicka på knappen Byt färger för att vända på dina val av förgrunds- och bakgrundsfärg.
Därför är färgkontrast viktig för tillgängligheten
Ungefär 1 av 12 män och 1 av 200 kvinnor i världen har någon form av färgsynsavvikelse. Dessutom har miljontals människor nedsatt syn, åldersrelaterade synförändringar eller tillfälliga svårigheter, till exempel på grund av reflexer i skärmen. Tillräcklig färgkontrast är ett av de mest effektiva och enklaste sätten att göra webbinnehåll tillgängligt för alla dessa användare.
Dålig kontrast mellan text och bakgrund är ett av de vanligaste tillgänglighetsproblemen vid webbgranskningar. Genom att använda en WCAG-kontrastkontroll under design och utveckling kan team hitta och åtgärda kontrastproblem innan de når produktion, vilket minskar kostnaderna för åtgärder och säkerställer att tillgänglighetskraven uppfylls från början.
Bra färgkontrast gynnar också användare utan funktionsnedsättning. Den förbättrar läsbarheten i starkt solljus, på skärmar av låg kvalitet och i miljöer med många distraktioner. Tillgänglig design är inkluderande design som ger en bättre upplevelse för alla.
Vanliga frågor
Vad är skillnaden mellan WCAG AA och AAA?
WCAG AA är den standardnivå som rekommenderas för de flesta webbplatser och applikationer. Den kräver ett kontrastförhållande på minst 4,5:1 för normal text och 3:1 för stor text. WCAG AAA är en strängare nivå som kräver 7:1 för normal text och 4,5:1 för stor text. AAA är inte alltid möjligt att uppnå för allt innehåll, men rekommenderas för kritiska textelement och där maximal läsbarhet behövs.
Vad räknas som stor text i WCAG?
Enligt WCAG 2.1 definieras stor text som text på minst 18 punkter (ungefär 24 CSS-pixlar) eller 14 punkter (ungefär 18,66 CSS-pixlar) om texten är fet. Stor text har lägre kontrastkrav eftersom storleken i sig gör den lättare att läsa.
Stöder verktyget transparens eller alfakanaler?
Verktyget fungerar med ogenomskinliga hex-färger (6-siffriga hex-koder). För färger med transparens beror den faktiska kontrasten på bakgrunden bakom det transparenta lagret, som kan variera över sidan. För att kontrollera halvtransparent text bör du först beräkna den effektiva heltäckande färgen som uppstår när den transparenta ytan läggs över den faktiska bakgrunden och sedan testa den färgen här.
Är WCAG-efterlevnad lagstadgad?
I många jurisdiktioner, ja. ADA i USA, European Accessibility Act i EU, Accessibility for Ontarians with Disabilities Act (AODA) i Kanada och liknande lagstiftning i andra länder hänvisar till eller införlivar WCAG 2.1 nivå AA som standard för digital tillgänglighet. Organisationer som inte uppfyller kraven kan drabbas av rättsliga åtgärder, böter och skadat anseende.