WCAG 1.4.3: Kontrast (minimum)

Vad den här regeln innebär

WCAG 1.4.3 — Kontrast (minimum) är ett framgångskriterium på nivå AA under riktlinje 1.4 (Åtskiljbar) i Web Content Accessibility Guidelines 2.2. Den kräver att den visuella presentationen av text och text i bild upprätthåller en tillräcklig luminanskontrast mot sin bakgrund så att personer med måttligt nedsatt syn kan läsa innehållet utan att behöva förlita sig på kontrastförstärkande hjälpmedel.

De nödvändiga kontrastförhållandena är följande. Normal text — all text mindre än 18 punkter (ungefär 24 CSS-pixlar) eller 14 punkter fet (ungefär 18,67 CSS-pixlar) — måste uppnå ett kontrastförhållande på minst 4,5:1. Stor text, definierad som text på eller över 18 punkter normal vikt eller 14 punkter fet vikt, kräver ett minimikontrastförhållande på 3:1. Samma tröskelvärden gäller för text i bild: raster- eller vektorbaserade bilder som återger läsbara tecken måste också uppfylla dessa förhållanden i förhållande till alla angränsande bakgrundsfärger.

Kontrastförhållande beräknas med formeln för relativ luminans som definieras i WCAG-specifikationen. Relativ luminans (L) beräknas från sRGB-färgvärden efter gammakorrigering, och förhållandet uttrycks som (L1 + 0,05) / (L2 + 0,05), där L1 är det ljusare av de två luminansvärdena och L2 är det mörkare. Ett förhållande på 1:1 innebär ingen kontrast alls (identiska färger), medan 21:1 är det maximala, vilket endast uppnås av ren svart på ren vit.

Kriteriet omfattar all förgrundstext som renderas av webbläsaren, inklusive text i knappar, länkar, etiketter, formulärfält, tabellceller, verktygstips, platshållartext i inmatningsfält och text som läggs ovanpå bilder eller gradienter. Det omfattar också SVG-textelement och text som renderas via CSS-genererat innehåll (::before- och ::after-pseudo-element).

WCAG 1.4.3 definierar flera officiella undantag som uttryckligen undantas från kravet:

• Oavsiktlig text: Text eller text i bild som är rent dekorativ, inte är synlig eller utgör en del av en inaktiv (inaktiverad) användargränssnittskomponent är undantagen. Till exempel behöver den nedtonade etiketten för ett inaktiverat formulärfält inte uppfylla förhållandet.
• Logotyper: Text som är en del av en logotyp eller ett varumärkesnamn har inget minimikrav på kontrast, eftersom varumärkesidentitet ofta är beroende av specifika färgval och användare förväntas känna igen logotyper visuellt.
• Stor text: Som nämnts ovan har stor text ett mer generöst förhållande på 3:1 i stället för 4,5:1, med hänsyn till att större bokstavsformer är lättare att urskilja vid lägre kontrast.

Ett godkänt resultat uppstår när det beräknade kontrastförhållandet är lika med eller överstiger det tillämpliga tröskelvärdet för varje synlig, icke undantagen text. Ett underkänt resultat uppstår när någon synlig, icke undantagen text eller text i bild hamnar under tröskelvärdet, även om det bara är en bråkdel av en förhållandepunkt.

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. En betydande del av dessa personer — inklusive personer med nedsatt syn såsom katarakt, glaukom, makuladegeneration och diabetisk retinopati — kan fortfarande läsa text på skärm när kontrasten är tillräcklig, men har svårt eller misslyckas helt när kontrasten är dålig. Kontrast (minimum) tillgodoser direkt behoven hos denna grupp genom att fastställa en mätbar, testbar lägstanivå under vilken text blir otillgänglig.

Utöver diagnostiserad nedsatt syn uppskattas att 8% av män och 0,5% av kvinnor med nordeuropeiskt ursprung upplever någon form av färgseendedefekt (färgblindhet). Även om färgblindhet skiljer sig från låg kontrast, minskar många former av färgblindhet den upplevda luminansskillnaden mellan vissa nyanser, vilket gör otillräcklig kontrast ännu mer problematisk. En röd etikett på en grön bakgrund kan framstå som nästan enhetligt grå för någon med deuteranopi, vilket gör texten osynlig om den underliggande luminanskontrasten är otillräcklig.

Äldre vuxna drabbas oproportionerligt. Det åldrande ögat förlorar kontrastkänslighet, och pupillstorleken minskar, vilket reducerar mängden ljus som når näthinnan. En person i 70-årsåldern kan behöva avsevärt högre luminanskontrast för att uppnå samma läsbarhet som en person i 30-årsåldern, även utan en klinisk diagnos av nedsatt syn.

Föreställ dig ett konkret scenario i verkligheten: en turkisk e-handelswebbplats använder ljusgrå text (#999999) på vit bakgrund (#FFFFFF) för produktbeskrivningar och prisinformation — en vanlig designtrend som föredras för sin minimalistiska estetik. Kontrastförhållandet för denna kombination är ungefär 2,85:1, långt under tröskelvärdet 4,5:1. En användare med tidig makuladegeneration kan vara helt oförmögen att läsa priset på en produkt, vilket tvingar hen att avbryta köpet. Detta utesluter inte bara en användare från en grundläggande kommersiell transaktion, utan innebär också en direkt intäktsförlust för handlaren och en juridisk risk i jurisdiktioner som kräver efterlevnad av tillgänglighetskrav.

Ur ett användbarhets- och SEO-perspektiv gynnar text med hög kontrast alla användare i utmanande miljöer: starkt solljus på en mobilskärm, lågkvalitativa bildskärmar eller helt enkelt en användare som inte har kalibrerat sin monitor. Tillgängliga färgval minskar ansträngningen för ögonen hos seende användare under längre läsperioder, och förbättrad läsbarhet korrelerar med lägre avvisningsfrekvens och längre tid på sidan — signaler som sökmotorer använder som kvalitetsindikatorer.

Relaterade Axe-core-regler

• color-contrast: Detta är den primära automatiserade regeln som upprätthåller WCAG 1.4.3 på nivå AA. Motorn axe-core beräknar förgrunds- och bakgrundsfärgerna för varje textnod i DOM:en, med hänsyn till CSS-kaskad, opacitet, z-index-stapling och alfatransparens. Den flaggar alla textelement vars kontrastförhållande hamnar under 4,5:1 för normal text eller 3:1 för stor text. Regeln rapporterar det faktiska förhållandet som hittats, det nödvändiga förhållandet och det specifika element som misslyckades, vilket gör åtgärdandet enkelt. Axe-core kan dock bara analysera färger som den kan fastställa från beräknade stilar; text som renderas inuti <canvas>, över komplexa CSS-gradienter eller ovanpå bakgrundsbilder kanske inte kan lösas fullt ut utan ytterligare kontext, och axe markerar dessa fall som ”needs review” i stället för ett definitivt godkänt eller underkänt. Platshållartext i formulärfält kontrolleras också av denna regel.
• color-contrast-enhanced: Denna regel upprätthåller de striktare tröskelvärdena i WCAG 1.4.6 — Kontrast (förbättrad) på 7:1 för normal text och 4,5:1 för stor text (nivå AAA). Även om 1.4.6 inte krävs för AA-överensstämmelse är det värdefullt att köra denna regel under utveckling för team som siktar på förbättrad tillgänglighet eller förbereder sig för regulatoriska miljöer som kan anta AAA-krav. Axe-core rapporterar överträdelser av denna regel separat så att team kan prioritera AA-fel (color-contrast) kontra mer ambitiösa AAA-förbättringar (color-contrast-enhanced).

Manuell testning krävs i flera scenarier som automatiserade verktyg inte kan lösa fullt ut. När text läggs ovanpå en bakgrundsbild eller CSS-gradient varierar den effektiva bakgrundsfärgen över textens begränsningsruta. Automatiserade verktyg måste antingen sampla den dominerande färgen, anta det sämsta området eller överlåta till en manuell granskare. På samma sätt renderas text inuti <canvas>-element som pixlar utan semantisk färginformation tillgänglig för tillgänglighetsträdet, så manuell inspektion med pipettverktyg är det enda tillförlitliga tillvägagångssättet. Text som endast visas vid :hover- eller :focus-tillstånd kan också kräva manuell interaktion för att triggas innan automatiserade verktyg kan utvärdera den.

Hur man testar

1. Automatisk skanning med axe DevTools: Installera webbläsartillägget axe DevTools (tillgängligt för Chrome, Firefox och Edge). Navigera till sidan som ska testas, öppna tilläggspanelen och kör en fullständig sidanalys. I resultatpanelen filtrerar du på regel-ID:na color-contrast och color-contrast-enhanced. För varje överträdelse markerar verktyget det felande elementet, rapporterar det faktiska kontrastförhållandet (t.ex. ”2,85:1”), det nödvändiga förhållandet (t.ex. ”4,5:1”) och de beräknade förgrunds- och bakgrundsfärgerna i hex. Exportera resultaten som CSV eller JSON för uppföljning. Upprepa på alla brytpunkter, eftersom responsiva layouter kan ändra teckenstorlekar (vilket påverkar tröskeln för stor text) eller byta färgscheman.
2. Lighthouse-granskning: Öppna Chrome DevTools, navigera till Lighthouse-fliken, välj ”Accessibility” och kör granskningen. Lighthouse visar kontrastöverträdelser i sin Accessibility-sektion med elementreferenser. Observera att Lighthouse använder en äldre version av axe-core i vissa miljöer; axe DevTools direkt kan hitta fler problem.
3. Manuell kontrastmätning: Använd webbläsarens inbyggda färgväljare i DevTools eller ett dedikerat verktyg som WebAIM Contrast Checker (webaim.org/resources/contrastchecker/) eller skrivbordsapplikationen TPGi Colour Contrast Analyser. Välj förgrunds- och bakgrundsfärger med pipetten och verifiera att det rapporterade förhållandet uppfyller tröskeln. För text på gradienter eller bilder, sampla flera punkter över textområdet och använd den lägsta kontrastmätningen som det definitiva värdet.
4. Testning av interaktiva tillstånd: Utlös manuellt :hover-, :focus-, :active- och :visited-tillstånd på länkar och interaktiva element och mät sedan kontrasten för varje tillstånd separat. Vissa designer använder färger med lägre kontrast vid hover som oavsiktligt misslyckas. Använd webbläsarens DevTools-funktion ”Force element state” för att hålla ett tillstånd medan du mäter.
5. Granskning med skärmläsare och tangentbord (kontextuell): Även om kontrast är ett visuellt kriterium och inte kan upptäckas direkt av skärmläsare, bekräftar testning med NVDA + Firefox, VoiceOver + Safari eller JAWS + Chrome att text finns i tillgänglighetsträdet och inte är dold via CSS-tekniker (såsom color: transparent) som skulle göra den visuellt otillgänglig. Om en skärmläsare läser upp text som verkar osynlig på skärmen, undersök om den visuella renderingen uppfyller kontrastkraven för seende användare.
6. Zoom och teckenskalning: Öka webbläsarens standardteckenstorlek (Inställningar → Utseende → Teckenstorlek) och zooma till 200%. Verifiera att text som övergår från ”normal” till ”stor” vid dessa storlekar fortfarande uppfyller den relevanta tröskeln. Ett typsnitt som är 14px vid standardzoom kan bli 28px vid 200% zoom, vilket ändrar vilken tröskel som gäller.

Hur man åtgärdar

Brödtext med otillräcklig kontrast — Felaktig

<!-- Light gray text on white background: contrast ratio ~2.85:1 -->
<style>
  p.description {
    color: #999999;
    background-color: #ffffff;
    font-size: 16px;
  }
</style>
<p class='description'>This product is handcrafted from premium materials.</p>

Brödtext med otillräcklig kontrast — Korrekt

<!-- Darkened text color achieves 7:1 contrast ratio, exceeding 4.5:1 AA requirement -->
<style>
  p.description {
    color: #595959; /* contrast ratio 7.0:1 against #ffffff */
    background-color: #ffffff;
    font-size: 16px;
  }
</style>
<p class='description'>This product is handcrafted from premium materials.</p>

Call-to-action-knapp med låg kontrast — Felaktig

<!-- White text on a light blue button: contrast ratio ~2.5:1 -->
<style>
  .btn-primary {
    background-color: #6eb5ff;
    color: #ffffff;
    font-size: 16px;
    padding: 12px 24px;
    border: none;
    border-radius: 4px;
  }
</style>
<button class='btn-primary'>Add to Cart</button>

Call-to-action-knapp med låg kontrast — Korrekt

<!-- Darker blue background raises contrast to 4.56:1 against white text -->
<style>
  .btn-primary {
    background-color: #0057b8; /* contrast ratio 4.56:1 against #ffffff */
    color: #ffffff;
    font-size: 16px;
    padding: 12px 24px;
    border: none;
    border-radius: 4px;
  }
</style>
<button class='btn-primary'>Add to Cart</button>

Platshållartext i formulärfält — Felaktig

<!-- Default browser placeholder is often ~#757575 or lighter; some resets make it worse -->
<style>
  input::placeholder {
    color: #bbbbbb; /* contrast ratio ~1.6:1 against white background */
  }
  input {
    background-color: #ffffff;
    font-size: 16px;
  }
</style>
<input type='email' placeholder='Enter your email address' />

Platshållartext i formulärfält — Korrekt

<!-- #767676 achieves exactly 4.54:1 against white — the practical AA floor for normal text -->
<style>
  input::placeholder {
    color: #767676; /* contrast ratio 4.54:1 against #ffffff — passes AA */
  }
  input {
    background-color: #ffffff;
    font-size: 16px;
  }
</style>
<input type='email' placeholder='Enter your email address' />

Text på en bakgrundsbild eller gradient — Felaktig

<!-- Dark text directly on a light-to-dark gradient: passes in some regions, fails in others -->
<style>
  .hero {
    background: linear-gradient(to right, #ffffff, #0057b8);
    padding: 40px;
  }
  .hero h1 {
    color: #333333;
    font-size: 32px;
  }
</style>
<section class='hero'>
  <h1>Welcome to Our Store</h1>
</section>

Text på en bakgrundsbild eller gradient — Korrekt

<!-- A semi-transparent dark scrim behind the text ensures consistent contrast regardless of gradient -->
<style>
  .hero {
    background: linear-gradient(to right, #ffffff, #0057b8);
    padding: 40px;
    position: relative;
  }
  .hero-content {
    background-color: rgba(0, 0, 0, 0.65); /* dark scrim guarantees contrast */
    padding: 16px 24px;
    display: inline-block;
    border-radius: 4px;
  }
  .hero h1 {
    color: #ffffff; /* white on near-black scrim exceeds 4.5:1 */
    font-size: 32px;
    margin: 0;
  }
</style>
<section class='hero'>
  <div class='hero-content'>
    <h1>Welcome to Our Store</h1>
  </div>
</section>

Vanliga misstag

• Att anta att en färg ser bra ut på din kalibrerade monitor: Skärmar av hög kvalitet med breda färgomfång och hög ljusstyrka kan få kombinationer med låg kontrast att verka läsbara för designers med normal syn i en kontrollerad miljö, medan samma text är oläslig på en billig bärbar dator eller under lysrörsbelysning på kontor. Verifiera alltid med ett verktyg för kontrastförhållande, inte enbart med visuellt omdöme.
• Att glömma att testa interaktiva tillstånd separat: En länk kan klara 4,5:1 i sitt standardtillstånd men sjunka till 2,8:1 vid :hover när färgen ljusnar. Varje interaktivt tillstånd måste uppfylla tröskeln oberoende.
• Att behandla inaktiverade formulärfält som generellt undantagna: Undantaget gäller endast inaktiva UI-komponenter. Om ett fält visuellt är stylat som inaktiverat men fortfarande är programmatiskt aktiverat (saknar attributet disabled) är det inte undantaget och måste uppfylla kontrastkraven.
• Att använda opacitet för att tona ned text utan att ta hänsyn till den effektiva färgen: Att sätta opacity: 0.5 på mörk text blandar den i praktiken med bakgrunden och ger en ljusare sammansatt färg. Kontrastförhållandet måste beräknas mot den resulterande sammansatta färgen, inte det ursprungliga CSS-värdet. Till exempel renderas #000000 vid 50% opacitet på vitt som ungefär #808080, vilket har ett kontrastförhållande på cirka 3,9:1 — under tröskelvärdet 4,5:1 för normal text.
• Att förbise text inuti SVG-element: SVG-<text>-element som stylas med fill i stället för CSS-color omfattas fortfarande av 1.4.3. Automatiserade verktyg kan missa dessa beroende på hur SVG:n bäddas in (inline vs. <img> vs. <object>). Inline-SVG är det mest tillförlitligt testbara tillvägagångssättet.
• Att felidentifiera textstorlek för undantaget för stor text: Trösklarna 18pt / 14pt fet avser den renderade storleken i användarens webbläsare, inte CSS-pixelvärdet i koden. CSS font-size: 24px motsvarar exakt 18pt (eftersom 1pt = 1,333px), men om användaren har ställt in en större standardteckenstorlek kan ett 16px-element renderas större än 18pt. Testa vid webbläsarens standardteckenstorlekar och kontrollera dina storleksberäkningar noggrant.
• Att enbart förlita sig på färg för att skilja länkad text från brödtext: Om en länk stylas utan understrykning och endast använder färg för att skilja den från omgivande text, måste länkfärgen uppnå 3:1 mot brödtextens färg utöver 4,5:1 mot sidans bakgrund. Många designer misslyckas med ett eller båda av dessa krav. Att lägga till understrykningar (eller en annan visuell indikator som inte är färg) är det säkrare tillvägagångssättet.
• Att ignorera text i tredjepartswidgets och chattplugins: Inbäddade widgets — livechattfönster, cookie-samtyckesbanners, recensionskaruseller, flöden från sociala medier — är en del av sidan och omfattas av WCAG 1.4.3. Text med låg kontrast i en tredjepartswidget är ett fel även om din egen kodbas är helt kompatibel.
• Att inte testa på nytt efter att mörkt läge eller högkontrastläge har aktiverats: Ett färgschema som klarar kraven i ljust läge kan misslyckas i mörkt läge om CSS-variabler inte hanteras noggrant. På samma sätt åsidosätter Windows High Contrast Mode många CSS-färgdeklarationer; verifiera att text förblir läsbar och att ingen anpassad CSS oavsiktligt återinför par med låg kontrast i miljöer med tvingade färger.
• Att använda CSS background-clip: text eller gradienttexttekniker utan reservlösning: Gradientfylld text skapad via -webkit-background-clip: text; color: transparent innebär en komplex kontrastutmaning eftersom textfärgen varierar över glyfen. Automatiserade verktyg kan vanligtvis inte lösa detta, och den faktiska luminansen för varje del av bokstavsformen måste manuellt verifieras mot sidans bakgrund.

Relation till Turkiets tillgänglighetsreglering

Turkiets presidentcirkulär nr 2025/10, publicerat i den officiella tidningen (Resmî Gazete) nr 32933 den 21 juni 2025, fastställer ett bindande nationellt ramverk för digital tillgänglighet. Cirkuläret kräver överensstämmelse med internationellt erkända standarder för webbtillgänglighet — vilket i praktiken anpassar turkiska regulatoriska krav till WCAG 2.2 — och introducerar Erişilebilirlik Logosu (tillgänglighetslogotypen), utfärdad av Aile ve Sosyal Hizmetler Bakanlığı (familje- och socialdepartementet), som den officiella certifieringsmärkningen för digitala produkter och tjänster som uppfyller kraven.

WCAG 1.4.3 — Kontrast (minimum) är ett framgångskriterium på nivå AA, och överensstämmelse på nivå AA är baslinjen som krävs för att kvalificera sig för tillgänglighetslogotypen. Detta innebär att alla aktörer som eftersträvar logotypen måste säkerställa att all synlig, icke undantagen text och text i bild på deras webbplatser och applikationer uppfyller kontrasttrösklarna 4,5:1 (normal text) och 3:1 (stor text) som definieras av detta kriterium. Underlåtenhet att uppfylla 1.4.3 är en av de vanligast upptäckta automatiserade överträdelserna och skulle utgöra ett direkt hinder för certifiering.

Cirkuläret gäller för ett brett spektrum av privata och offentliga aktörer. Omfattade aktörer inkluderar offentliga institutioner och myndigheter på central och lokal nivå; banker och finansiella institutioner som regleras av Bankacılık Düzenleme ve Denetleme Kurumu (BDDK); sjukhus och vårdgivare, både offentliga och privata; telekomoperatörer med 200,000 eller fler abonnenter; e-handelsplattformar som uppfyller tillämpliga trösklar för intäkter eller transaktionsvolym; resebyråer; privata transportföretag; och privata skolor och utbildningsinstitutioner som auktoriserats av Millî Eğitim Bakanlığı (MEB).

För dessa aktörer är åtgärdande av kontrastöverensstämmelse inte bara en rekommendation om bästa praxis — det har regulatorisk tyngd. Icke-kompatibla organisationer riskerar administrativ granskning och skada på sitt rykte, medan kompatibla organisationer kan visa Erişilebilirlik Logosu som en förtroendesignal till de ungefär 8,5 miljoner personer med funktionsnedsättning i Turkiet, liksom till äldre användare, mobilanvändare och allmänheten i stort som gynnas av läsbar design med hög kontrast.

Organisationer som är verksamma i Turkiet och som ännu inte har genomfört en granskning enligt WCAG 1.4.3 bör prioritera automatiserad skanning av alla publika digitala kontaktpunkter — webb, mobil webb och inhemska applikationer där så är tillämpligt — följt av manuell granskning av gradientbakgrunder, bildöverlägg och inbäddade tredjepartskomponenter. Att etablera ett designtokensystem med förgodkända, kontrastverifierade färgpar är den mest skalbara långsiktiga lösningen, vilket säkerställer att nya UI-komponenter ärver tillgängliga färgkombinationer som standard och att framtida omdesign inte oavsiktligt introducerar kontrastfel.