Färgkontrastkontroll
Kontrollera färgkontrastförhållanden för WCAG 2.1-efterlevnad. Verifiera AA- och AAA-standarder omedelbart.
Vad är WCAG-kontrastförhållande?
WCAG-kontrastförhållandet mäter luminansskillnaden mellan förgrunds- och bakgrundsfärger. Från 1:1 till 21:1.
Vilka är WCAG AA- och AAA-kraven?
WCAG AA kräver minst 4.5:1 för normal text och 3:1 för stor text. AAA kräver 7:1 och 4.5:1.
Vad räknas som stor text?
Stor text definieras som 18pt (24px) eller större, eller 14pt (18.66px) fetstil eller större.
Varför är färgkontrast viktigt?
Rätt kontrast säkerställer att text är läsbar för personer med synnedsättningar och förbättrar läsbarheten för alla.
Hur beräknar jag kontrastförhållandet?
Beräknas med relativa luminansvärden. Formeln är (L1 + 0.05) / (L2 + 0.05).
Vad är minimikontrast för UI-element?
WCAG kräver minst 3:1 för UI-komponenter och grafiska objekt.
Kan jag använda vilka färgkombinationer som helst?
Inte alla kombinationer uppfyller tillgänglighetsstandarder. Använd den här kontrollen för att validera.
Vad är relativ luminans?
Det är den upplevda ljusstyrkan hos en färg, från 0 (svart) till 1 (vit). Beräknas med sRGB-färgrymden.
Måste jag kontrollera kontrast för bilder?
Text i bilder måste uppfylla samma krav. För dekorativa bilder gäller det inte.
Vilka verktyg hjälper till med kontrast?
Använd webbläsarens utvecklarverktyg, designplugins eller onlinekontroller som denna.
Hur man använder Färgkontrastkontroll
Kontrollera direkt om text- och UI-kontrast uppfyller AA- och AAA-trösklarna i WCAG 2.1 — helt i webbläsaren. Ange två färger så beräknas kvoten lokalt; inget lämnar din enhet.
- Skriv eller klistra in textfärgen i fältet Foreground Color, i valfritt format som stöds, till exempel HEX eller RGB.
- Fyll i fältet Background Color med färgen bakom texten för att beräkna kontrastkvoten.
- Läs den framräknade kvoten samt AA- och AAA-markeringarna för normal och stor text.
- Justera en av färgerna tills kvoten passerar 4,5:1 för löptext eller 3:1 för stor text och UI-komponenter.
- Byt plats på värdena i Foreground Color och Background Color för att testa det omvända paret, som ljus text på mörkt tema.
AAA (7:1) är en fin målsättning för långtext, men 4,5:1 (AA) är den undre gräns de flesta tillgänglighetsriktlinjer kräver.
Relaterade verktyg
- Färgväljare Välj valfri färg från skärmen med pipetten. Kopiera HEX-, RGB-, HSL-koder direkt. Gratis online färgväljare.
- Färgpalettgenerator Skapa vackra, harmoniska färgpaletter direkt med vår gratis onlinegenerator. Stöder monokromatiska, analoga, komplementära, triadiska, split-komplementära och tetradiska lägen. Finjustera färger med HSL-reglag, lås favoriter och exportera som CSS, Tailwind, JSON eller SVG. 100% webbläsarbaserad, din data lämnar aldrig din enhet.
- Färgblindhetssimulator Gratis online färgblindhetssimulator. Testa designer för Protanopi, Deuteranopi, Tritanopi och andra typer. 100% privat, körs i din webbläsare.
- GIF Dela Bildrutor Extrahera och ladda ner enskilda bildrutor från GIF-animationer som PNG eller sprite-sheet. Gratis onlineverktyg med förhandsgranskning och ZIP-export.
- GIF Baklänges Vänd uppspelningsordningen för GIF-animationer gratis online. Ladda upp, förhandsgranska och ladda ner direkt.
- GIF Hastighetsändrare Ändra GIF-animeringshastighet online. Snabba upp eller sakta ner GIF-filer omedelbart.
- Video till GIF Konvertera video till animerad GIF online. Justera kvalitet, bildhastighet och upplösning direkt i webbläsaren utan uppladdning.
- Meme-generator Gratis meme-generator online. Lägg till klassiska texter över och under valfri bild, dra dem fritt och ladda ner din meme som PNG eller JPEG direkt.