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.
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.