Färgkontrastkontroll
Ange en förgrunds- och bakgrundsfärg för att kontrollera WCAG-kontrastförhållandet med AA- och AAA-pass/fail-brickor för normal och stor text.
Flygande bäckasiner söka hwila på mjuka tuvor.
Flygande bäckasiner söka hwila på mjuka tuvor.
Så här fungerar det
Färgkontrastkontrollen mäter luminanskontrastförhållandet mellan textfärg och bakgrundsfärg i enlighet med WCAG 2.1-riktlinjerna — tillgänglighetsstandarden som används av organisationer över hela världen.
Ange text- och bakgrundsfärg i HEX-, RGB- eller HSL-format. Verktyget beräknar omedelbart den relativa luminansen för varje färg och deras kontrastförhållande.
Resultaten testas mot WCAG-nivåer: AA kräver ≥4,5:1 för normal text och ≥3:1 för stor text; AAA kräver ≥7:1 och ≥4,5:1. Visuell förhandsvisning visar hur texten faktiskt ser ut mot den bakgrunden.
Låg kontrast gör innehåll svårt att läsa för användare med nedsatt syn, särskilt för personer med färgblindhet.
Praktiskt exempel
Kontrollera grå text #767676 på vit bakgrund: kontrastförhållandet är exakt 4,54:1 — det klarar WCAG AA för normal text (som kräver 4,5:1) men faller på AAA (7:1), och resultatkorten visar varje tröskel separat, inklusive de mildare reglerna för stor text. Den logaritmiska skalan visar var paret ligger mellan 1:1 och de 21:1 som rent svart på vitt ger. APCA-kortet förhandsvisar WCAG 3-måttet, och bytesknappen svarar direkt på om det hjälper att invertera för- och bakgrund. Förhandsvisningen renderar riktig text så att du kan döma med egna ögon.
Användningsfall
- Kontrollera en varumärkesfärgpalett för tillgänglighet innan en webbplats lanseras
- Välja knapp- och länkfärger som förblir läsliga på mörkt eller ljust tema
- Uppfylla WCAG 2.1 AA- eller AAA-krav för Section 508, EN 301 549 eller ADA-efterlevnad
- Granska en mockup från en designer för att flagga oläslig text innan utveckling börjar
- Lära ut tillgänglighet genom att visa hur små luminansskillnader orsakar stora kontrastfel
Vanliga frågor
- Vad är WCAG?
- Web Content Accessibility Guidelines — tillgänglighetsstandarder publicerade av W3C, allmänt lagstadgade.
- Vilken minimikontrast ska jag uppnå?
- Minst AA (4,5:1 för normal text) för de flesta webbplatser; AAA för kritiskt innehåll.
- Har stor text andra krav?
- Ja — text ≥18pt eller ≥14pt fet kräver bara 3:1 (AA) eller 4,5:1 (AAA).
- Tar kontrollen hänsyn till färgblindhet?
- Luminansresultatet baseras på perceptionsmatematik som naturligt täcker de vanligaste typerna av färgblindhet.
- Kan jag klistra in HEX-kod direkt?
- Ja, klistra in #RRGGBB eller bara RRGGBB — verktyget accepterar båda formaten.