Kontrastkontroll – WCAG Kontrastkvot
Ange en förgrunds- och bakgrundsfärg för att kontrollera kontrastkvoten och se om din kombination uppfyller WCAG AA och AAA tillgänglighetsstandarder.
Ange två färger för att kontrollera kontrasten
Stöder HEX-, RGB-, HSL- och OKLCH-format
Prova ett exempel
Kontrollera färgkontrast för tillgänglighet
Färgkontrast är avgörande för läsbarhet. När förgrundstexten inte har tillräcklig kontrast mot sin bakgrund blir den svår att läsa — särskilt för användare med nedsatt syn eller färgseendebrister.
Den här kontrastkontrollern beräknar kontrastkvoten mellan två valfria färger och utvärderar den mot WCAG 2.1-kriterier. Ange färger i HEX, RGB eller HSL-format och få omedelbara resultat.
Förstå WCAG-kontrastnivåer
Riktlinjerna för webbtillgänglighet (WCAG) definierar minimikontrastkvoter för textläsbarhet. Det finns två överensstämmelsenivåer:
- WCAG AA Normal text — kräver en kontrastkvot på minst 4,5:1
- WCAG AA Stor text — kräver en kontrastkvot på minst 3:1 (stor text är 18pt+ eller 14pt+ fetstil)
- WCAG AAA Normal text — kräver en kontrastkvot på minst 7:1
- WCAG AAA Stor text — kräver en kontrastkvot på minst 4,5:1
AA är standardnivån som de flesta webbplatser och appar siktar på. AAA är den förhöjda nivån, rekommenderad där maximal läsbarhet är viktigt.
Så använder du kontrastkontrollern
- Ange en förgrundsfärg (text) — HEX, RGB eller HSL
- Ange en bakgrundsfärg i valfritt format som stöds
- Se kontrastkvoten och en liveförhandsvisning av text på den bakgrunden
- Kontrollera godkänt/underkänt-resultaten för WCAG AA och AAA
- Använd byt-knappen för att snabbt kasta om förgrund och bakgrund
När du bör kontrollera färgkontrast
- Vid val av text- och bakgrundsfärger för en webbplats eller app
- Vid verifiering att ett designsystem uppfyller tillgänglighetskrav
- Vid testning av knapp-, länk- eller ikonfärger mot deras bakgrunder
- Vid kontroll av färgkombinationer i mörkt läge
- Vid uppfyllande av juridiska tillgänglighetsstandarder (ADA, EAA, Section 508)
Exakt, omedelbart och gratis
Det här verktyget beräknar WCAG 2.1-kontrastkvoten med hjälp av den standardiserade formeln för relativ luminans. Resultaten beräknas direkt i din webbläsare — ingen data skickas till någon server.
Behöver du hitta eller konvertera en färg först? Använd Färgväljaren för att extrahera färger från en bild, eller Färgkonverteraren för att konvertera mellan HEX, RGB och HSL.
Vanliga frågor
- Vad är en bra kontrastkvot för text?
- För normalstorlek brödtext krävs en kontrastkvot på minst 4,5:1 för att uppfylla WCAG AA. För stor text (18pt eller 14pt fetstil och uppåt) är minimikravet 3:1. För den högsta tillgänglighetsnivån (WCAG AAA) behöver normal text minst 7:1.
- Vad är skillnaden mellan WCAG AA och AAA?
- AA är den standardöverensstämmelsenivå som de flesta webbplatser och appar bör uppfylla. AAA är den förhöjda nivån med strängare kontrastkrav, rekommenderad för innehåll där maximal läsbarhet är avgörande, som statliga eller vårdrelaterade webbplatser.
- Vad räknas som stor text i WCAG?
- Stor text definieras som 18 punkter (24px) eller större vid normal vikt, eller 14 punkter (ungefär 18,66px) eller större vid fetstil. Stor text har lägre kontrastkrav eftersom dess storlek gör den lättare att läsa.
- Vilka färgformat stöder den här kontrollern?
- Du kan ange färger i HEX (t.ex. #1E293B), RGB (t.ex. rgb(30, 41, 59)) eller HSL (t.ex. hsl(222, 33%, 17%)). Verktyget identifierar formatet automatiskt.
- Hur beräknas kontrastkvoten?
- Kontrastkvoten beräknas med WCAG 2.1-formeln: (L1 + 0,05) / (L2 + 0,05), där L1 är den relativa luminansen för den ljusare färgen och L2 är den relativa luminansen för den mörkare färgen. Resultatet sträcker sig från 1:1 (ingen kontrast) till 21:1 (maximal kontrast, svart på vitt).
- Fungerar det här verktyget på mobilen?
- Ja. Kontrastkontrollern fungerar på alla enheter med en modern webbläsare — dator, surfplatta eller telefon.
- Är det här verktyget gratis?
- Ja. ColourPicker.app är helt gratis att använda, utan registrering.
- Kan jag kontrollera kontrast för UI-komponenter, inte bara text?
- WCAG 2.1 kräver också en minsta kontrastkvot på 3:1 för betydelsefulla UI-komponenter och grafiska objekt (framgångskriterium 1.4.11). Du kan använda den här kontrollern för att verifiera dessa kombinationer också — kvotberäkningen är densamma.