# 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. ## 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. ## Vanliga frågor ### 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](https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum) - [W3C: Förklaring av framgångskriterium 1.4.6 Kontrast (förbättrad)](https://www.w3.org/WAI/WCAG22/Understanding/contrast-enhanced) - [W3C: Förklaring av framgångskriterium 1.4.11 Kontrast för icke-textuellt innehåll](https://www.w3.org/WAI/WCAG22/Understanding/non-text-contrast) - [W3C: Definitionen av relativ luminans i WCAG 2.2](https://www.w3.org/TR/WCAG22/#dfn-relative-luminance) - [Deque: axe-cores regel color-contrast](https://dequeuniversity.com/rules/axe/4.13/color-contrast) - [WebAIM: The WebAIM Million (2026)](https://webaim.org/projects/million/)