docs: WCAG-pagina 1.4.3 (#1536)

Gerelateerd: #1408 en #642

Preview:

https://documentatie-git-docs-wcag-143-nl-design-system.vercel.app/wcag/1.4.3

Deze PR maakt de [WCAG-pagina Succescriterium 1.4.3 Contrast
(minimum)](https://nldesignsystem.nl/wcag/1.4.3) helemaal af.

docs/wcag/1.4.03.mdx

@@ -31,9 +31,56 @@ import Summary from "./summaries/_1.4.3-summary.md";
 
 <Summary />
 
-## Opgelet
+Let er ook op dat bij inzoomen tot 400% en bij verschillende schermgroottes of schermoriëntaties, de tekst over andere delen van een afbeelding of stijlelement kan vallen dan je oorspronkelijk in gedachten had.
 
-Deze inhoud wordt binnenkort aangevuld met uitgebreidere uitleg, bronnen en informatie over hoe te testen.
+Bij vergroten van de tekst tot 200% kan de tekst uit het kader lopen. Het kan zijn dat de tekst dan onleesbaar wordt omdat de achtergrondkleur anders is dan die van het kader.
+
+Overleg met de bouwer over goede en flexibele oplossingen voor het gebruik van teksten.
+
+## Gerelateerde NL Design System-richtlijnen
+
+- Stijl - Kleuren: [Zorg voor voldoende kleurcontrast voor tekst tegen de achtergrond](/richtlijnen/stijl/kleuren/contrast-tekst)
+- Formulieren - Buttons: [Disabled submitbuttons](/richtlijnen/formulieren/buttons/disabled-submitbuttons)
+- Formulieren - Placeholders: [Zorg voor een goed kleurcontrast van de placeholdertekst](/richtlijnen/formulieren/visueel-ontwerp/placeholder-goed-zichtbaar)
+- Formulieren - Visueel ontwerp: [Geef tekst voldoende kleurcontrast](/richtlijnen/formulieren/visueel-ontwerp/tekst-goed-zichtbaar)
+
+## Bronnen en tools
+
+- Een overzicht van goede bronnen en tools voor kleurcontrast staat bij [Richtlijnen NL Design System voor kleuren](/richtlijnen/stijl/kleuren/).
+- [Figma contrast accessibility plugin tools](https://www.figma.com/community/accessibility/contrast).
+- [axe DevTools browser add-on](https://www.deque.com/axe/browser-extensions/).
+- [WAVE Web Accessibility Evaluation Tools](https://wave.webaim.org/).
+
+## Hoe te testen
+
+Bepaal het kleurcontrast van tekst ten opzichte van de achtergrond. Hoe je test is afhankelijk van het moment van testen.
+
+Neem ook afbeeldingen waar tekst in staat mee, als deze tekst onderdeel is van de content. Hier is de [Colour Contrast Analyser (CCA)](https://www.tpgi.com/color-contrast-checker/) handig, omdat je daarmee een pipetje kan gebruiken als je de kleurcodes niet weet.
+
+_Let op_: Deze eis geldt niet voor tekst op een afbeelding van een logo of van een merknaam, of tekst op een afbeelding die alleen ter decoratie dient en geen deel uitmaakt van de inhoud.
+
+Het NL Design System biedt een makkelijke tool voor het bepalen van kleurcontrast aan. Door het invoeren van de hexadecimale code van de tekstkleur en achtergrondkleur kun je controleren of de tekst voldoet aan WCAG op: [Contrast van kleuren](https://nldesignsystem.nl/contrast/?color=%23999999&background-color=%23f8f5f1).
+
+Voor ontwerpers is er voor Figma een aantal goede tools: [Figma contrast accessibility plugin tools](https://www.figma.com/community/accessibility/contrast).
+
+Voor developers: axe DevTools berekent het kleurcontrast ten opzichte van de tekst in de browser: [axe DevTools browser add-on](https://www.deque.com/axe/browser-extensions/).
+
+_Let op_: Controleer het kleurcontrast altijd in de gegenereerde webpagina in een browser en niet alleen in de code zelf. Linters kunnen helpen om laaghangend fruit te ondervangen, maar de eindtest voor kleurcontrast moet gebeuren op de webpagina zelf als alle componenten worden samengevoegd tot één geheel.
+
+Ben je geen designer of developer en test je het kleurcontrast in de browser, dan is WAVE handig: [WAVE Web Accessibility Evaluation Tools](https://wave.webaim.org/).
+
+Verder staan er tools bij de bronnen op [Richtlijnen NL Design System voor kleuren](/richtlijnen/stijl/kleuren/) en als je zoekt op "Contrast Checker" in de zoekmachines vind je vele andere, kies degene die het beste bij jouw manier van werken past.
+
+Controleer in de volgende situaties of het kleurcontrast van de tekst voldoende blijft:
+
+- Verschillende gebruikelijke schermgroottes inclusief mobiele weergave.
+- Verschillend oriëntaties: _portrait_ en _landscape_.
+- Vergroot de tekst alleen tot 200%.
+- Zoom in tot 400%.
+- Is er een dark mode aanwezig? Test ook hier het kleurcontrast van de tekst.
+- Controleer het kleurcontrast van placeholders.
+- Controleer de verschillende weergave van buttons en de links zoals: met toetsenbordfocus, als je er overheen hovert met de muis, ingedrukt, al eerder bezocht.
+- Vergeet ook de skiplinks niet.
 
 ## Gebruikersonderzoek