Textkontrast över bilder
Silktide hittar text som placerats direkt över en bild eller gradient, där kontrasten mellan texten och dess bakgrund inte kan mätas automatiskt. På dessa platser behövs ett mänskligt öga för att bekräfta att texten är läsbar.
Varför detta är viktigt
Hero-banners och fotobakgrunder är några av de vanligaste platserna där kontrasten i praktiken brister. Ett foto har ljusa och mörka områden, så text som är läsbar över en del av bilden kan försvinna över en annan – och bilden kan förskjutas bakom texten när skärmstorleken ändras. Personer med nedsatt syn drabbas hårdast, men text över ett rörigt foto anstränger allas ögon.
Samma lagstadgade minimikrav gäller som för vanlig text: kräver ett på minst 4,5:1 för normal text och 3:1 för stor text (minst 18 punkter eller 14 punkter i fetstil), mätt mot det område av bilden som finns bakom texten.
Så åtgärdar du problemet
- Kontrollera varje markerat element visuellt. Texten måste uppfylla det erforderliga förhållandet mot varje del av bilden som den kan placeras över, även vid andra skärmstorlekar där bilden kan flyttas.
- Om kontrasten är tveksam kan du lägga till ett heltäckande eller halvtransparent överlägg mellan bilden och texten, eller flytta texten helt bort från bilden.
- Det fungerar också att välja lugnare och mer enhetliga bilder bakom texten, men kom ihåg att bilden senare kan bytas av innehållsredaktörer – ett överlägg är säkrare.
- Om texten är tydligt läsbar kan du resultatet.
Så testar Silktide detta
- Granska all synlig text på sidan. Dold text, text i SVG-grafik och element som du har undantagit från kontroller hoppas över.
- Identifiera text vars bakgrund är en bild eller gradient i stället för en enfärgad bakgrund. Text över enfärgade bakgrunder mäts automatiskt av Textkontrast i stället.
- Hoppa över bakgrunder som inte kan påverka texten, till exempel bakgrundsbilder med storleken noll samt små bakgrundsbilder som inte täcker listobjekt (vanligen anpassade punktikoner).
- Rapportera den återstående texten så att du kan bekräfta den och visa textfärgen samt de berörda bakgrundslagren. Eftersom en bild inte har en enda färg kan själva förhållandet inte beräknas automatiskt.
Felsökning
Kontrollen markerar text som är tydligt läsbar
Detta är förväntat – den här kontrollen kan inte mäta bildkontrast och väljer därför att visa alla fall. Granska och godkänn de fall som är godtagbara; de förblir godkända vid framtida genomsökningar.
Bilden ser bra ut på min skärm
Kontrollera även mindre och större skärmbredder. Responsiva layouter flyttar texten i förhållande till bilden, så text som ligger över ett mörkt område på en dator kan hamna över ett ljust område på en mobil enhet.