Contrast Checker

Deze Contrast Checker controleert de WCAG- en APCA-kleurcontrast voor ADA-naleving - een kleurtoegankelijkheidstest voor elke…

✅ Wat je krijgt van deze contrastchecker: - WCAG 2.2 contrastverhouding en APCA Lc, - elementen met problemen gemarkeerd op de pagina, - CSS-regels die de kleuren hebben geproduceerd, gevolgd via source maps (indien beschikbaar), - ingebouwde kleurkiezer met een contrastanalyse-tool en voorgestelde alternatieven, - live preview van oplossingen, - export van oplossingen naar CSS (met bron-locatie opmerkingen). 🔍 Gebouwd als een website kleurcontrastchecker die pseudo-toestanden, shadow DOM, same-origin iframes en tekst over afbeeldingen en verlopen doorloopt — niet alleen vlakke achtergronden. ⚠️ Debugger toestemming vereist. De dekking van deze contrastchecker is alleen mogelijk via het Chrome DevTools Protocol, dat de 'debugger' toestemming nodig heeft. Zodra deze is gekoppeld, toont Chrome een infobalk over alle tabbladen en verbergt deze niet bij loskoppeling. ⚡ Hoog geoptimaliseerde workflow: • Zie alle elementen met kleurtoegankelijkheidsproblemen in één oogopslag gemarkeerd. • Preview wijzigingen onmiddellijk, met herberekende contrastverhoudingen en uitspraken. • Pas aangepaste CSS toe op het Stylesheet-tabblad; aangetaste problemen worden gemarkeerd in de lijst. • Om kleurcontrast handmatig te controleren, gebruik de ingebouwde kleurkiezer: linksklik om de voorgrond in te stellen, rechtsklik voor de achtergrond, en de verhouding wordt onmiddellijk bijgewerkt. • Gebruik het Exclusions-tabblad om alles te verbergen behalve de elementen die je aan het oplossen bent. 📐 Criteria achter de uitspraken. Deze contrastverhoudingchecker test kleurtoegankelijkheid tegen WCAG en APCA vereisten. APCA Lc wordt beoordeeld aan de hand van Bridge-PCA drempels, die strenger zijn dan de bijbehorende WCAG verhoudingen — dus een Bridge-PCA goedkeuring impliceert altijd een WCAG goedkeuring. 🔬 Wat is APCA? APCA (Accessible Perceptual Contrast Algorithm) is een model dat bijhoudt hoe mensen tekst op een scherm lezen. Twee kleurparen met dezelfde WCAG-verhouding kunnen er merkbaar anders uitzien, en hun APCA Lc (luminantiecontrast) weerspiegelt dat: een paar kan voldoen aan WCAG maar toch moeilijk leesbaar aanvoelen. Deze website kleurtoegankelijkheidschecker berekent beide getallen. 🚧 Beperkingen: 1. Zoals elke andere website toegankelijkheidschecker, geeft deze een beste inspanning schatting, geen nalevingscertificaat. 2. Dekking is alleen tekst; controle van niet-tekstuele elementen (WCAG 1.4.11) staat op de roadmap. 3. Cross-origin iframes worden niet betreden. 4. Complexe achtergronden en animaties worden bemonsterd op een eindig aantal ruimtelijke en temporele punten; de slechtste monsterverhouding wordt gerapporteerd maar kan nog steeds optimistisch zijn; de sampler kan ook misleid worden door renderartefacten. 5. Zeer dynamische sites kunnen valse problemen opleveren. 6. Deze kleurcontrastchecker voert geen OCR op afbeeldingen automatisch uit; test afbeeldingen met betekenisvolle tekst via de meegeleverde kleurkiezer. 🔒 Privacy en toestemming. ▸ Draait lokaal; geen webpagina-gegevens verlaten ooit je machine. ▸ 'activeTab' alleen: het analyse-script wordt geïnjecteerd wanneer je op het toolbar-icoon klikt. ▸ 'debugger' toestemming is vereist om in Shadow DOM en iframes te stappen, CSS-bronnen te traceren en complexe achtergronden te bemonsteren. 🧮 Nauwkeurigheidsdetails. Semi-transparante tekst en voorouderopaciteit worden correct behandeld: de voorgrond wordt over zijn echte achtergrond gecompositeerd voordat de luminantie wordt gemeten, zodat de gerapporteerde verhouding overeenkomt met wat gebruikers daadwerkelijk zien. Brede-gamut kleurfuncties — oklch, lab, lch, color(display-p3) — worden ook ondersteund, beperkt tot sRGB wanneer buiten het gamut. 🎨 Tekst over afbeeldingen en verlopen. In tegenstelling tot de meeste vergelijkbare tools, geeft deze niet op bij niet-vlakke achtergronden of vertrouwt niet op wat 'getComputedStyle' / 'CSS.getBackgroundColors' rapporteert. Het doorloopt de schildervolgorde van de browser om de echte achtergrond te compositeren — opaciteit, blendmodi, lineaire verlopen, backdrop-filter — en wanneer dat niet genoeg is, bemonstert deze kleurcontrasttool de gerenderde pixels op de locatie van de tekst. ❓ V&A 📌 Waarom krijgt hetzelfde kleurpaar soms verschillende uitspraken onder WCAG en APCA? ↳ WCAG meet luminantie; APCA meet perceptueel contrast. Een paar dat 4.5:1 haalt, kan nog steeds onder de Bridge-PCA Lc-drempel vallen — een strenger model. 📌 Vervangt APCA WCAG? ↳ Nee — APCA is geen vervanging, maar een nuttige tweede mening. Deze contrastchecker rapporteert beide. 📌 Kan ik een lokaal bestand of mijn dev-server scannen met deze toegankelijkheidschecker? ↳ Ja. Schakel "Toegang tot bestand-URL's toestaan" in de extensie-instellingen in. Open de file:// of localhost URL en klik op het toolbar-icoon. Alleen chrome://, de Chrome Web Store en andere beperkte schema's worden overgeslagen. 📌 Certificeert deze tool ADA-naleving? ↳ Nee. Het controleert alleen kleurcontrast — een facet van toegankelijkheid. ADA-naleving is een juridische bepaling die vele normen en criteria dekt (semantiek, toetsenbordtoegang, alt-tekst, bijschriften, en meer) en moet worden beoordeeld door een gekwalificeerde professional.