BLOG · TILGÆNGELIGHED

Tekst-på-Billede Kontrasttjek
Sådan Tester Du Læsbarhed Gratis

Hero-billeder med tekst ovenpå er en af de mest almindelige tilgængelighedsfehler. Her ser du hvordan du tjekker den faktiske kontrast mellem teksten og pixels bagved — og hvad du gør, hvis den ikke består.

Opdateret august 2026 · 4 minutters læsning

Hvorfor fejler tekst på billeder så ofte?

Et foto har sjældent ens lysstyrke under hele tekstblokken. Hvid tekst kan være perfekt læselig over himlen og fuldstændig forsvinde over sneen to centimeter længere nede. WCAG måler kontrasten mod de faktiske pixels bag hvert bogstav — ikke mod gennemsnittet af billedet.

⚖️ Kravene

SC 1.4.3: 4,5:1 for normal tekst, 3:1 for stor tekst (ca. 24 px normal / 18,66 px fed). SC 1.4.11 kræver 3:1 for meningsbærende UI-dele og grafik.

🎯 Det værste sted tæller

En gradient kan bestå under halvdelen af bogstaverne og fejle under resten. Mål altid det værste tilfælde — det er dét, en bruger med dårligt syn rammer.

🔒 Dine billeder forbliver lokale

Billedet læses og analyseres i JavaScript i din egen browser via canvas-API'en. Intet uploades til nogen server.

Sådan gør du (under et minut)

  1. Åbn det gratis tekst-på-billede kontrasttjek.
  2. Træk dit billede ind — eller indsæt et screenshot fra dit design direkte fra udklipsholderen.
  3. Markér området hvor teksten står, og angiv tekstens farve.
  4. Læs resultatet: værste og gennemsnitlig kontrast i området, plus bestået/dumpet for AA og AAA. Juster designet, indtil alt er grønt.

Værktøjet læser pixels via canvas-API'en og beregner relativ luminans pr. WCAG-specifikationen — samme formel som kommercielle værktøjer bruger. Du får altså samme tal, som en auditor vil måle.

Fra ét billede til hele siden

Kontrasttjekket tester ét billede ad gangen — perfekt når du designer en hero eller et banner. Skal hele sitets kontraster tjekkes, brug den gratis Accessibility Scanner: den gennemgår al tekst på en hel URL og finder lavkontrast-tekst sammen med overskrifts-, alt-tekst-, formulær- og tastaturfejl.

TILHØRENDE VÆRKTØJER

Mere kontrast-hjælp

Kontrast-checker tester farvepar · Palette generator bygger tilgængelige paletter.

GUIDE

Læs kontrast-guiden

Guide til selve WCAG-kravene og hvordan du arbejder med dem: WCAG kontrast-checker trin for trin.

ENGELSK VERSION

Arbejder du internationalt?

Samme værktøj findes på engelsk her.

Ofte stillede spørgsmål

Hvorfor fejler tekst på billeder så ofte?

Et foto har sjældent ens lysstyrke under hele tekstblokken. Kontrasten kan være fin over de mørke partier og helt væk over de lyse. WCAG måler kontrast mod de faktiske pixels bag hvert bogstav — derfor skal man teste det værste tilfælde, ikke gennemsnittet.

Hvilken kontrast kræves der?

WCAG SC 1.4.3: mindst 4,5:1 for normal tekst og 3:1 for stor tekst (fra ca. 24 px normal eller 18,66 px fed). SC 1.4.11 kræver desuden 3:1 for meningsbærende grafik.

Er værktøjet gratis og sikkert at bruge?

Ja. Billedet analyseres i JavaScript direkte i din browser. Intet uploades til nogen server, og der er ingen grænser eller tilmelding.

Hvad gør jeg hvis jeg ikke består?

Læg en semi-transparent mørk eller lys skærm bag teksten, mørkned/lysnet kun det område hvor teksten står, eller flyt teksten til en fast bjælke under billedet. Test igen indtil alle målinger består.

Prøv kontrasttjekket gratis →    Eller scan hele siden →

Relaterede guides