# Elementen moeten voldoen aan de minimale drempelwaarden voor kleurcontrast

<https://www.fixreports.com/nl/issues/color-contrast>

WCAG 1.4.3 Contrast (minimum) · Niveau AA

Sommige tekst steekt niet genoeg af tegen de achtergrond om leesbaar te zijn voor slechtziende mensen.

## 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
1. Zoek de tekst met te weinig contrast en noteer de tekst- en achtergrondkleur: een contrastchecker of de ontwikkelaarstools van je browser tonen beide.
2. 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).
3. Let vooral op kortingsbadges, placeholdertekst, links in de footer en knoppen op afbeeldingen.

### In Shopify
1. Zoek de tekst met te weinig contrast en noteer de tekst- en achtergrondkleur: een contrastchecker of de ontwikkelaarstools van je browser tonen beide.
2. 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.
3. Let vooral op kortingsbadges, placeholdertekst, links in de footer en knoppen op afbeeldingen.

### In WooCommerce en WordPress
1. Zoek de tekst met te weinig contrast en noteer de tekst- en achtergrondkleur: een contrastchecker of de ontwikkelaarstools van je browser tonen beide.
2. 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).
3. 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.

## Bronnen
- Documentatie van de axe-core-regel (Deque): https://dequeuniversity.com/rules/axe/4.13/color-contrast
- Uitleg bij WCAG 1.4.3 (W3C): https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum