Kleurcontrastcontrole

Do4U controleert het contrast van je merk- en websitekleuren. Je voert je kleuren in, één per regel, en geeft aan waar elke kleur voor dient: tekst, achtergrond, accent (bijvoorbeeld een knop) of rand. De code berekent de contrastratio van elk paar met de WCAG-formule en laat zien welk niveau het bereikt: AA en AAA voor normale en grote tekst, en 3:1 voor randen, iconen en knopgebieden. De waarden worden niet afgerond. Voor elk paar dat niet voldoet, krijg je de dichtstbijzijnde kleur die wel voldoet, één keer donkerder en één keer lichter, in dezelfde tint. Do4U maakt ook een aangepast palet aan en controleert dit opnieuw als geheel. Je exporteert het palet als CSS custom properties, SCSS-variabelen of JSON, en de export vindt plaats in je browser. Alles draait in code, zonder AI, en het is gratis.

Probeer het nu Prijzen

Gratis en zonder account: Contrastratio-calculator →

Voor wie het is

Voor ontwerpers, ontwikkelaars, bureaus en website-eigenaren die merkkleuren kiezen of een stijlgids maken en tekst en knoppen willen die voor iedereen leesbaar zijn.

Typische toepassingen

Controleer een nieuw kleurenpalet voordat het ontwerp begint
Vind een grijs voor secundaire tekst dat nog steeds aan AA voldoet
Controleer knop-, link- en randkleuren ten opzichte van de achtergrond van de pagina
Exporteer de aangepaste kleuren als CSS-variabelen voor je stylesheet

Voorbeeld

Invoer

#1a1a1a tekst #777777 tekst Secundair #ffffff achtergrond #cccccc rand

Result

#1a1a1a op #ffffff: 17.4:1, voldoet aan AA en AAA #777777 op #ffffff: 4.47:1, voldoet niet aan AA voor normale tekst (voldoet wel voor grote tekst). Donkerder: #767676 → 4.54:1. Lichter: niet mogelijk #cccccc op #ffffff: 1.6:1, voldoet niet aan het contrast voor niet-tekst van 3:1. Donkerder: #949494 → 3.03:1 Exporteer (aangepast): :root { --color-text: #1a1a1a; --secondary: #767676; --color-background: #ffffff; --color-border: #949494; }

Een vast voorbeeld, ingekort. Echte resultaten zijn door AI gegenereerd: controleer ze a.u.b.

Prijs en limieten

Prijs: gratis, tot 30 checks per dag
Beschikbaar met: Gratis, Met pakket
Inputlimiet: Tot 3 000 tekens per bestand

Privacy

Verwerkt op onze eigen servers in de EU (Polen). Inputs en resultaten worden verwijderd na 7 dagen (Gratis) of 30 dagen (pakketten), of direct nadat je het resultaat hebt bekeken als je ervoor kiest ze niet op te slaan. Afbeeldingen worden direct na verwerking verwijderd.

In de API

Toolnaam: contrast_check. Maak een taak aan met POST /api/v1/jobs en haal het resultaat op met GET /api/v1/jobs/{id}. Je vindt je API-sleutel in je account.

curl -X POST https://do4u.eu/api/v1/jobs \
  -H "Authorization: Bearer d4u_…" -H "Content-Type: application/json" \
  -d '{"tool": "contrast_check", "colors": ["#1a1a1a text", "#ffffff background", "#0066cc accent"]}'

Volledige API-documentatie →

Veelgestelde vragen

Hoe wordt de contrastverhouding berekend?

Met de formule van WCAG 2.2: eerst de relatieve luminantie van elke kleur, daarna (L1 + 0.05) / (L2 + 0.05), waarbij L1 de lichtere kleur is. Het resultaat ligt tussen 1:1 en 21:1. De waarden worden zonder afronding vergeleken, dus 4.49:1 haalt 4.5:1 niet, en het scherm rondt nooit naar boven af.

Welke combinaties worden gecontroleerd?

Tekst wordt gecontroleerd op elke achtergrond en op accentkleuren, tegen 4.5:1 en 7:1 voor normale tekst en 3:1 en 4.5:1 voor grote tekst. Accent- en randkleuren worden op de achtergrond gecontroleerd tegen 3:1 voor niet-tekstcontrast. Een kleur zonder rol wordt vergeleken met alle andere kleuren.

Hoe worden de voorgestelde kleuren gevonden?

Alleen de helderheid verandert, in de OKLCH-kleurruimte; de tint blijft hetzelfde. Do4U zoekt de dichtstbijzijnde kleur die voldoet, een keer donkerder en een keer lichter, en controleert deze opnieuw als hexcode. Als er geen kleur is die voldoet tegen een achtergrond, wordt dit aangegeven.

Wordt mijn tekst opgeslagen?

Alleen zo lang als nodig: 7 dagen op het gratis pakket, 30 dagen met een pakket – of helemaal niet als je ervoor kiest om het niet op te slaan. De verwerking vindt plaats op onze eigen servers in de EU (Polen).

Kan ik het resultaat direct gebruiken?

Resultaten zijn gegenereerd door AI. Lees ze alstublieft door voordat je ze publiceert of verstuurt.

Gerelateerde tools

Toegankelijkheidscontrole
Controleert een pagina op veelvoorkomende barrières en legt uit hoe je ze kunt oplossen.
Designfeedback van een screenshot
Upload een screenshot van een pagina of app en krijg genummerde, concrete bevindingen over knopgrootte, contrast, tekst in afbeeldingen, hiërarchie en witruimte, elk met een kader op de afbeelding. Een AI-beoordeling, geen meting.
Alt-teksten
Korte beeldbeschrijvingen voor schermlezers en zoekmachines.

Alle tools →