Kontrastkontroll enligt WCAG
Kontrastförhållandet visar hur mycket en text eller ikon skiljer sig från bakgrunden, från 1:1 (ingen skillnad) till 21:1 (svart mot vitt). Ange två färger så räknar verktyget ut förhållandet och visar vilka WCAG-krav det räcker för.
Hexkod, till exempel #1d3fa8
Hexkod, till exempel #1d3fa8
Kontrastförhållande
7,67:1
Förhandsvisning
Stor text
Så här ser vanlig text ut med de här färgerna.
Krav i WCAG
- Vanlig text, nivå AA (minst 4,5:1) (WCAG 1.4.3)Räcker
- Stor text, nivå AA (minst 3:1) (WCAG 1.4.3)Räcker
- Ikoner, knappkanter och fältkanter, nivå AA (minst 3:1) (WCAG 1.4.11)Räcker
- Vanlig text, nivå AAA (minst 7:1) (WCAG 1.4.6)Räcker
- Stor text, nivå AAA (minst 4,5:1) (WCAG 1.4.6)Räcker
Vilken kontrast kräver WCAG?
Kriteriet 1.4.3 Kontrast (minimum) kräver ett kontrastförhållande på minst 4,5:1 mellan text och bakgrund. För stor text räcker 3:1. Stor text betyder minst 18 punkter, eller 14 punkter i fetstil, vilket i en webbläsare ungefär motsvarar 24 respektive 18,66 CSS-pixlar.
Kriteriet 1.4.11 Kontrast för icke-textuellt innehåll kräver minst 3:1 för ikoner, kanter på formulärfält och annat som behövs för att förstå eller använda en komponent.
Nivå AA är den nivå som lagar och standarder hänvisar till. Nivå AAA (1.4.6) är strängare och krävs sällan för en hel webbplats.
Vanliga kontrastfel i webbutiker
- Priser och rea-etiketter i ljusa färger, till exempel rosa eller ljusgrön text på vitt.
- Text som ligger ovanpå produktbilder eller kampanjbilder.
- Platshållartext i sökfält och formulär som är så ljus att den knappt syns.
- Formulärfält med ljusgrå kant mot vit bakgrund.
- Knappar med vit text på en ljus varumärkesfärg.
Så mäter du kontrast direkt i webbläsaren
I Chrome och Edge högerklickar du på en text, väljer Inspektera och klickar på färgrutan bredvid color i stilpanelen. Där visas kontrastförhållandet. Firefox visar kontrasten i tillgänglighetsfliken i utvecklarverktygen.
Kontrollera texter i alla tillstånd: när musen är över en knapp, när ett fält har fokus och när ett fel visas.
Kontrast är bara en del
Det gratis testet försöker köpa en produkt i din butik med bara tangentbordet och visar var det tar stopp.
Testa hela butiken