Tekstcontrast over afbeeldingen
Silktide vindt tekst die rechtstreeks over een afbeelding of verloop is geplaatst, waarbij het contrast tussen de tekst en de achtergrond niet automatisch kan worden gemeten. Op deze plaatsen moet iemand controleren of de tekst leesbaar is.
Waarom dit belangrijk is
Hero-banners en fotoachtergronden zijn in de praktijk een van de meest voorkomende plaatsen waar contrast niet voldoet. Een foto heeft lichte en donkere gebieden, waardoor tekst die op het ene deel van de afbeelding leesbaar is, op een ander deel kan verdwijnen. Bovendien kan de afbeelding achter de tekst verschuiven wanneer de schermgrootte verandert. Mensen met een verminderd gezichtsvermogen worden het zwaarst getroffen, maar tekst over een drukke foto is voor iedereen vermoeiend.
Dezelfde wettelijke minimumeisen gelden als voor gewone tekst: vereist een van minstens 4,5:1 voor gewone tekst en 3:1 voor grote tekst (minstens 18 punten, of 14 punten vet), gemeten ten opzichte van het gedeelte van de afbeelding achter de tekst.
Hoe je dit oplost
- Controleer elk gemarkeerd element visueel. De tekst moet voldoen aan de vereiste verhouding ten opzichte van elk deel van de afbeelding waar de tekst overheen kan komen, ook bij andere schermformaten waarop de afbeelding anders kan worden geplaatst.
- Voeg bij twijfel over het contrast een effen of semi-transparante laag toe tussen de afbeelding en de tekst, of verplaats de tekst helemaal van de afbeelding af.
- Het werkt ook om rustigere, gelijkmatigere afbeeldingen achter tekst te kiezen, maar houd er rekening mee dat contentredacteuren de afbeelding later kunnen vervangen. Een overlay is veiliger.
- Als de tekst duidelijk leesbaar is, de bevinding goed.
Hoe Silktide dit test
- Onderzoek elk zichtbaar tekstgedeelte op de pagina. Verborgen tekst, tekst in SVG-afbeeldingen en elementen die je hebt uitgesloten van controles worden overgeslagen.
- Identificeer tekst waarvan de achtergrond een afbeelding of verloop is in plaats van een effen kleur. Tekst op effen kleuren wordt automatisch gemeten door Tekstcontrast.
- Sla achtergronden over die geen invloed kunnen hebben op de tekst, zoals achtergrondafbeeldingen met een grootte van nul, en kleine, niet-bedekkende achtergrondafbeeldingen op lijstitems (meestal aangepaste opsommingstekens).
- Rapporteer de resterende tekst zodat jij die kunt bevestigen, en toon de tekstkleur en de betrokken achtergrondlagen. Omdat een afbeelding geen enkele kleur heeft, kan de verhouding zelf niet automatisch worden berekend.
Problemen oplossen
De controle markeert tekst die duidelijk leesbaar is
Dat is te verwachten. Deze controle kan het contrast van afbeeldingen niet meten en kiest daarom voor de veilige aanpak door elk geval te tonen. Controleer de gevallen die in orde zijn en keur ze goed. Ze blijven bij toekomstige scans goedgekeurd.
De afbeelding ziet er op mijn scherm goed uit
Controleer ook kleinere en grotere schermbreedtes. Responsieve lay-outs verplaatsen tekst ten opzichte van de afbeelding, waardoor tekst die op desktop over een donker gebied staat, op mobiel over een licht gebied kan komen te staan.