Hoppa till innehåll
TextArray
100% lokalt

Kontrastkontroll

Kontrollera WCAG-kontrastförhållanden för färgpar, med AA- och AAA-bedömningar och korrigeringsförslag.

Inmatning
Utmatning

Kontrastkontroll

Klistra in förgrunds- och bakgrundspar, ett per rad — #7a1f2b på #ffffff, #333, #eee eller rgb(0, 0, 0) #fff — och WCAG 2-kontrastförhållandet för varje par kommer tillbaka omedelbart, med en godkänd eller misslyckad bedömning för varje överensstämmelsenivå. Förhållandet går från 1 : 1 (ingen kontrast alls) till 21 : 1 (svart på vitt) och beräknas utifrån relativ luminans precis som riktlinjerna definierar det, så siffrorna överensstämmer med webbläsarinspektörer och granskningsverktyg.

WCAG namnger två nivåer. AA, den mest referens till lagar och kontrakt, kräver 4,5 : 1 för normal text och 3 : 1 för stor text. AAA, det strängare målet, ber om 7 : 1 och 4,5 : 1. Text räknas lika stor från 18 pt (cirka 24 px) i normal vikt, eller från 14 pt (ca 18,7 px) i fetstil - det är därför en rubrik kan passera i ett förhållande som ett stycke misslyckas. Rapporten anger alla fyra kontrollerna per par; växla utgången till Compact för en rad per par, vilket är den snabbaste läsningen när du sveper en hel palett.

När ett par missar AA för normal text aktiverar du "Föreslå fix" och verktyget gör förgrunden mörkare eller ljusare i små ljusstegssteg, med bibehållen nyans, tills den når 4,5 : 1 — skriver sedan ut närmast passerande hex redo att klistras in i din stilmall.

Allt körs i din webbläsare; outgivna varumärkespaletter lämnar aldrig din enhet. Färger kan vara 3- eller 6-siffrig hex med eller utan hash, rgb() eller rgba(), eller ett vanligt CSS-namn - de grundläggande 16 plus de populära utökade. Den fullständiga CSS-listan med 148 namn bärs inte medvetet, så skriv exotiska namn som hexadecimal. En linje som inte är ett färgpar noteras lugnt och resten fortsätter att bearbetas.

FAQ

Vad betyder AA och AAA?
De är WCAG-överensstämmelsenivåer. AA kräver ett kontrastförhållande på minst 4,5 : 1 för normal text och 3 : 1 för stor text; AAA höjer det till 7 : 1 och 4,5 : 1. AA är referensnivån för tillgänglighetsbestämmelser.
När gäller tröskelvärdena för stor text?
Från 18 pt (cirka 24 px) i normal vikt, eller från 14 pt (ca 18,7 px) i fetstil. Stor text behöver bara 3 : 1 för AA och 4,5 : 1 för AAA, vilket är anledningen till att rubriker passerar lättare än textkopiering.
Vilka färgformat kan jag klistra in?
Hex med 3 eller 6 siffror, med eller utan inledande hash; rgb() och rgba() i komma- eller blankstegsnotation; och vanliga CSS-färgnamn — de grundläggande 16 plus populära som orange, rosa eller rebeccapurple. Den fullständiga listan med 148 namn ingår inte; skriv sällsynta namn som hex. Alfa läses men ignoreras, eftersom kontrasten definieras mellan ogenomskinliga färger.
Hur fungerar "Föreslå fix"?
När ett par misslyckas med AA för normal text, ändrar verktyget förgrundens ljushet steg för steg – med bibehållen nyans och mättnad – tills förhållandet når 4,5 : 1 och skriver ut närmast passerande hex. Det mörknar eller ljusnar, beroende på vad som kommer dit tidigare.
Är min text uppladdad någonstans?
Nej. Kontrollen körs helt och hållet i din webbläsare och inget du klistrar in lämnar din enhet.