Tekstkontrast over billeder
Silktide finder tekst, der er placeret direkte oven på et billede eller en gradient, hvor kontrasten mellem teksten og dens baggrund ikke kan måles automatisk. Disse steder kræver et menneskeligt øje for at bekræfte, at teksten er læsbar.
Hvorfor det er vigtigt
Hero-bannere og fotobaggrunde er blandt de mest almindelige steder, hvor kontrast i praksis ikke er tilstrækkelig. Et foto har lyse og mørke områder, så tekst, der er læsbar over én del af billedet, kan forsvinde over en anden – og billedet kan flytte sig bag teksten, når skærmstørrelsen ændres. Personer med nedsat syn rammes hårdest, men tekst over et rodet foto belaster alle.
De samme juridiske minimumskrav gælder som for almindelig tekst: kræver et på mindst 4.5:1 for almindelig tekst og 3:1 for stor tekst (mindst 18 punkter eller 14 punkter med fed skrift), målt mod det område af billedet, der er bag teksten.
Sådan løser du det
- Kontrollér hvert markeret element visuelt. Teksten skal opfylde det krævede forhold mod alle dele af billedet, som den kan befinde sig over, også ved andre skærm- størrelser, hvor billedet kan blive omplaceret.
- Hvis kontrasten er tvivlsom, skal du tilføje et ensfarvet eller halvgennemsigtigt lag mellem billedet og teksten eller flytte teksten helt væk fra billedet.
- Det virker også at vælge roligere, mere ensartede billeder bag tekst, men husk, at billedet senere kan blive udskiftet af indholdsredaktører – et lag er mere sikkert.
- Hvis teksten tydeligt er læsbar, skal du fundet.
Sådan tester Silktide dette
- Undersøg hver synlig tekst på siden, og spring skjult tekst, tekst i SVG-grafik og alle elementer, du har udelukket fra kontrol, over.
- Identificér tekst, hvis baggrund er et billede eller en gradient frem for en ensfarvet farve. Tekst over ensfarvede baggrunde måles automatisk af Tekstkontrast i stedet.
- Spring baggrunde over, som ikke kan påvirke teksten, f.eks. baggrundsbilleder med størrelsen nul og små baggrundsbilleder, der ikke dækker, på listeelementer (typisk brugerdefinerede punktikoner).
- Rapportér den resterende tekst, så du kan bekræfte den, og vis tekstfarven samt de involverede baggrundslag. Da et billede ikke har én enkelt farve, kan selve forholdet ikke beregnes automatisk.
Fejlfinding
Tjekket markerer tekst, der tydeligt er læsbar
Det er forventet – dette tjek kan ikke måle billedkontrast, så det vælger den forsigtige tilgang og viser alle tilfælde. Gennemgå og godkend dem, der er i orden; de vil forblive godkendt ved fremtidige scanninger.
Billedet ser fint ud på min skærm
Tjek også mindre og større skærmbredder. Responsive layouts flytter tekst i forhold til billedet, så tekst, der ligger over et mørkt område på computer, kan ligge over et lyst område på mobil.