Färgkontrastkontroll
Gratis färgkontrastkontroll: testa om text- och bakgrundsfärger uppfyller WCAG 2.2 AA och AAA, se kontrastförhållandet och få närmaste färg som klarar kraven.
Det här är normal text, i storlek med ett stycke.
Stor text
Knapp| AA | AAA | |
|---|---|---|
| Normal text | ||
| Stor text (24 px, eller 18,7 px i fetstil) | ||
| Ikoner och gränssnittskanter | — |
Vad den gör
Den här kontrollen mäter kontrasten mellan en textfärg och dess bakgrund med formeln i tillgänglighetsriktlinjerna WCAG 2.2, som används i många tillgänglighetslagar. Den visar kontrastförhållandet, från 1:1 (ingen kontrast) till 21:1 (svart på vitt), och om paret klarar nivåerna AA och AAA för normal text, stor text och gränssnittskomponenter som ikoner och kanter. När ett par inte klarar kraven föreslår den närmaste färg med samma kulör som gör det.
Så använder du den
- Ange eller välj textfärgen och bakgrundsfärgen.
- Läs kontrastförhållandet och resultaten för AA och AAA, och titta på förhandsvisningen i realtid.
- Om det inte klarar kraven, tryck på Använd vid en föreslagen färg och kopiera sedan länken för att dela resultatet.
Vanliga frågor
Vilket kontrastförhållande behöver jag?
Nivå AA, det vanliga lagkravet, kräver 4,5:1 för normal text och 3:1 för stor text samt för ikoner och gränssnittskanter. Nivå AAA kräver 7:1 för normal text och 4,5:1 för stor text.
Vad räknas som stor text?
Text på minst 24 CSS-pixlar (18 punkter), eller minst cirka 18,7 CSS-pixlar (14 punkter) i fetstil. Rubriker är ofta stora; brödtext är det oftast inte.
Varför underkänns #777777 på vitt?
Förhållandet är 4,47:1, strax under de 4,5:1 som krävs för normal text. Förhållanden avrundas inte uppåt, så en något mörkare grå som #767676 (4,54:1) är den ljusaste grå som klarar kraven på vitt.
W3C — WCAG 2.2, 1.4.3 Contrast (Minimum)
W3C — WCAG 2.2, 1.4.11 Non-text Contrast