Gratisverktyg: Tillgänglighet
Kontroll av färgkontrast
Jämför en textfärg med en bakgrundsfärg mot WCAG 2.2 direkt här, eller ange en sidadress för att hitta all text under kontrastminimum, med de uppmätta färgerna och den närmaste färgen som klarar kravet.
Kontrastkalkylator
Ange en textfärg och en bakgrundsfärg. Allt beräknas i din webbläsare.
Så här ser normal text i 16 pixlar ut.
Stor text i 24 pixlar
En knappkonturKontrastförhållande4.54:1
| Normal text, AAWCAG 1.4.3, kräver 4.5:1 | Godkänt |
|---|---|
| Stor text, AAWCAG 1.4.3, kräver 3:1 | Godkänt |
| Normal text, AAAWCAG 1.4.6, kräver 7:1 | Underkänt |
| Stor text, AAAWCAG 1.4.6, kräver 4.5:1 | Godkänt |
| Ikoner, kantlinjer och formulärfältWCAG 1.4.11, kräver 3:1 | Godkänt |
Närmaste textfärger som klarar kravet på den här bakgrunden
Stor text betyder minst 24 pixlar, eller 18,66 pixlar i fetstil. Förhållandena avrundas nedåt, så 4.499:1 visas som 4.49:1 och underkänns, precis som WCAG avser.
Eller skanna en sida efter text med låg kontrast
Gratis. Kontrollerar adressen du anger på ungefär 20 sekunder.
Det här kontrollerar verktyget
WCAG-förhållandet för två valfria färger
Kalkylatorn använder formeln för relativ luminans från definitionerna i WCAG 2.2 och visar resultatet för normal text, stor text och gränssnittsdelar, på nivå AA och AAA. Den körs i din webbläsare.
En beräknad färg som klarar kravet
När ett par underkänns hittar kalkylatorn den närmaste textfärgen i samma nyans som når 4.5:1 eller 7:1, så att du ändrar så lite som möjligt i din design.
All text med låg kontrast på en sida
Sidskanningen kör axe-cores regel color-contrast i en riktig Chrome-webbläsare och listar varje felande element med textfärg, bakgrundsfärg, teckenstorlek och förhållande.
Grupperat efter färgpar
Felen grupperas efter text- och bakgrundsfärg, eftersom en ändring av en temafärg oftast åtgärdar alla element som använder den.
Rätt gränsvärde för stor text
Text på minst 24 pixlar, eller 18,66 pixlar i fetstil, behöver 3:1 i stället för 4.5:1. Skanningen tillämpar rätt gränsvärde på varje element utifrån dess beräknade storlek och teckenvikt.
Vad den inte kunde mäta, och varför
Text över bilder, gradienter eller överlappande element listas separat med orsaken, så att du vet exakt vad du behöver kontrollera visuellt.
Det här kan det inte kontrollera
- Mäta text över foton, gradienter eller video. Programvara kan inte veta vilken del av en bild som ligger bakom varje bokstav, så sådana element listas för dig att kontrollera.
- Kontrollera hovrings-, fokus- eller andra lägen. Skanningen ser sidan som den laddas; kontrollera de färgerna med kalkylatorn.
- Skanna ikoner, kantlinjer och formulärfält på sidan mot WCAG 1.4.11. Kalkylatorn visar resultatet mot 3:1 för varje par du anger.
- Läsa text som är en del av en bild, till exempel en banner där orden är inbakade i bilden.
- Testa mer än den sida du anger. Den fullständiga kostnadsfria skanningen testar upp till fem viktiga sidor.
Därför spelar det roll
Låg kontrast är det vanligaste tillgänglighetsfelet på webben. WebAIM:s analys 2026 av startsidorna på de en miljon största webbplatserna hittade text med låg kontrast på 83,9 % av dem, i genomsnitt 34 förekomster per sida.
Blek text är svårläst för personer med nedsatt syn eller färgseendebrist, och för alla som använder mobilen i starkt solljus. Framgångskriterium 1.4.3 i WCAG 2.2, på nivå AA, sätter miniminivån till 4.5:1 för normal text och 3:1 för stor text.
Det är också ett av de billigaste problemen att åtgärda: på de flesta webbplatser orsakar en handfull temafärger nästan alla fel, och om du ändrar dem åtgärdas alla sidor på en gång.
Så läser du resultaten
- Kontrastförhållande
- Från 1:1 (samma färg två gånger) till 21:1 (svart på vitt). Förhållandena avrundas nedåt, så ett par som visar 4.49:1 underkänns mot miniminivån 4.5:1.
- Normal text, AA (4.5:1)
- Miniminivån för brödtext, länkar, etiketter och knapptext enligt WCAG 1.4.3.
- Stor text, AA (3:1)
- För text på minst 24 pixlar, eller 18,66 pixlar i fetstil. WCAG definierar stor text som 18 punkter, eller 14 punkter i fetstil.
- AAA (7:1 och 4.5:1)
- Den förhöjda nivån i WCAG 1.4.6. Den krävs inte för överensstämmelse med AA, men hjälper fler läsare.
- Ikoner, kantlinjer och formulärfält (3:1)
- WCAG 1.4.11 kräver 3:1 mot angränsande färger för de delar av kontroller och grafik som människor behöver se för att kunna använda dem.
- Text som underkänns
- Varje element som skanningen mätte under sitt gränsvärde, med selektor, färger, storlek och förhållande. Öppna ett element för att se dess kod och, när det finns, en skärmbild.
- Att kontrollera visuellt
- Text som axe-core inte kunde mäta, med orsaken, till exempel en bild eller gradient bakom texten.
Så åtgärdar du de vanligaste problemen
Grå text på vit bakgrund
#767676 är ungefär den ljusaste gråa färg som når 4.5:1 på vitt (4.54:1). Ljusare grått som #999999 (2.84:1) är en vanlig orsak till fel i sidfötter, bildtexter, platshållartext och priser.
Vit text på en knapp i varumärkesfärgen
Om vit text på din varumärkesfärg underkänns kan du göra knappens bakgrund några steg mörkare eller använda mörk text. Kontrollera också färgerna vid hovring och fokus, eftersom de ofta blir ljusare.
Platshållartext i formulär
Platshållartext är också text och behöver 4.5:1. Ännu bättre är en synlig etikett ovanför fältet, så att platshållaren inte är den enda instruktionen.
Text över bilder och bildspel
Lägg texten på en enfärgad eller halvgenomskinlig bakgrund, eller lägg ett mörkt lager över bilden, och kontrollera sedan den ljusaste delen av bilden som ligger bakom texten.
Reamärken och finstilt text
Text i inaktiverade kontroller är undantagen från 1.4.3, men reamärken, priser och juridisk finstilt text är det inte. Det är ofta den blekaste texten på en butiks sidor.
Frågor om verktyget
Vilket kontrastförhållande kräver WCAG?
För nivå AA 4.5:1 för normal text och 3:1 för stor text (framgångskriterium 1.4.3), och 3:1 för gränssnittskomponenter och meningsbärande grafik (1.4.11). Nivå AAA kräver 7:1 och 4.5:1 (1.4.6).
Vad räknas som stor text?
WCAG definierar stor text som minst 18 punkter, eller 14 punkter i fetstil. I CSS-pixlar är det ungefär 24px, eller 18,66px i fetstil.
Måste logotyper uppfylla kontrastminimum?
Nej. WCAG 1.4.3 undantar logotyper och text som ingår i en logotyp eller ett varumärkesnamn, liksom rent dekorativ text och text i inaktiva kontroller.
Varför listar skanningen text över en bild för granskning?
axe-core mäter enhetliga färger. När en bild, en gradient eller ett annat element ligger bakom texten kan den inte avgöra vilka färger som möts, så den rapporterar elementet för en människa att kontrollera i stället för att gissa.
Behöver jag kontrast på AAA-nivå?
AAA krävs inte för överensstämmelse med nivå AA, och W3C rekommenderar inte att man kräver AAA för hela webbplatser. Att nå 7:1 för brödtext är ändå god praxis där designen tillåter det.
Är APCA en del av WCAG?
Nej. APCA är en annan kontrastmetod som har diskuterats för WCAG 3, som fortfarande är ett utkast. Överensstämmelse mäts i dag med WCAG 2-förhållandet som det här verktyget beräknar.
Källor
- W3C: Förklaring av framgångskriterium 1.4.3 Kontrast (minimum) i WCAG 2.2(öppnas i en ny flik)
- W3C: Förklaring av framgångskriterium 1.4.6 Kontrast (förbättrad)(öppnas i en ny flik)
- W3C: Förklaring av framgångskriterium 1.4.11 Kontrast för icke-textuellt innehåll(öppnas i en ny flik)
- W3C: Definitionen av relativ luminans i WCAG 2.2(öppnas i en ny flik)
- Deque: axe-cores regel color-contrast(öppnas i en ny flik)
- WebAIM: The WebAIM Million (2026)(öppnas i en ny flik)
Relaterade verktyg
- TillgänglighetTillgänglighetstest för webbplatserTesta din webbplats mot WCAG 2.2 A och AA i en riktig webbläsare och se varje hinder med element, sida och varför det spelar roll.Öppna verktyget
- TillgänglighetKontroll av alt-text för bilderLista alla bilder på en sida med deras alt-text och se vilka som saknar den, vilka som är dekorativa och vilka som har en alt-text som inte hjälper.Öppna verktyget
- TillgänglighetWCAG 2.2-kontrollSe varje framgångskriterium i WCAG 2.2 nivå A och AA för din webbplats: underkänt, behöver granskas, inga automatiska fel eller manuell kontroll.Öppna verktyget
Behöver du åtgärderna, inte bara fynden?
Vår Tillgänglighetsrapport ($174, engångspris) utgår från den fullständiga gratisskanningen och lägger till fler sidor, ändringen som ska göras för varje fynd, en PDF och omtester för att verifiera dina åtgärder.