WCAG 1.4.6: Kontrast (förbättrad)

Vad den här regeln innebär

WCAG 1.4.6 Kontrast (förstärkt) är ett framgångskriterium på nivå AAA under riktlinje 1.4 (Åtskiljbar). Det kräver att den visuella presentationen av text och text i bilder har en kontrastkvot på minst 7:1 mot sin bakgrund. För stor text – definierad som minst 18pt (ungefär 24px) för normal vikt, eller minst 14pt (ungefär 18,67px) för fet stil – är den nödvändiga kontrastkvoten minst 4,5:1. Detta är ett betydande steg upp från kriterium 1.4.3 på nivå AA, som endast kräver 4,5:1 för normal text och 3:1 för stor text.

Kontrastkvoten beräknas med hjälp av den relativa luminansen hos de två färgerna som är inblandade, enligt definitionen i WCAG-specifikationen. Formeln tar hänsyn till de linjäriserade RGB-värdena för förgrunds- och bakgrundsfärgerna för att producera en kvot som sträcker sig från 1:1 (ingen kontrast, identiska färger) till 21:1 (maximal kontrast, svart på vitt eller vitt på svart).

Detta kriterium gäller all renderad text i gränssnittet, inklusive text i bilder, ikoner som innehåller text och text som renderas i canvas-element där den renderade utdata är tillgänglig. Det påverkar rubriker, brödtext, etiketter, platshållartext i formulärfält när den förmedlar meningsfull information, knappetiketter, länktext, navigationsobjekt och allt annat textinnehåll som är synligt på skärmen.

WCAG 1.4.6 delar samma officiella undantag som kriterium 1.4.3. Följande är uttryckligen undantagna från kravet:

• Oavsiktlig text: Text eller text i bilder som är rent dekorativ, som inte är synlig för någon, eller som är en del av en bild som innehåller annat betydande visuellt innehåll. Ett exempel skulle vara text som syns i bakgrunden av ett fotografi som används som dekoration.
• Logotyper: Text som är en del av en logotyp eller ett varumärkesnamn har inget kontrastkrav. Detta gäller endast ordmärkesdelen av ett företags logotyp, inte intilliggande brödtext eller UI-etiketter.
• Inaktiva användargränssnittskomponenter: Text i inaktiverade formulärkontroller, inaktiverade knappar eller andra gränssnittselement som för närvarande inte är användbara är undantagna. Detta undantag bör dock tillämpas sparsamt – inaktivt UI bör fortfarande vara tillräckligt uppfattbart för att kommunicera sin existens.

Ett godkänt resultat enligt detta kriterium innebär att varje förekomst av textinnehåll som inte uttryckligen är undantagen uppfyller eller överstiger kvoten 7:1 (eller 4,5:1 för stor text). Ett underkänt resultat uppstår när någon icke-undantagen text hamnar under dessa trösklar, även med en liten marginal. Kontrasten måste hålla i alla stödda tillstånd – hover, fokus, aktivt, besökt – eftersom kriteriet gäller den renderade presentationen i vart och ett av dessa tillstånd.

Varför det är viktigt

Ungefär 2,2 miljarder människor världen över lever med någon form av synnedsättning, enligt Världshälsoorganisationen. Av dessa upplever hundratals miljoner tillstånd som direkt minskar förmågan att skilja mellan färger eller uppfatta text med låg kontrast, inklusive grå starr, glaukom, makuladegeneration och olika former av färgseendedefekter. För denna grupp kan gränssnitt som endast uppfyller AA-kontrasttröskeln på 4,5:1 fortfarande utgöra betydande hinder för läsning och förståelse.

Kvoten 7:1 som krävs av detta kriterium är specifikt kalibrerad för att ta hänsyn till den kontrastkänslighetsförlust som är förknippad med åldrande ögon och vanliga synnedsättningar. Forskning inom synvetenskap visar att en person med måttligt nedsatt kontrastkänslighet – ungefär motsvarande en person med 20/80-syn med korrigerande linser – kan uppleva en effektiv kontrastreduktion på ungefär tre till ett. En designkvot på 7:1 ger, efter denna perceptuella reduktion, fortfarande ungefär 2,3:1 upplevd kontrast, vilket ligger nära den minsta tröskel där text blir läsbar. Utan denna marginal kan sådana användare vara helt oförmögna att läsa innehållet.

Föreställ dig ett scenario i verkligheten: en 68-årig bankkund som sköter sin ekonomi online en ljus eftermiddag, med solljus som reflekteras på laptopskärmen. Även med fullt fungerande syn i klinisk mening kan bländning och den naturliga minskningen av kontrastkänslighet som följer med åldrandet göra mellangrå text på vit bakgrund helt oläslig. En design som uppnår 7:1-kontrast under normala förhållanden kommer fortfarande att vara användbar i detta sammanhang; en som knappt klarar 4,5:1 kommer inte att vara det.

Utöver den funktionsnedsättningsspecifika påverkan gynnar text med hög kontrast i praktiken alla användare i suboptimala läsmiljöer: starkt solljus utomhus, slitna skärmar med reducerad bakgrundsbelysning, monokroma e-ink-skärmar och lågkvalitativa projektorer i mötesrum. Kravet på förstärkt kontrast representerar därför inte bara en förbättring av tillgängligheten utan också en bred användbarhetsförbättring.

Ur ett sökmotoroptimeringsperspektiv tenderar text med hög kontrast att korrelera med renare, mer strukturerade typografiska hierarkier. Även om sökmotorer inte direkt mäter kontrast, leder den designdisciplin som krävs för att uppfylla AAA-kontraststandarder typiskt till sidor med starkare visuell hierarki och bättre läsbarhetsbetyg, vilket bidrar till lägre avvisningsfrekvens och längre vistelsetid – signaler som indirekt gynnar SEO-prestanda.

Relaterade Axe-core-regler

• color-contrast-enhanced: Detta är den primära axe-core-regeln som är kopplad till WCAG 1.4.6. Den utvärderar de beräknade förgrunds- och bakgrundsfärgerna för alla textnoder i DOM:en och beräknar deras kontrastkvot med hjälp av WCAG:s luminansformel. Regeln flaggar alla textelement där kontrastkvoten faller under 7:1 för normalstor text eller under 4,5:1 för stor text (enligt beräknad font-size och font-weight). Den rapporterar den faktiska kvoten som hittats, den nödvändiga kvoten och det ansvariga elementet, vilket gör åtgärdandet okomplicerat. Regeln skiljer mellan normal och stor text med samma storlekströsklar som WCAG definierar: 18pt (24px) för normal vikt och 14pt (18,67px) för fet stil.
• Begränsningar som kräver manuell testning: Automatiserade regler som color-contrast-enhanced kan inte upptäcka kontrastfel i flera viktiga scenarier. Text som renderas inuti <canvas>-element är osynlig för den DOM-baserade skannern och kräver manuell visuell inspektion. Text som läggs ovanpå gradient- eller fotografiska bakgrunder utgör en särskilt svår utmaning: kontrastkvoten varierar över texten beroende på vilken del av gradienten eller bilden som hamnar bakom varje bokstav. Automatiserade verktyg samplar vanligtvis en enda bakgrundsfärg eller rapporterar oklara resultat i dessa fall. Text som ändrar färg vid hover eller fokus måste också testas manuellt i varje interaktivt tillstånd, eftersom automatiska skanningar vanligtvis bara fångar det standardrenderade tillståndet. Dessutom kan text vars kontrast beror på CSS-anpassade egenskaper som löses vid körning via JavaScript vara omöjlig att utvärdera under en statisk skanning.

Hur man testar

1. Automatisk skanning med axe DevTools: Installera webbläsartillägget axe DevTools (Chrome eller Firefox). Öppna målsidan, aktivera tillägget och kör en helsidesskanning. I resultatpanelen filtrerar du efter regel-ID:t color-contrast-enhanced eller söker efter ”enhanced” i listan över problem. För varje flaggat element visar panelen elementet, den faktiska kontrastkvoten och den nödvändiga kvoten. Notera alla element som rapporteras som ”behöver granskning” snarare än ett definitivt godkänt eller underkänt resultat – dessa involverar vanligtvis beräknade bakgrunder som inte kunde lösas och kräver manuell verifiering.
2. Automatisk skanning med Lighthouse: Öppna Chrome DevTools, navigera till Lighthouse-fliken och kör en tillgänglighetsgranskning. Lighthouse använder axe-core internt, så det kommer att visa samma color-contrast-enhanced-överträdelser. Rapporten grupperar dem under Accessibility och länkar till varje underkänt element. Var medveten om att Lighthouse granskar sidan i dess standardtillstånd och inte testar interaktiva tillstånd som hover eller fokus.
3. Manuell färgsampling: Använd webbläsarens färgväljare i utvecklarverktygen eller ett dedikerat verktyg som Colour Contrast Analyser (TPGi) för att manuellt sampla förgrunds- och bakgrundsfärgerna för textelement. Detta är särskilt viktigt för text över bilder, gradienter eller semitransparenta bakgrunder. Sampla flera punkter längs texten där bakgrunden varierar och kontrollera att den minsta kontrastkvoten över alla samplade punkter uppfyller 7:1 för normal text eller 4,5:1 för stor text.
4. Testa interaktiva tillstånd: Använd webbläsarens utvecklarverktyg för att tvinga element in i deras hover-, fokus-, aktiva och besökta tillstånd (via :hov-panelen i Chrome DevTools eller motsvarande). Kör om kontrastkontrollen i varje tillstånd för att säkerställa att färgändringar som tillämpas via CSS-pseudoklasser inte introducerar kontrastfel. Var särskilt uppmärksam på länkars besökta tillstånd, knappens hover-tillstånd och fokusindikatorer för formulärfält.
5. Verifiering med skärmläsare (NVDA + Firefox): Även om skärmläsare inte direkt testar kontrast, bekräftar verifiering av att text är tillgänglig för NVDA att det är riktig text i DOM:en (inte en bild av text utan alternativ). Starta Firefox, öppna NVDA och bläddra på sidan med läskursorn. All text som NVDA inte kan läsa bör undersökas för att avgöra om det är en bild av text som kräver kontrasttestning på bildnivå.
6. Verifiering med skärmläsare (VoiceOver + Safari på macOS): Aktivera VoiceOver med Command+F5 och navigera på sidan med VO+Högerpil. Precis som med NVDA kan text som VoiceOver hoppar över eller läser felaktigt indikera icke-standardiserad textrendering som kräver manuell kontrastinspektion.
7. Gråskalessimulering: Aktivera gråskaleläge via operativsystemets tillgänglighetsinställningar (tillgängligt på Windows, macOS, iOS och Android). Detta tar bort all färginformation och gör kontrastskillnader omedelbart synliga. Text som blir svår att läsa i gråskaleläge misslyckas nästan säkert med kravet på förstärkt kontrast.

Hur man åtgärdar

Brödtext på ljus bakgrund — felaktig

<!-- Fails 1.4.6: #767676 on #ffffff yields approximately 4.54:1,
     which passes AA (1.4.3) but falls far short of the 7:1 AAA requirement -->
<p style='color: #767676; background-color: #ffffff;'>
  Please review our terms and conditions before proceeding.
</p>

Brödtext på ljus bakgrund — korrekt

<!-- Passes 1.4.6: #595959 on #ffffff yields approximately 7.0:1,
     meeting the enhanced contrast requirement for normal-weight body text -->
<p style='color: #595959; background-color: #ffffff;'>
  Please review our terms and conditions before proceeding.
</p>

Färgad rubrik på profilerad bakgrund — felaktig

<!-- Fails 1.4.6: brand blue #4A90D9 on white #ffffff yields approximately 3.0:1.
     Even though this is a heading and may appear large, bold headings at
     common web sizes (e.g. 20px bold) may not qualify as WCAG "large text"
     depending on rendering, and 3.0:1 fails even the large-text 4.5:1 threshold -->
<h2 style='color: #4A90D9; background-color: #ffffff;'>
  Welcome to Our Services
</h2>

Färgad rubrik på profilerad bakgrund — korrekt

<!-- Passes 1.4.6: dark navy #1A3A5C on white #ffffff yields approximately 12.6:1.
     Exceeds the 7:1 requirement for normal text and comfortably surpasses
     the 4.5:1 large-text requirement. Brand identity is preserved through
     the use of a darker shade within the same hue family. -->
<h2 style='color: #1A3A5C; background-color: #ffffff;'>
  Welcome to Our Services
</h2>

Text över en gradientbakgrund — felaktig

<!-- Fails 1.4.6: The gradient transitions from a dark color that provides
     adequate contrast on the left to a light color that provides insufficient
     contrast on the right. Text spanning the full width will fail at some point. -->
<div style='background: linear-gradient(to right, #1a1a1a, #cccccc); padding: 20px;'>
  <p style='color: #ffffff;'>Create your account today and get started.</p>
</div>

Text över en gradientbakgrund — korrekt

<!-- Passes 1.4.6: A semi-transparent dark overlay behind the text ensures
     that foreground text maintains at least 7:1 contrast regardless of
     the underlying gradient value at any point beneath the text block. -->
<div style='background: linear-gradient(to right, #1a1a1a, #cccccc); padding: 20px;'>
  <p style='color: #ffffff; background-color: rgba(0,0,0,0.75); padding: 8px 12px; display: inline-block;'>
    Create your account today and get started.
  </p>
</div>

Platshållartext i formulärfält — felaktig

<!-- Fails 1.4.6: default browser placeholder styling is typically around
     #aaaaaa on white, yielding approximately 2.32:1. If placeholder text
     conveys meaningful information (e.g. format hints), it must meet contrast requirements. -->
<input type='text' placeholder='DD/MM/YYYY' style='background: #ffffff;'>

Platshållartext i formulärfält — korrekt

<!-- Passes 1.4.6: Override the default placeholder color to achieve 7:1 contrast.
     Also adds a visible label as best practice, since placeholders disappear on input. -->
<label for='dob'>Date of Birth</label>
<input type='text' id='dob' placeholder='DD/MM/YYYY'
  style='background: #ffffff; color: #000000;'>
<style>
  input::placeholder {
    color: #595959; /* approximately 7.0:1 on white — meets AAA */
  }
</style>

Vanliga misstag

• Att enbart förlita sig på färgkombinationer som klarar AA utan att kontrollera AAA-trösklar: Många designers använder den vanliga mellangrå #767676 på vitt, som klarar 1.4.3 med ungefär 4,54:1 men misslyckas med 1.4.6 med god marginal. Verifiera alltid mot målet 7:1, inte bara 4,5:1.
• Att anta att undantag för stor text tillämpas alltför brett: Undantaget för stor text (4,5:1 istället för 7:1) gäller endast text som är minst 18pt (24px) i normal vikt eller minst 14pt (18,67px) i fet stil. Text i 20px normal vikt kvalificerar inte och måste fortfarande uppfylla 7:1.
• Att ignorera kontrast i interaktiva tillstånd: Att tillämpa en ljusare färg vid hover för att skapa en visuell affordans utan att kontrollera om hovrat tillstånd fortfarande uppfyller 7:1. Till exempel kan det fortfarande godkännas att göra en knappbakgrund mörkare vid hover medan vit text behålls, men att göra texten ljusare vid hover orsakar ofta fel.
• Att förbise kedjor av CSS-anpassade egenskaper: Att definiera en textfärg som var(--color-primary) där --color-primary är satt globalt men åsidosätts lokalt i komponentens scope utan att kontrasten verifieras på nytt. Den effektiva renderade färgen kan skilja sig från det globala tokenvärdet och ge en underkänd kvot i specifika komponentkontexter.
• Att behandla undantaget för inaktiverat tillstånd som en designlicens: Att använda undantaget för inaktivt UI som motivering för att utforma inaktiverade element med 1:1-kontrast (osynlig text), vilket gör att användare inte kan veta att ett fält överhuvudtaget finns. Inaktiverade element bör fortfarande vara visuellt uppfattbara även om de är undantagna från kravet 7:1.
• Att inte testa text som renderas över bilder eller video: Att placera text direkt över en hero-bild eller videobakgrund och bara kontrollera kontrast mot den genomsnittliga färgen istället för den ljusaste delen av bilden som texten passerar över. Den minsta kontrasten måste hålla över varje pixel under texten, inte i genomsnitt.
• Att bara tillämpa kontrastfixar på desktop-brytpunkter: Responsiva designer som använder olika bakgrundsfärger vid mobila brytpunkter – till exempel att byta från en vit desktopbakgrund till en ljus beige kortbakgrund – kan introducera nya kontrastfel på mindre skärmstorlekar som inte fanns under testning på desktop.
• Att glömma textkontrast för fokusindikatorer: När en anpassad fokusring eller ett fokustillstånd ändrar både bakgrunds- och textfärg för ett fokuserat element måste den nya kombinationen text–bakgrund i fokustillståndet självständigt uppfylla kvoten 7:1, oavsett vad standardtillståndet uppnår.
• Att anta att logoundantaget sträcker sig till intilliggande beskrivande text: Att placera en tagline eller produktbeskrivning i samma typografiska block som en varumärkeslogotyp och hävda logoundantaget för hela blocket. Undantaget gäller strikt text som är en integrerad del av själva logotypen, inte någon närliggande text.
• Att inte validera kontrast efter åsidosättningar i CSS-ramverk: Att importera ett tredjepartskomponentbibliotek eller CSS-ramverk som återställer eller åsidosätter textfärger med värden under 7:1 och sedan leverera dessa standardvärden utan granskning. Ramverksstandarder är nästan aldrig kalibrerade för AAA-kontraststandarder.

Relation till Turkiets tillgänglighetsreglering

Turkiets presidentcirkulär 2025/10, publicerat i Officiella tidningen nr 32933 den 21 juni 2025, fastställer obligatoriska krav på digital tillgänglighet för ett brett spektrum av institutioner och organisationer som är verksamma i Turkiet. Cirkuläret föreskriver överensstämmelse med WCAG 2.2 på nivå AA som grundläggande standard. De typer av aktörer som omfattas inkluderar offentliga institutioner och myndigheter, e-handelsplattformar, banker och finansiella tjänsteleverantörer, sjukhus och vårdorganisationer, telekommunikationsföretag med 200 000 eller fler abonnenter, resebyråer, privata transportföretag och privatskolor som auktoriserats av Ministry of National Education (MoNE).

WCAG 1.4.6 Kontrast (förstärkt) är ett kriterium på nivå AAA och är därför inte ett obligatoriskt krav enligt presidentcirkuläret. Organisationer som endast uppnår överensstämmelse på nivå AA – den lagstadgade grundnivån – kommer inte att bryta mot cirkuläret genom att utelämna kravet på förstärkt kontrast 7:1, förutsatt att de uppfyller AA-tröskeln 4,5:1 för normal text som definieras i kriterium 1.4.3.

Att uppnå AAA-överensstämmelse för kontrast representerar dock ett meningsfullt åtagande för inkluderande design som går långt utöver minimal juridisk efterlevnad. För offentliga institutioner, som har den bredaste skyldigheten att betjäna alla medborgare oavsett funktionsnedsättning, signalerar ett frivilligt antagande av standarden för förstärkt kontrast en genuin hängivenhet till universell tillgång. Vårdinrättningar och sjukhus – sektorer där patienter redan kan vara under fysisk eller kognitiv stress, eller kan interagera med digitala system under utmanande förhållanden som stark klinisk belysning – har ett särskilt starkt praktiskt skäl att överskrida den minsta kontrasttröskeln. På samma sätt är banker och finansiella tjänsteleverantörer vars kunder i allt högre grad inkluderar äldre användare väl positionerade att dra nytta av den trovärdighet och det användarförtroende som AAA-kontrastöverensstämmelse kommunicerar.

Organisationer som strävar efter ISO 30071-1-certifiering, europeisk EN 301 549-anpassning eller någon internationell upphandlingsprocess som utvärderar tillgänglighetsmognad kommer att upptäcka att överensstämmelse med kontrast på nivå AAA stärker deras position. I takt med att tillsynen av digital tillgänglighet mognar globalt och specifikt i Turkiet har kriterier som för närvarande ligger på nivå AAA historiskt migrerat mot obligatorisk status i efterföljande regulatoriska uppdateringar. Att anta förstärkt kontrast nu placerar organisationer före sannolika framtida krav och minskar kostnaden för eventuell framtida åtgärd.

För organisationer som använder Accsible overlay SDK kan plattformens verktyg för kontrastjustering hjälpa användare att tillämpa högkontrastlägen på widgetnivå, vilket ger ett kompenserande lager som hjälper till att överbrygga gapet mellan den publicerade designens kontrastnivåer och en enskild användares behov. Detta ersätter inte att uppfylla kriteriet på källkodsnivå, men det ger meningsfullt stöd vid körning för användare som behöver förstärkt kontrast och besöker webbplatser som ännu inte har uppnått full AAA-överensstämmelse.