Wat deze regel controleert
Zorg dat het contrast tussen voorgrond- en achtergrondkleur voldoet aan de minimale drempelwaarden voor contrastverhouding van WCAG 2 AA.
Waarom het belangrijk is
WCAG 1.4.3 vraagt een contrastverhouding van minimaal 4.5:1 voor normale tekst en 3:1 voor grote tekst. Vage prijzen, badges en banners zijn moeilijk te lezen voor slechtziende mensen, en voor iedereen in fel licht.
Zo los je het op
Op elke website
- Zoek de tekst met te weinig contrast en noteer de tekst- en achtergrondkleur: een contrastchecker of de ontwikkelaarstools van je browser tonen beide.
- Pas de tekst- of achtergrondkleur in de CSS van je thema aan tot de verhouding minimaal 4.5:1 is (3:1 voor tekst van 24px en groter, of 18.66px vet).
- Let vooral op kortingsbadges, placeholdertekst, links in de footer en knoppen op afbeeldingen.
In Shopify
- Zoek de tekst met te weinig contrast en noteer de tekst- en achtergrondkleur: een contrastchecker of de ontwikkelaarstools van je browser tonen beide.
- Maak in Webwinkel > Thema’s > Aanpassen > Thema-instellingen > Kleuren de tekstkleur donkerder of de achtergrond lichter voor het betrokken kleurenschema, tot de verhouding minimaal 4.5:1 is.
- Let vooral op kortingsbadges, placeholdertekst, links in de footer en knoppen op afbeeldingen.
Zo controleer je de oplossing
- Voer de scan opnieuw uit en controleer dat color-contrast niet meer voorkomt.
- Controleer steekproefsgewijs met een contrastchecker op de exacte kleuren.
Zo vindt FixReports het
Onze scan voert de axe-core-regel color-contrast uit in een echte Chrome-browser op elke pagina die hij test, en meldt elk element dat niet slaagt, met de pagina, de markup en, waar van toepassing, een screenshot.
Een geautomatiseerde test bevestigt dat dit specifieke probleem aanwezig is. Hij kan niet zeggen of de rest van de pagina toegankelijk is: sommige drempels komen pas aan het licht als een mens de pagina controleert.