Kontrollera färgkontrast
Se till att din text är lätt att läsa för alla, och få ett förslag på lösning när den inte är det.
Förseglat på den här enheten
Körs i din webbläsare. Inget laddas upp.
Förseglat
Färger
- Kontrastförhållande
- Normal text
- AA · 4,5:1
- AAA · 7:1
- Stor text
- AA · 3:1
- AAA · 4,5:1
- Gränssnittselement och ikoner
- AA · 3:1
- APCA-kontrast (för information)
APCA är en nyare metod som utreds för framtida riktlinjer för tillgänglighet. WCAG 2.2 är fortfarande referensen i dag.
Förhandsvisning
Så här läses stor text
Normal text ska vara lätt att läsa för alla, även för personer med nedsatt syn, på en mobil i starkt solljus eller på en gammal skärm.
Finstilt text och bildtexter behöver mest kontrast.
Föreslagna lösningar
Så fungerar det
-
Ange dina två färger
Skriv in eller välj textfärgen och bakgrundsfärgen. Alla format fungerar: HEX, RGB, HSL eller ett CSS-namn.
-
Läs resultatet
Se kontrastförhållandet och om det klarar WCAG 2.2 AA och AAA för normal text, stor text och gränssnittselement.
-
Åtgärda vid behov
Om en nivå inte klaras kan du använda en av de föreslagna färgerna: det är den närmaste färgen med samma nyans som klarar nivån.
Vanliga frågor
Vilket kontrastförhållande behöver jag?
WCAG 2.2 nivå AA kräver minst 4,5:1 för normal text och 3:1 för stor text. Nivå AAA kräver 7:1 och 4,5:1. Ikoner, kanter på inmatningsfält och andra gränssnittselement behöver minst 3:1 mot det som finns bredvid.
Vad räknas som stor text?
Text på minst 18 punkter (24 CSS-pixlar), eller minst 14 punkter (ungefär 18,7 CSS-pixlar) om den är fetstilt. Allt mindre är normal text.
Varför underkänns 4,49:1 när det är så nära 4,5:1?
WCAG:s gränsvärden är strikta minimikrav och förhållandet får inte avrundas uppåt. Därför visar verktyget förhållandet avrundat nedåt: ett värde som ser godkänt ut är verkligen godkänt.
Vad är APCA?
APCA (Accessible Perceptual Contrast Algorithm) är ett nyare sätt att mäta kontrast som tar hänsyn till om texten är mörk på ljust eller ljus på mörkt. Det utreds inför en framtida version av riktlinjerna. Det visas här bara som information: i dag hänvisar lagkrav och granskningar till WCAG 2-förhållandet.
Hur väljs de föreslagna färgerna?
Verktyget behåller färgens nyans och färgstyrka och ändrar bara ljusheten, i den perceptuella färgrymden OKLCH, tills det hittar det närmaste värdet som når nivån. Din färg ser fortfarande ut som sig själv, bara lite ljusare eller mörkare.
Fungerar det med genomskinliga färger?
Ja, för textfärgen: en halvgenomskinlig textfärg blandas först med bakgrunden, eftersom det är den färgen man faktiskt ser. Bakgrunden behandlas som heltäckande.