Färgkontrastkontroll

Kontrollera dina färger

Testa färgkombinationer för att säkerställa att de uppfyller WCAG:s tillgänglighetsstandarder för textläsbarhet.

1.00:1

Kontrast

Underkänt

Mycket dålig

Normal text

AA (4.5:1)

AAA (7:1)

Stor text

AA (3:1)

AAA (4.5:1)

Textfärg

Bakgrundsfärg

Snabba åtgärder

Förhandsgranskningstitel

Den snabba bruna räven hoppar över den lata hunden

Exempel på liten text (12px)

Text

#ffffff

Bakgrund

#e57000

WCAG-standarder

Nivå AA

Minsta kontrastförhållande på 4.5:1 för normal text och 3:1 för stor text. Krävs för de flesta webbplatser.

Nivå AAA

Förbättrat kontrastförhållande på 7:1 för normal text och 4.5:1 för stor text. Rekommenderas för optimal tillgänglighet.

Otillräcklig kontrast för alla textstorlekar - uppfyller inte WCAG-standarder.

Beräkna kontrastförhållandet mellan text och bakgrundsfärger.

Välj en färg med färgväljaren för text och bakgrundsfärg eller ange en färg i RGB-hexadecimal format (t.ex. #259 eller #2596BE). Du kan justera skjutreglaget för att välja färg. Webbinnehållstillgänglighetsriktlinjerna (WCAG) har en specifik riktlinje för att avgöra om text är läsbar för seende användare. Dessa kriterier använder en särskild algoritm för att kartlägga färgkombinationer till jämförbara förhållanden. Enligt denna formel anger WCAG att en 4.5:1 färgkontrast förhållande med text och bakgrund är tillräckligt för vanlig (brödtext), och stor text (18+ pt vanlig, eller 14+ pt fetstil) bör ha minst ett 3:1 färgkontrastförhållande.

Viktiga funktioner

Beräkning av kontrastförhållande i realtid
Kontroll av WCAG AA & AAA-efterlevnad
HSL-reglage för finjustering
Flera förhandsgranskningsformat

Avancerade verktyg

Automatisk färgkorrigering
Text- och bakgrundsexempel
Färgnamnsdetektion
Exportera resultat

Vanliga frågor

För WCAG AA-efterlevnad kräver normal text ett kontrastförhållande på minst 4,5:1, medan stor text (18 pt eller 14 pt fetstil) kräver 3:1.

WCAG AAA kräver högre kontrastförhållanden: 7:1 för normal text och 4,5:1 för stor text, jämfört med AA:s 4,5:1 respektive 3:1.

Använd vår automatiska korrigeringsfunktion för att justera text- eller bakgrundsfärgerna och behålla designens syfte, eller justera färgerna manuellt med HSL-reglagen och deras visuella indikatorer som visar optimala zoner för AA/AAA-efterlevnad.

De gröna zonerna och AA/AAA-markeringarna visar optimala områden för att uppnå WCAG-efterlevnad. Riktningstipsen (Ljusare/Mörkare) visar vilket håll som ger bättre kontrast utifrån din nuvarande färgkombination.

Ja, du kan ange vilka hexkoder som helst eller använda färgväljaren för att välja egna färger. URL:en uppdateras automatiskt så att du kan dela specifika färgkombinationer.