Verktyget använder den officiella WCAG-formeln för relativ luminans, vilket gör att resultaten stämmer överens med WebAIM:s kontrastverktyg och de flesta tillgänglighetsgranskningar. Allt körs i webbläsaren - dina färger laddas aldrig upp och det finns inga begränsningar.
Färgkontrast test
Körs helt i din webbläsare - inget laddas upp, ingen registrering.
Kontrastförhållande
Godkändkräver 4.5:1
Godkändkräver 3:1
Underkändkräver 7:1
Godkändkräver 4.5:1
Stor = 18pt (24px), eller 14pt (18,66px) i fet stil.
Vad är ett färgkontrast-verktyg?
Ett färgkontrast-verktyg mäter kontrastförhållandet mellan en textfärg och dess bakgrund och visar om det uppfyller WCAG-tillgänglighetsstandarderna. Resultatet är ett förhållande från 1:1 till 21:1, med godkänd eller underkänd status för AA och AAA vid både normal och stor textstorlek.
Så använder du verktyget
- 1Ange dina färger. Skriv en hex-kod, ett rgb()-värde eller ett CSS-färgnamn för text och bakgrund, eller välj med färgväljaren.
- 2Avläs förhållandet. Kontrastförhållandet uppdateras direkt, med en förhandsgranskning av din text mot bakgrunden.
- 3Kontrollera märkena. Varje märke visar godkänd eller underkänd för WCAG AA och AAA vid normal och stor textstorlek.
Vem passar det för
- Designers som testar varumärkesfärger innan de når utveckling.
- Frontend-utvecklare som kontrollerar knappar, länkar och etiketter mot WCAG AA.
- Tillgänglighetsgranskare som dokumenterar kontrastfel med exakta förhållanden.
- Innehålls- och e-postteam som säkerställer att texten förblir läsbar på färgade bakgrunder.
Vanliga frågor
Är färgkontrast-verktyget gratis?
Ja - helt gratis utan registrering och utan begränsningar. Det körs helt i webbläsaren.
Vilket kontrastförhållande krävs för WCAG AA?
WCAG 2.1 nivå AA kräver ett kontrastförhållande på minst 4,5:1 för normal text och 3:1 för stor text. Nivå AAA höjer kravet till 7:1 för normal text och 4,5:1 för stor text.
Vad räknas som stor text?
Stor text är minst 18pt (ungefär 24px) med normal vikt, eller 14pt (ungefär 18,66px) i fet stil. Stor text tillåts ett lägre kontrastförhållande eftersom större tecken är lättare att läsa.
Hur beräknas kontrastförhållandet?
Det beräknas som (L1 + 0,05) / (L2 + 0,05), där L1 och L2 är den relativa luminansen hos den ljusare respektive mörkare färgen. Luminansen beräknas från sRGB:s röda, gröna och blå kanaler enligt WCAG 2.x-definitionen.
Stöds hex, RGB och färgnamn?
Ja. Det går att ange 3-, 4-, 6- eller 8-siffriga hex-koder, rgb()- och rgba()-värden, eller valfritt CSS-färgnamn som "teal". Det går också att välja färger med den inbyggda färgväljaren.
Varför kan samma förhållande ibland godkännas och ibland underkännas?
Det beror på textstorlek och vilken nivå som eftersträvas. Ett förhållande på 3,5:1 underkänns för AA vid normal text men godkänns för AA vid stor text - kontrollera alltid mot den storlek och nivå som faktiskt används.