Kleurgereedschap FREE
Kies, converteer en genereer kleuren, paletten, schalen en verlopen, met WCAG-contrast, toegankelijke suggesties en simulatie van kleurenblindheid. Alles wordt in je browser berekend.
Kiezer en omrekeningen
Alle notaties
Technische gegevens
Contrast
APCA (concept, aanvullende informatie)
APCA is het perceptuele contrastmodel dat voor WCAG 3 is opgesteld. Het is vandaag geen conformiteitseis en wijkt in beide richtingen van WCAG 2 af, dus het staat hier als extra informatie en nooit als geslaagd of gezakt.
Hoe het eruitziet
Paletten
Welke paren leesbaar zijn
Elke kleur als tekst op elke andere. Het getal is de WCAG-contrastverhouding; AA is 4,5:1 voor normale tekst en 3:1 voor grote tekst en interface-elementen.
Palet kopiëren
Schalen
Elf stappen gebouwd in OKLCH, zodat de sprongen gelijkmatig ogen in plaats van alleen gelijkmatige getallen te zijn. Het resultaat past waar een utility-framework een schaal verwacht; het is de reeks van deze tool en het palet van geen enkel framework.
De reeks aanpassen
Verlopen
Uit een afbeelding
Sleep hier een afbeelding, of kies er een
Hij wordt in dit tabblad gelezen en nooit geüpload. Er blijft niets achter zodra je de pagina verlaat.
Kleurenzicht
Een model van wat een kleurenpaar verliest bij de gangbare vormen van kleurenblindheid, berekend met de projectie van Vienot, Brettel en Mollon. Het is een simulatie en geen foto van wat een bepaald persoon ziet.
Paren die niet langer te onderscheiden zijn
Uit het palet gehaald. Alleen paren die in normaal zicht duidelijk verschillen worden getoond - twee kleuren die al op elkaar lijken zijn een ontwerpkeuze, geen bevinding.
Elke omrekening, elk palet en elke contrastwaarde op deze pagina wordt in je browser berekend. Een afbeelding die je hier neerzet wordt op een canvas in dit tabblad gelezen en nooit geüpload.
Wat deze cijfers betekenen en wat niet
Hier berekend, uit gepubliceerde formules
De omrekeningen volgen CSS Color Level 4, inclusief de echte sRGB-overdrachtscurve in plaats van een benadering, en het contrast volgt de definitie van WCAG 2.2. Een kleurenpaar dat aan de contrasteis voldoet maakt een pagina niet toegankelijk: contrast is één succescriterium van vele, en die ene meet deze tool. Alles draait in je browser en er wordt niets verstuurd.
FAQ
Worden mijn kleuren of afbeeldingen ergens naartoe gestuurd?
Nee. Elke omrekening, elk palet, elke schaal en elke contrastwaarde wordt in dit tabblad berekend. Een afbeelding wordt hier op een canvas gelezen en nooit geüpload; recente kleuren en je palet staan in de eigen opslag van deze browser, en je kunt beide wissen.
Waarom OKLCH in plaats van HSL?
Omdat de lichtheid van HSL een gemiddelde van kanalen is en niet iets wat het oog meet. Draai een kleurtoon 120 graden in HSL en een van de drie uitkomsten oogt zichtbaar donkerder dan de andere; doe het in OKLCH en de drie lezen als één familie. Hetzelfde geldt voor een tintenreeks: gelijke stappen in HSL-lichtheid kruipen aan de uiteinden samen. HSL wordt toch getoond, omdat er heel veel code in geschreven is.
Maakt het halen van de contrasttest mijn pagina toegankelijk?
Nee, en de formulering hier is daar zorgvuldig in. Een kleurenpaar voldoet aan een contrasteis. Contrast is één succescriterium van vele - focusvolgorde, labels, toetsenbordpaden, beweging en structuur zijn even zovele andere - en een pagina met perfect contrast kan nog steeds onbruikbaar zijn. Gebruik dit om de kleurvraag te beslechten, niet de hele vraag.
Wat is APCA en waarom staat het in een apart paneel?
Het is het perceptuele contrastmodel dat voor WCAG 3 is opgesteld. Het modelleert hoe contrast bij een gegeven grootte en gewicht werkelijk leest, wat WCAG 2 niet doet, maar het is een concept en er wordt vandaag niets aan afgemeten. Het als gelijke naast de WCAG-oordelen zetten zou beide verkeerd voorstellen, dus staat het achter een uitklap en zegt het wat het is.
Hoe nauwkeurig is de simulatie van kleurenblindheid?
Het is de projectie van Vienot, Brettel en Mollon, toegepast in lineair licht, de gebruikelijke manier om dichromasie te modelleren. Ze laat zien wat een PAAR kleuren verliest, en dat is de vraag die telt: blijven twee dingen te onderscheiden. Het is een model van één vorm van de aandoening, geen foto van wat een bepaald persoon ziet, en dat staat ook op het paneel.
Kan de gegenereerde schaal in de configuratie van mijn framework worden geplakt?
Ja - de export bevat een vorm die past waar een utility-framework een kleurenschaal verwacht, naast CSS custom properties, SCSS-variabelen en JSON. De reeks is van deze tool zelf, in OKLCH opgebouwd uit de kleur die je gaf; het is het palet van geen enkel framework en wordt ook niet als zodanig gepresenteerd.
Website-audit in 2026: de complete checklist voor SEO, Core Web Vitals, toegankelijkheid en beveiliging
Een goede website-audit is geen losse Lighthouse-score en ook geen lijst met tientallen automatische waarschuwingen. De audit moet vier vragen beantwoorden: kan een zoekmachine de website correct vinden en begrijpen, kan een gebruiker zijn taak efficiënt afronden, is de website snel genoeg en stelt de website de eigenaar of bezoekers bloot aan onnodige risico’s?
Chrome vs Firefox vs Edge vs Safari: wat we leerden van het uitbrengen van 9 browserextensies
Negen extensies, vier browsers en veel meer dan één bestand `manifest.json`. We laten zien waar gedeelde code werkelijk ophoudt, waarom Safari een apart proces vereist en welke fouten pas door Firefox en de extensiewinkels zichtbaar worden.
Claude Code vs OpenAI Codex vs Gemini CLI: de beste AI-programmeeragent in 2026
Claude Code, OpenAI Codex en Gemini CLI kunnen repositories lezen, bestanden bewerken en tests uitvoeren, maar zijn ontworpen voor verschillende werkstijlen. We vergelijken kwaliteit, benchmarks, beveiliging, parallel werk, uitbreidingen, prijzen en privacy.
Bouw een beter web, sneller.
Wij bouwen maatwerksoftware en oplossingen afgestemd op jouw wensen.