Contrast Checker: kontrollera färgkontrast enligt WCAG
Contrast Checker kontrollerar din färgkontrast: verktyget beräknar WCAG-kontrastförhållandet mellan text- och bakgrundsfärg (t.ex. 4.48:1 för #777777 på vitt), visar om AA och AAA uppfylls och föreslår den närmaste färgen som uppfyller AA om kontrasten inte räcker. Gratis, utan registrering och direkt i din webbläsare.
Byggd av Justin Schuessler
Har du kontrollerat kontrasten? Publicera din webbplats med snabbt och pålitligt webbhotell.
Kontrastförhållande
21.00:1
Normal text
Den snabba bruna räven hoppar över den lata hunden.
Stor text
Den snabba räven
Fortsätt med dessa färger: Kontrollera förgrundsfärgen i simulatorn för färgblindhet · Skapa färgschema utifrån förgrundsfärgen
Utvecklad med integritet i åtanke. Det du skriver behandlas i webbläsaren och skickas inte till någon server.
Exempelresultat
Så ser resultatet ut i Contrast Checker
Du anger text- och bakgrundsfärg. Verktyget beräknar kontrastförhållandet, kontrollerar alla WCAG-nivåer och föreslår den närmaste färgen som uppfyller AA om färgerna inte klarar kraven. Färgerna nedan är ett exempel. Ditt resultat beror på dina färger.
Exempel · #777777 på #ffffff
Uppfyller inte AA för normal text- Kontrastförhållande
- 4.48:1
- Minimivärde för AA för vanlig text: 4.5:1.
- Avklarade nivåer
- 2/5
- Godkänd: AA – stor text (3:1), UI-komponenter och grafik (3:1)
- Föreslagen förgrundsfärg
- #767676
- Uppnår 4.54:1 och därmed AA för normal text, med minsta möjliga ändring av ljusstyrkan.
Så tolkar du resultatet
Varje WCAG-nivå har ett fast minimivärde. Exemplet med 4.48:1 kontrolleras mot varje nivå separat.
| WCAG-nivå | Exempel |
|---|---|
| AA – normal text (4.5:1) | Inte godkänd |
| AA – stor text (3:1) | Godkänd |
| AAA – normal text (7:1) | Inte godkänd |
| AAA – stor text (4.5:1) | Inte godkänd |
| UI-komponenter och grafik (3:1) | Godkänd |
Funktioner
Mer än en kontrastkalkylator: det här kontrollerar Contrast Checker
Tillräcklig färgkontrast gör text och kontroller läsbara för personer med nedsatt syn och i dåliga ljusförhållanden. Contrast Checker visar om din kombination uppfyller WCAG:s gränsvärden och hjälper dig att förbättra den.
Fem WCAG-kontroller i en överblick
För varje färgkombination visar verktyget om AA och AAA uppfylls för vanlig och stor text och om minimikontrasten på 3:1 uppnås för UI-komponenter och grafik.
Färgförslag med ett klick
Om kontrasten inte räcker för AA för vanlig text föreslår verktyget den närmaste färgen som når 4.5:1. Det ändrar bara ljusstyrkan på text- eller bakgrundsfärgen, beroende på vilken som behöver justeras minst.
Hex, RGB och färgväljare
Ange färger som hexvärden med eller utan #, med tre eller sex tecken, som rgb() eller rgba(), eller som enkla värden som 34, 34, 34. Du kan också välja dem i färgväljaren.
Förhandsvisning i realtid för vanlig och stor text
Två förhandsvisningar visar exempeltext i vanlig och stor storlek med dina färger.
Delbar länk
De aktuella färgerna läggs automatiskt till i webbadressen. Om du kopierar länken öppnas samma kombination – praktiskt när du vill stämma av med teamet.
Beräkning i webbläsaren
Kontrastförhållandet beräknas direkt i din webbläsare. Dina färger skickas inte till någon server.
WCAG:s gränsvärden
Vilket kontrastförhållande behöver du enligt WCAG?
Contrast Checker testar dina färger mot dessa fem minimikrav. Nivå AA är det vanliga minimikravet, medan AAA är den striktare nivån för särskilt lättläst innehåll.
| WCAG-nivå | Minimikontrast | Gäller för |
|---|---|---|
| AA – normal text (4.5:1) | 4.5:1 | Löptext och etiketter som inte räknas som stor text |
| AA – stor text (3:1) | 3:1 | Text från 24 px (18 pt) eller fet text från 18,66 px (14 pt) |
| AAA – normal text (7:1) | 7:1 | Löptext på den striktare, frivilliga nivån |
| AAA – stor text (4.5:1) | 4.5:1 | Stor text på den striktare, frivilliga nivån |
| UI-komponenter och grafik (3:1) | 3:1 | Ramar runt inmatningsfält, ikoner och andra grafiska element (WCAG 1.4.11) |
Vill du kontrollera om dina färger går att skilja åt även vid färgseendenedsättning? Simulatorn för färgblindhet visar hur en färg uppfattas vid olika former av färgblindhet. Till simulatorn för färgblindhet
Så fungerar det
Kontrollera färgkontrasten i 6 steg
Från text- och bakgrundsfärg till en tillgänglig kombination som du kan kopiera eller dela.
Steg 1
Ange textfärg
Ange textfärgen som ett hex- eller RGB-värde i fältet ”Förgrund (text)” eller välj den med färgväljaren.
Steg 2
Ange bakgrundsfärg
Ange bakgrundsfärgen på samma sätt i fältet ”Bakgrund”. Med pilknappen mellan fälten byter du plats på förgrunds- och bakgrundsfärgen.
Steg 3
Läs av kontrastförhållandet
Läs av kontrastförhållandet och kontrollera de fem indikatorerna för AA och AAA för vanlig och stor text samt för UI-komponenter och grafik. En bock betyder att kravet uppfylls, ett kryss att det inte uppfylls.
Steg 4
Kontrollera förhandsgranskningen
Se i förhandsvisningen hur vanlig och stor exempeltext ser ut med din färgkombination.
Steg 5
Använd färgförslaget
Om kombinationen inte uppfyller AA för vanlig text klickar du på ”Föreslå närmaste färg som uppfyller kravet” och sedan på ”Använd”.
Steg 6
Kopiera eller dela färger
Kopiera hexvärdet med kopieringsknappen bredvid fältet eller dela webbadressen från adressfältet, som innehåller båda färgerna.
Upptäck mer
Fler färgverktyg
Simulator för färgblindhet
Simulera direkt hur färgpaletter och egna bilder uppfattas vid protanopi, deuteranopi, tritanopi och akromatopsi – allt beräknas i webbläsaren.
Byggd av Justin Schuessler
Generator för färgscheman
Skapa komplementära, analoga, triadiska och andra färgscheman direkt utifrån en basfärg – ingenting sparas eller överförs.
Byggd av Justin Schuessler
Färgväljare
Konvertera färger direkt mellan HEX, RGB, HSL, HSV och CMYK, hitta närmaste namngivna CSS-färg och kontrollera WCAG-kontrasten mot svart och vitt – helt i webbläsaren.
Byggd av Justin Schuessler
Färgväljare för bilder
Läs av en färgkod från en bild: färgpipett med förstoringsglas, HEX, RGB och HSL, bildens färgpalett och kontrastinformation. Bilden stannar i webbläsaren.
Byggd av Dimitri Heissler
FAQ
Vanliga frågor om Contrast Checker
Kortfattade svar om färgkontrast, WCAG och det här verktyget.
Contrast Checker är gratis och kan användas utan registrering. Kontrastförhållandet beräknas direkt i din webbläsare. Dina färger skickas inte till någon server.
Enligt WCAG 2.x-formeln beräknar verktyget först den relativa luminansen (L) för båda färgerna. Sedan delas L för den ljusare färgen plus 0.05 med L för den mörkare färgen plus 0.05. Resultatet ligger mellan 1:1 (identiska färger) och 21:1 (svart på vitt). Färgernas ordning spelar ingen roll. Ju högre värde, desto lättare är texten att läsa mot bakgrunden.
För nivå AA behöver vanlig text minst 4.5:1 och stor text 3:1. Den striktare nivån AAA kräver 7:1 för vanlig text och 4.5:1 för stor text. UI-komponenter och grafik, som ramar runt inmatningsfält och ikoner, behöver 3:1. De flesta lagkrav utgår från AA; AAA är en frivillig, striktare nivå.
Text räknas som stor från 18pt (24px), eller från 14pt (18.66px) om den också är fet. För stor text gäller lägre minimikrav på kontrast (3:1 i stället för 4.5:1 för AA), eftersom större text är lättläst även med lägre kontrast.
Hexvärden med eller utan #, med tre eller sex tecken (#fff eller #ffffff), rgb() och rgba(), samt enkla värden som 34, 34, 34. Du kan också välja varje färg i färgväljaren. För rgba() ignoreras alfavärdet; verktyget räknar med den ogenomskinliga färgen. En ogiltig inmatning markeras tills värdet är giltigt igen.
Om din kombination inte uppfyller AA för vanlig text (4.5:1) kan verktyget med ett klick föreslå den närmaste färgen som når värdet. Det ändrar bara ljusstyrkan på text- eller bakgrundsfärgen, beroende på vilken som behöver justeras minst. Klicka på ”Använd” för att välja förslaget. Exempel: #777777 på #ffffff ger 4.48:1, medan förslaget #767676 når 4.54:1.
Ja. Contrast Checker lägger automatiskt till aktuell förgrunds- och bakgrundsfärg i webbadressen. Om du kopierar länken från adressfältet öppnas samma kombination. Via länkarna under förhandsvisningen kan du också skicka förgrundsfärgen till simulatorn för färgblindhet eller färgschemageneratorn.
Lagar som European Accessibility Act (EAA) och dess nationella genomföranden, eller ADA i USA, kräver att många webbplatser och appar uppfyller grundläggande tillgänglighetskrav och hänvisar vanligtvis till WCAG. Tillräcklig textkontrast är en av de saker som oftast kontrolleras. Det här verktyget ersätter inte juridisk rådgivning, men hjälper dig att själv kontrollera de tekniska kontrastvärdena i WCAG.
Fler frågor?
Kontakta supportenDitt nästa projekt behöver en pålitlig server bakom sig
En VPS från ZAP-Hosting ser till att din webbplats eller applikation finns online tillförlitligt.
Ingen konfigurering. Ingen risk. Online på några sekunder.
Letar du efter fler verktyg? Visa alla bild- och designverktyg
Föredragen källa hos Google
