Tekstkontrast over bilder

Silktide finner tekst som er plassert direkte over et bilde eller en gradient, der kontrasten mellom teksten og bakgrunnen ikke kan måles automatisk. Disse områdene må kontrolleres av et menneske for å bekrefte at teksten er lesbar.

Hvorfor dette er viktig

Hero-bannere og fotobakgrunner er noen av de vanligste stedene der kontrasten svikter i praksis. Et bilde har lyse og mørke områder, så tekst som er lesbar over én del av bildet, kan forsvinne over en annen – og bildet kan forskyves bak teksten når skjermstørrelsen endres. Personer med nedsatt syn rammes hardest, men tekst over et visuelt urolig bilde er anstrengende for alle.

De samme lovpålagte minimumskravene gjelder som for vanlig tekst: krever et på minst 4,5:1 for vanlig tekst og 3:1 for stor tekst (minst 18 punkter eller 14 punkter i fet skrift), målt mot området av bildet som ligger bak teksten.

Slik løser du problemet

Kontroller hvert markert element visuelt. Teksten må oppfylle det påkrevde forholdet mot alle deler av bildet den kan ligge over, også ved andre skjermstørrelser der bildet kan flytte på seg.
Når kontrasten er tvilsom, kan du legge et heldekkende eller delvis gjennomsiktig overlegg mellom bildet og teksten, eller flytte teksten helt bort fra bildet.
Det hjelper også å velge roligere og mer ensartede bilder bak teksten, men husk at innholdsredaktører kan bytte ut bildet senere – et overlegg er tryggere.
Hvis teksten tydelig er lesbar, funnet.

Slik tester Silktide dette

Undersøk all synlig tekst på siden, og hopp over skjult tekst, tekst i SVG-grafikk og elementer du har utelukket fra kontroll.
Finn tekst der bakgrunnen er et bilde eller en gradient i stedet for en heldekkende farge. Tekst over heldekkende farger måles automatisk av Tekstkontrast i stedet.
Hopp over bakgrunner som ikke kan påvirke teksten, for eksempel bakgrunnsbilder med størrelse lik null og små bakgrunnsbilder som ikke dekker listeelementer (vanligvis egendefinerte punktikoner).
Rapporter den gjenværende teksten slik at du kan bekrefte den, og vis tekstfargen og de involverte bakgrunnslagene. Ettersom et bilde ikke har én enkelt farge, kan ikke selve forholdet beregnes automatisk.

Feilsøking

Kontrollen markerer tekst som tydelig er lesbar

Det er forventet – denne kontrollen kan ikke måle kontrast i bilder, så den viser heller alle tilfeller for sikkerhets skyld. Gå gjennom og godkjenn dem som er i orden; de forblir godkjent ved fremtidige skanninger.

Bildet ser fint ut på skjermen min

Kontroller også mindre og større skjermbredder. Responsive oppsett flytter teksten i forhold til bildet, så tekst som ligger over et mørkt område på en datamaskin, kan ligge over et lyst område på mobil.