WCAG-kontrastförhållanden — Hur du Kontrollerar att Dina Färger Klarar AA

Låg färgkontrast är det vanligaste tillgänglighetsproblemet på webben. Om din text inte har tillräcklig kontrast mot sin bakgrund kan miljontals användare med nedsatt syn, färgblindhet eller solsken på skärmen inte läsa den. Vår kontrastkontroll mäter förhållandet och berättar om det klarar WCAG AA- och AAA-standarder.

Vad är en kontrastkontroll?

En kontrastkontroll beräknar luminansförhållandet mellan en förgrundsfärg (text) och en bakgrundsfärg, sedan utvärderar det mot Web Content Accessibility Guidelines (WCAG). AA kräver ett förhållande på minst 4,5:1 för normal text och 3:1 för stor text. AAA kräver 7:1 respektive 4,5:1.

Hur använder du kontrastkontrollen?

Ange din text- (förgrunds-)färg och bakgrundsfärg i HEX, RGB eller HSL. Verktyget beräknar kontrastförhållandet och visar godkänt/underkänt för WCAG AA och AAA vid både normal och stor textstorlek. En levande förhandsvisning visar hur texten ser ut mot bakgrunden. Justera färgerna tills förhållandet uppfyller din målstandard.

Bästa praxis

Sikta på AAA-efterlevnad (7:1) när möjligt, även om bara AA (4,5:1) krävs lagligt. Förlita dig inte enbart på färg för att förmedla information — använd ikoner, understrykningar eller etiketter tillsammans med färg. Testa kontrast i både ljust och mörkt läge.