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.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
Så här fungerar det
Välj en förgrunds- och bakgrundsfärg med färgväljarna eller skriv hex-värden direkt. Verktyget beräknar den relativa luminansen för varje färg med WCAG 2.1-formeln — en viktad summa av sRGB-kanalerna efter gamma-avkodning — och dividerar den ljusare luminansen med den mörkare (plus 0,05 i täljare och nämnare för att undvika division med noll vid ren svart). Kontrastförhållandet går från 1:1 (identiska färger) till 21:1 (ren svart på ren vit). Fyra WCAG-brickor visar pass eller fail: AA för normal text (≥ 4,5:1), AA för stor text (≥ 3:1), AAA för normal text (≥ 7:1) och AAA för stor text (≥ 4,5:1). En live-förhandsvisning visar exempelmeningar i normal och stor text för visuell kontroll. Beräkningen sker helt i din webbläsare utan serveranrop.
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