Färgkontrastkontroll
Flygande bäckasiner söka hwila på mjuka tuvor
Flygande bäckasiner söka hwila på mjuka tuvor
Vad är Färgkontrastkontroll
Det här verktyget mäter kontrastförhållandet mellan en textfärg och en bakgrundsfärg och kontrollerar det sedan mot tillgänglighetsriktlinjerna i WCAG 2.1. Det visar en live-förhandsvisning av båda färgerna tillsammans och talar om huruvida paret klarar AA eller AAA för normal text och stor text, så att du kan fånga läsbarhetsproblem innan de når produktion.
Så använder du
- Välj eller skriv textfärgen i det första fältet, som en HEX-kod.
- Välj eller skriv bakgrundsfärgen i det andra fältet.
- Kontrollera kontrastförhållandet och godkänd/underkänd-märkena för AA och AAA.
- Klicka på byt-knappen för att testa färgerna omvänt.
- Kopiera URL:en för att dela det exakta paret med ditt team.
När du använder det
Väljer du brödtext till en ny design och är osäker på om den är läsbar nog? Ange din textfärg och bakgrund, till exempel #767676 på #FFFFFF, så får du ett förhållande på 4,54:1: godkänt för AA normal text men underkänt för AAA. Det är skillnaden mellan en tillgänglig produkt och en flaggad granskning, oavsett om du granskar en kundwebbplats eller släpper din egen app.
Vanliga frågor
Vad är ett bra kontrastförhållande för text?
WCAG AA kräver minst 4,5:1 för normal text och 3:1 för stor text (18 pt eller 14 pt fet och uppåt). WCAG AAA är strängare: 7:1 för normal text och 4,5:1 för stor text.
Vad är det högsta möjliga kontrastförhållandet?
21:1, förhållandet mellan rent svart (#000000) och rent vitt (#FFFFFF). Inget färgpar kan överstiga det.
Varför underkändes mina färger för AA fast designen ser bra ut för mig?
Kontrastförhållande mäter tillgänglighet, inte personlig smak. Någon med nedsatt syn, eller någon som tittar på en skärm i starkt solljus, behöver mer kontrast än ett par som ser bra ut för typisk syn.
Kontrollerar det här verktyget även färgblindhet?
Nej. Verktyget kontrollerar luminanskontrast enligt WCAG-formeln, vilket gynnar alla användare inklusive många former av färgblindhet, men det simulerar inte specifika färgseendedefekter.
Kan jag dela verktyget med mina värden ifyllda?
Ja. Webbadressen uppdateras automatiskt medan du skriver. Kopiera den från adressfältet eller använd Dela-knappen — den som öppnar länken ser exakt dina värden redo att användas.
Relaterade verktyg
Bildförhållande Kalkylator
Räkna ut bildförhållandet, hitta saknad bredd eller höjd och ändra storlek på bilder och video utan att förvränga proportionerna. Gratis.
Base64-avkodare
Avkoda Base64-strängar till vanlig text direkt i din webbläsare. Stöder fullständig Unicode-utdata inklusive emojis. Gratis Base64-avkodare online.
Base64-kodare
Koda valfri text till Base64 direkt i din webbläsare. Stöder Unicode, emojis och specialtecken. Gratis Base64-kodare online.