Kleurcontrastchecker

Controleer WCAG-contrastverhoudingen voor voorgrond- en achtergrondkleuren, bekijk echte tekst, zie AA- en AAA-resultaten en kopieer een toegankelijkheidsrapport.

Controleer WCAG-contrast voordat je een kleurenpaar gebruikt

Gebruik de Kleurcontrastchecker om voorgrond- en achtergrondkleuren te testen tegen gangbare WCAG-contrastdrempels. Voer kleuren in of kies ze, bekijk je eigen tekst, stel lettergrootte en gewicht in en kopieer een duidelijk rapport voor designreview of issuetracking.

Het resultaat bevat de exacte contrastverhouding, AA- en AAA-slagen of falen voor normale tekst, grote tekst en UI-componenten, plus praktische voorgrondsuggesties.

Gebruik dit wanneer

  • Je tekst- en achtergrondkleuren kiest voor knoppen, kaarten, dashboards, formulieren of documentatie.
  • Je merkkleuren controleert voordat je ze gebruikt in leesbare UI-tekst.
  • Je controleert of een lettergrootte volgens WCAG als grote tekst geldt.
  • Je een toegankelijkheidsnotitie kopieert naar een ticket, pull request of designhandoff.

Tool laden...

FAQ over de kleurcontrastchecker

Welke drempels worden gecontroleerd?

De tool controleert 4.5:1 en 7:1 voor normale tekst, 3:1 en 4.5:1 voor grote tekst en 3:1 voor UI-componenten.

Verandert vette tekst het resultaat voor grote tekst?

Ja. Vette tekst geldt al bij een kleinere pixelgrootte als grote tekst dan gewone tekst.

Kan ik een nabije toegankelijke kleur vinden?

Ja. De checker suggereert een dichtstbijzijnde AA-voorgrondrichting en behoudt de oorspronkelijke tint zo veel als praktisch is.

Gerelateerde tools