Läsbart för alla

En stor underrubrik

Brödtext drabbas mest av låg kontrast, eftersom man läser den längre och i liten storlek. En textlänk

Knapp

Textfärg

Textens opacitet

Bakgrundsfärg

Simulering av färgblindhet

Tema

Mer information om färgkontrast

Färgkontrastkontroll

Kontrollera att text går att läsa mot sin bakgrund innan du publicerar en design. Välj eller skriv en textfärg och en bakgrundsfärg, så visar verktyget kontrastförhållandet enligt WCAG 2.x med godkänt eller underkänt för AA och AAA, för normal och stor text och för UI-komponenter. Förhandsvisning i realtid, simulering av färgblindhet och föreslagna rättningar hjälper dig att hitta ett par som fungerar. Välj en textfärg och en bakgrund som HEX, RGB eller HSL. WCAG-kontrastförhållandet, AA- och AAA-resultaten och förhandsvisningen uppdateras medan du skriver, och de närmaste godkända färgerna föreslås. Allt sparas i den här webbläsaren.

Hur det fungerar

Välj en textfärg och en bakgrundsfärg, eller skriv dem som HEX, RGB eller HSL. Ställ in textens opacitet om texten är halvgenomskinlig.
Läs av kontrastförhållandet och märkena för AA och AAA för normal text, stor text och UI-komponenter, och titta på förhandsvisningen.
Använd en föreslagen färg om paret underkänns, spara bra par i paletten och kopiera CSS till ditt projekt.

Rättningar, inte bara betyg

När ett par underkänns letar verktyget upp närmaste textfärg och bakgrundsfärg med samma nyans och mättnad som når AA och AAA, och ett klick använder den. Halvgenomskinlig text blandas först med bakgrunden, precis som en webbläsare ritar den.

Privat och flyttbart

Dina färger och din palett sparas bara i den här webbläsaren. Spara allt som JSON för säkerhetskopiering eller för att flytta det till en annan enhet, eller spara resultatet som PDF eller bild. Ångra och gör om gäller alla ändringar.

Ofta ställda frågor

Är färgkontrastkontrollen gratis?

Ja. Den är gratis, kräver inget konto och fungerar i alla moderna webbläsare.

Vilket förhållande behöver jag?

WCAG-nivå AA kräver minst 4,5:1 för normal text och 3:1 för stor text och för UI-komponenter som fältkanter och ikoner. Nivå AAA kräver 7:1 för normal text och 4,5:1 för stor text.

Varför underkänns 4,48 när det avrundas till 4,5?

WCAG-gränserna är exakta. Ett förhållande på 4,48:1 ligger under 4,5:1 och klarar därför inte AA för normal text. Verktyget jämför det oavrundade värdet, så märkena är alltid strikta.