Kleurenblindheid-simulator
Upload een afbeelding en bekijk een voorbeeld van hoe deze eruitziet bij protanopie, deuteranopie, tritanopie of volledige kleurenblindheid, en download daarna het gesimuleerde resultaat.
Kleurenblindheid-simulator — Sleep een afbeelding erin en zie meteen hoe deze eruit zou zien voor iemand met roodblindheid (protanopie), groenblindheid (deuteranopie), blauwblindheid (tritanopie) of volledige kleurenblindheid (achromatopsie). De simulatie draait volledig in je browser op een canvas, pixel voor pixel — je afbeelding wordt nooit naar een server geüpload, dus zelfs privémockups en screenshots blijven op je apparaat. Kies een type, vergelijk het origineel naast het resultaat en download de gesimuleerde PNG.
Wat is Kleurenblindheid-simulator?
De Kleurenblindheid-simulator is een gratis in-browsertool die een afbeelding opnieuw rendert zoals iemand met een specifieke kleurzienstoornis die zou waarnemen. Hij ondersteunt de drie veelvoorkomende dichromasieën — protanopie (roodzwakte), deuteranopie (groenzwakte) en tritanopie (blauwzwakte) — plus achromatopsie, een volledig monochrome (grijswaarden)weergave. Ontwerpers, ontwikkelaars en toegankelijkheidsreviewers gebruiken hem om te controleren of grafieken, UI-statussen, statuskleuren en infographics nog steeds betekenis houden wanneer alleen de kleur de betekenis draagt. Omdat ongeveer één op de twaalf mannen een vorm van kleurzienstoornis heeft, helpt het simuleren van deze weergaven vóór publicatie om ontwerpen op te sporen die te sterk leunen op een kleurcontrast dat voor een deel van je publiek verdwijnt.
Kleurenblindheid-simulator gebruiken
- Sleep een afbeelding naar het uploadgebied, of klik erop om een PNG-, JPG- of WebP-bestand van je apparaat te kiezen.
- Open het dropdownmenu Kleurzientype en kies Protanopie, Deuteranopie, Tritanopie of Achromatopsie (kies Geen om het ongewijzigde origineel te zien).
- Het gesimuleerde voorbeeld wordt automatisch bijgewerkt naast het origineel, zodat je de twee naast elkaar kunt vergelijken.
- Klik op een voorbeeld om het in de zoombare lightbox te openen en details van dichtbij te bekijken.
- Druk op Downloaden om de gesimuleerde afbeelding als PNG op te slaan, of op Resetten om deze te wissen en een andere afbeelding te proberen.
Voorbeelden
Een rood/groene statusbadge controleren
Upload een screenshot van een UI die rood gebruikt voor 'error' en groen voor 'success', kies Deuteranopie en zie hoe de twee kleuren samenvallen tot een vergelijkbare modderige tint — een teken dat je pictogrammen of labels moet toevoegen in plaats van alleen op kleur te vertrouwen.
Een datagrafiek beoordelen
Laad een lijn- of cirkeldiagram met meerdere reeksen, wissel tussen Protanopie en Tritanopie en bevestig dat elke reeks onderscheidbaar blijft; vloeien de lijnen samen, pas dan het palet aan of voeg patronen toe.
Leesbaarheidstest in volledige grijswaarden
Kies Achromatopsie om de afbeelding alleen tot luminantie af te vlakken; als tekst of belangrijke elementen verdwijnen, leunt je ontwerp op tint in plaats van op helderheidscontrast.
Veelgestelde vragen
- Welke soorten kleurenblindheid kan het simuleren?
- Het simuleert protanopie (roodblind), deuteranopie (groenblind) en tritanopie (blauwblind) met behulp van standaard RGB-transformatiematrices, plus achromatopsie, die de afbeelding omzet naar een op luminantie gebaseerde grijswaarden. Bij de keuze Geen blijft de originele afbeelding ongewijzigd.
- Wordt mijn afbeelding naar een server geüpload?
- Nee. De volledige simulatie gebeurt lokaal in je browser via een HTML-canvas — het bestand verlaat nooit je apparaat en er wordt niets naar een server verzonden, dus het werkt offline en houdt privéafbeeldingen privé.
- Welke afbeeldingsformaten en uitvoer kan ik gebruiken?
- Je kunt gangbare rasterafbeeldingen laden, zoals PNG, JPG en WebP. Het gesimuleerde resultaat wordt altijd als PNG geëxporteerd, zodat transparantie behouden blijft wanneer die aanwezig is.
- Hoe nauwkeurig is de simulatie?
- Het gebruikt bekende lineaire kleurmatrixbenaderingen die uitstekend zijn om problemen met kleurafhankelijkheid in UI en graphics op te sporen. Het is een praktische ontwerptool, geen klinische of medische diagnosetool, dus behandel het resultaat als richtlijn en niet als een exacte weergave van iemands zicht.
- Waarom zien de gesimuleerde kleuren er gedempt of verschoven uit?
- Elke stoornis verwijdert of verzwakt één kegelrespons, waardoor kleuren die van dat kanaal afhangen naar de resterende toe schuiven. Juist dat samenvallen van verschillende tinten tot vergelijkbare tonen is het effect dat je vóór publicatie wilt opsporen.
Gerelateerde tools
Code naar afbeelding
Zet een codefragment in je browser om in een verzorgde PNG-kaart met syntaxisaccentuering, met een thema, verloop- of transparante achtergrond en opvulling — zonder uploaden.
Kleurcontrastcontrole
Controleer de WCAG-contrastverhouding tussen een voorgrond- en achtergrond-HEX-kleur en zie of deze AA en AAA haalt voor zowel normale als grote tekst.
Kleurenmenger
Meng twee HEX-kleuren in een gekozen verhouding in de RGB- of Lab-kleurruimte en lees de resulterende tussenkleur terug als staal en kopieerbare HEX-waarde.
Kleurtinten-generator
Zet één HEX-basiskleur om in een Tailwind-achtige tintenschaal van 50-950, gemengd naar wit en zwart, met per stap een staal en een kopieerbare HEX.