Bildkontrastkontroll
Ladda upp en bild, flytta texten och justera färg och storlek för att kontrollera WCAG AA/AAA-kontrast.
WCAG
AA: Godkänd
AAA: Ej godkänd
Contrast Ratio
8.42
Very good
Textstorlek
Liten text
Small text
Large text
Upp
Ner
Vänster
Höger
WCAG-konformitet för bildkontrast
Att säkerställa tillräcklig kontrast i bilder är avgörande för läsbarhet och tillgänglighet. Flera faktorer påverkar - till exempel textens kontrast mot bakgrunden och användning av överlägg.
Liten text - 4.5:1 kontrast mot bakgrunden
Vanlig text (under 24px eller 19px fetstil) över en bild måste ha minst 4.5:1 kontrastförhållande för att vara läsbar.
Detta säkerställer tydlighet även på komplexa eller texturerade bakgrunder.
Stor text - 3:1 kontrast mot bakgrunden
Större text (minst 24px eller 19px fetstil) kräver endast 3:1 kontrast eftersom storleken ökar läsbarheten.
Detta ger större flexibilitet i färgval utan att kompromissa med tillgängligheten.
Dekorativa element - Inget krav
Rent dekorativa bilder utan text har inga specifika kontrastkrav.
Men de bör inte störa läsbarheten när de placeras nära text.
Grafiska objekt - 3:1 för viktig information
Ikoner, knappar eller grafer med viktig information måste ha minst 3:1 kontrastförhållande.
Om en bild innehåller text eller nyckelobjekt måste den följa standardkontrastreglerna för tillgänglighet.
Läsbar text -
Text över bilder ska alltid vara tydlig och lättläst.
Använd överlägg klokt -
Halvgenomskinliga bakgrunder kan förbättra kontrasten.
Undvik att endast använda färg -
Förmedla inte information enbart genom färg - använd symboler eller etiketter vid behov.
Tänk på skalbarhet -
Kontrasten ska vara tillräcklig på alla skärmstorlekar och upplösningar.
Gratis tillgänglighetsscan av din webbplats
Kontrollera mer än bara kontrast - skanna din webbplats för WCAG-fel direkt.
Vanliga kontrastfel designers gör med bilder
Text utan tillräcklig kontrast blir oläslig. Använd överlägg, skuggor eller färgkombinationer för att nå 4.5:1 för liten text och 3:1 för stor text.
Överlägg kan hjälpa, men för mycket transparens gör texten svår att se. Använd en solid eller halvgenomskinlig bakgrund med tillräcklig opacitet.
Ikoner eller etiketter på bilder utan tillräcklig kontrast är svåra att urskilja. Se alltid till att viktiga element har minst 3:1-kontrast.
Att endast använda färg för att skilja element skapar problem för färgblinda användare. Kombinera alltid färg med symboler, mönster eller etiketter.
Kontraster som ser bra ut på en skärm kan vara svaga i annat ljus. Testa bilder både i ljusa och mörka miljöer för bästa resultat.
Tack för din feedback 😊
tabnavs team arbetar ständigt med att förbättra upplevelsen baserat på din feedback.
Var den här sidan hjälpsam?