Så här använder du det
- Ange textfärgen (förgrund) och bakgrundsfärgen som HEX, rgb(), hsl() eller något annat CSS-format, eller använd färgväljarna.
- Läs av kontrastförhållandet och resultatet (godkänd/underkänd) för varje WCAG-krav.
- Om ett krav inte uppfylls, välj ett mål och använd den föreslagna färgen, som behåller kulören och bara ändrar ljusheten.
- Använd ”Byt” för att kontrollera den omvända kombinationen, till exempel ljus text på en mörk knapp.
Så fungerar det
Kontrastförhållandet följer WCAG 2.2-definitionen: varje färgs relativa luminans beräknas från dess sRGB-kanaler, och förhållandet är (ljusare + 0,05) ÷ (mörkare + 0,05). Det sträcker sig från 1:1 (identiska färger) till 21:1 (svart på vitt).
Kontrollerade krav: kriterium 1.4.3 (AA) kräver 4,5:1 för normal text och 3:1 för stor text; 1.4.6 (AAA) kräver 7:1 och 4,5:1; 1.4.11 kräver 3:1 för gränssnittskomponenter och meningsfull grafik som ramar kring inmatningsfält och ikoner. Stor text är minst 24 px normal eller cirka 18,66 px fet stil. WCAG tillåter inte avrundning uppåt, så 4,49:1 klarar inte AA trots att det är nära; förhållandet som visas här är trunkerat, inte avrundat.
Förslaget behåller textfärgens kulörton och kroma i OKLCH och söker den närmaste ljusheten, mörkare eller ljusare, som uppfyller målet. Kontrastförhållandet är en del av läsbarheten: teckensnittsvikt, storlek och skillnader i färgseende spelar också roll, och WCAG 2.2 är den aktuella W3C-rekommendationen som de flesta tillgänglighetslagar hänvisar till.
Exempel
Grå text som nästan klarar kraven
#777777 på vitt ger 4,48:1. Det klarar kraven för stor text och gränssnittskomponenter men klarar inte AA för normal text. Den närmaste grå nyans som klarar kraven är cirka #767676, som når 4,54:1.
Vit text på en knapp med varumärkesfärg
Vit text på #ff8800 ger cirka 2,4:1, vilket inte ens klarar 3:1-nivån för stor text. Att göra orange mörkare eller använda mörk text i stället är de vanliga lösningarna; förslaget visar hur mörk textfärgen skulle behöva vara.
Kontrollera ramen på ett formulärfält
En ljusgrå ram #cccccc på vitt är cirka 1,6:1. Enligt kriterium 1.4.11 behöver ramen som identifierar ett inmatningsfält 3:1, så något runt #949494 eller mörkare krävs.
Vanliga frågor
Vilket kontrastförhållande behöver jag för WCAG AA?
4,5:1 för normal brödtext, 3:1 för stor text (24 px, eller 18,66 px fet stil) och 3:1 för gränssnittskomponenter och meningsfull grafik. AAA höjer textkravet till 7:1 och kravet för stor text till 4,5:1.
Behöver logotyptext eller text på inaktiverade knappar klara kraven?
Nej. WCAG undantar text i logotyper och varumärkesnamn, rent dekorativ text och text i inaktiva (inaktiverade) gränssnittskomponenter.
Varför skiljer sig mitt resultat något från ett annat kontrollverktyg?
Vissa verktyg avrundar kontrasten till en decimal eller avrundar uppåt. WCAG jämför det exakta värdet, så det här verktyget visar två decimaler utan avrundning. Små skillnader kan också bero på färger som anges med alpha.
Hur är det med den nya APCA-kontrastmetoden?
APCA är en annan metod som föreslagits för en framtida WCAG-version. Den ingår inte i WCAG 2.2, vilket är vad det här verktyget mäter och vad nuvarande tillgänglighetsregler hänvisar till.
Integritet
Färgerna kontrolleras i din webbläsare. Inget laddas upp eller sparas.