Färgkontrastkontroll
Kontrollera färgkontrastförhållanden för webbtillgänglighet. Testa kombinationer av text- och bakgrundsfärger mot WCAG-riktlinjerna med förhandsgranskning i realtid, tillgänglighetsbetyg och förbättringsförslag.
Hur man kontrollerar färgkontrast
- 1
Välj textfärg
Klicka på den första färgväljaren för att välja din textfärg, eller ange en hexkod direkt.
- 2
Välj bakgrundsfärg
Använd den andra färgväljaren för att välja din bakgrundsfärg för kontrasttestet.
- 3
Granska kontrastresultat
Kontrollera det beräknade kontrastförhållandet och se AA/AAA-betyg för normal och stor text.
- 4
Förhandsgranska din design
Visa liveförhandsgranskningen för att se hur din färgkombination ser ut med faktiskt textinnehåll.
Nyckelfunktioner
Kontrasttestning i realtid
Beräkna kontrastförhållanden omedelbart när du väljer olika kombinationer av text- och bakgrundsfärger.
WCAG-kompatibilitetsbetyg
Få AA- och AAA-betyg för både normal och stor text enligt riktlinjerna för tillgängligt webbinnehåll (WCAG).
Panel för liveförhandsgranskning
Se exakt hur dina färgkombinationer kommer att se ut med exempeltext i både normal och stor storlek.
Visuell poängindikator
Se din kontrastprestanda med ett intuitivt cirkeldiagram som visar poäng från 0-100.
Interaktiva färgväljare
Välj enkelt färger med inbyggda färgväljningsverktyg för både text- och bakgrundsfärger.
Tillgänglighetstips
Få praktiska förslag för att förbättra kontrasten och uppfylla tillgänglighetsstandarder.
Vad är en färgkontrastkontroll?
En färgkontrastkontroll är ett verktyg som mäter skillnaden i luminans mellan text- och bakgrundsfärger. Den beräknar kontrastförhållanden enligt WCAG-standarder (Riktlinjer för tillgängligt webbinnehåll) för att säkerställa att innehållet är läsbart för användare med synnedsättningar, inklusive färgblindhet och nedsatt syn.
Varför använda vår färgkontrastkontroll?
- 1
WCAG-kompatibilitet
Säkerställ att dina designer uppfyller internationella tillgänglighetsstandarder med korrekta AA- och AAA-betyg.
- 2
Feedback i realtid
Se omedelbara resultat när du justerar färger, vilket gör det enkelt att hitta kompatibla kombinationer.
- 3
Visuellt poängsystem
Förstå kontrastprestanda med en blick med vårt intuitiva poängsystem från 0-100.
- 4
Ingen installation krävs
Testa färgkombinationer omedelbart i din webbläsare utan att ladda ner någon programvara.
Vanliga frågor
Vad är ett bra kontrastförhållande?
För normal text, sikta på minst 4.5:1 för AA-kompatibilitet eller 7:1 för AAA. Stor text (18pt eller 14pt fet) kräver 3:1 för AA eller 4.5:1 för AAA-kompatibilitet.
Vad betyder AA- och AAA-betygen?
AA är standardnivån för tillgänglighetskompatibilitet som krävs av de flesta regleringar. AAA är den högsta nivån, vilket ger förbättrad tillgänglighet för användare med allvarligare synnedsättningar.
Hur beräknas kontrastförhållandet?
Kontrastförhållandet beräknas med hjälp av färgernas relativa luminans enligt WCAG-riktlinjerna. Det sträcker sig från 1:1 (ingen kontrast) till 21:1 (maximal kontrast).
Vad räknas som stor text?
Stor text definieras som 18 punkter (24px) eller större, eller 14 punkter (18.66px) eller större om den är fet. Stor text har mer överseende kontrastkrav.
Varför är färgkontrast viktigt?
God färgkontrast säkerställer att innehållet är läsbart för alla, inklusive användare med synnedsättningar, färgblindhet, eller de som visar innehåll i starkt solljus eller på dåliga skärmar.
Kan jag använda detta för vilket färgformat som helst?
Verktyget accepterar hex-färgkoder. Du kan konvertera från andra format (RGB, HSL, etc.) till hex med hjälp av onlinekonverterare eller designverktyg.