Kleurcontrast controleren

Kies twee kleuren en zie de verhouding, of die AA en AAA haalt, en hoe de combinatie er echt uitziet — ook met Japanse tekst, die dichter opeen staat en bij laag contrast lastiger leesbaar is.

De tool wordt geladen…

Hoe het werkt

  1. Kies een voorgrond- en achtergrondkleur, of plak hex-waarden.
  2. Lees de verhouding en de vier geslaagd/gezakt-resultaten af.
  3. Pas aan totdat lopende tekst 4,5:1 haalt.

Waarom er niets wordt geüpload

Alles wat deze pagina doet, doet code die in je browsertabblad draait, met dezelfde engine die ook webpagina’s tekent. Je bestand wordt van schijf naar het geheugen van dat tabblad gelezen, daar bewerkt en weer weggeschreven als download. Het wordt nergens naartoe gestuurd — niet naar ons, en niet naar een derde partij.

Controleer het zelf

  1. Open de ontwikkelaarstools van je browser (F12) en kies het tabblad Netwerk.
  2. Laad je bestand en start de tool.
  3. De enige verzoeken die je ziet, halen de code van de tool zelf op — en bij een paar zware tools hun opensource-engine van een openbare CDN — plus één kleine bezoekmelding aan loreatec.jp (adres en titel van de pagina, meer niet). In geen van die verzoeken zit jouw bestand.

Bewijs dat het lokaal blijft →

Veelgestelde vragen

Welke drempel geldt voor mij?

4,5:1 voor gewone lopende tekst, 3:1 voor tekst vanaf 24px (19px indien vet) en voor interface-onderdelen zoals randen van invoervelden en iconen, 7:1 voor AAA. Onthoud je maar één getal, onthoud dan 4,5.

Mijn ontwerp haalt de norm, maar oogt toch moeilijk leesbaar.

Contrastverhouding meet geen letterdikte, grootte of letterspatiëring, en dun, licht lettertype op 4,5:1 is echt onprettig. Het voorbeeldpaneel is er zodat je ook met je ogen kunt oordelen, niet alleen op het getal — vooral bij Japans, waar dichte kanji op kleine grootte meer contrast nodig heeft dan de formule voorschrijft.