Kontrastprüfer – Contrast Checker

Dieser Kontrastprüfer überprüft die Farbkontraste gemäß WCAG und APCA auf die Einhaltung der ADA — ein Farbzugänglichkeitstest für…

✅ Was Sie von diesem Kontrastprüfer erhalten: - WCAG 2.2 Kontrastverhältnis und APCA Lc, - Elemente mit Problemen, die auf der Seite hervorgehoben sind, - CSS-Regeln, die die Farben erzeugt haben, verfolgt durch Quellkarten (sofern verfügbar), - integriertes Farbauswahlwerkzeug mit einem Kontrastanalysator und vorgeschlagenen Alternativen, - Live-Vorschau der Korrekturen, - Export der Korrekturen nach CSS (mit Quellort-Kommentaren). 🔍 Entwickelt als Website-Farbkontrastprüfer, der Pseudo-Zustände, Shadow DOM, Same-Origin-Iframes und Text über Bildern und Farbverläufen behandelt — nicht nur flache Hintergründe. ⚠️ Debugger-Berechtigung erforderlich. Die Abdeckung dieses Kontrastprüfers ist nur über das Chrome DevTools-Protokoll möglich, das die Berechtigung 'debugger' benötigt. Sobald verbunden, zeigt Chrome eine Infobar über allen Tabs an und blendet sie bei der Trennung nicht aus. ⚡ Hochgradig optimierter Workflow: • Sehen Sie auf einen Blick alle Elemente mit Farbzugänglichkeitsproblemen hervorgehoben. • Vorschau der Änderungen sofort, mit neu berechneten Kontrastverhältnissen und Urteilen. • Wenden Sie benutzerdefiniertes CSS im Stylesheet-Tab an; betroffene Probleme sind in der Liste markiert. • Um den Farbkontrast manuell zu überprüfen, verwenden Sie das integrierte Farbauswahlwerkzeug: Linksklick, um den Vordergrund festzulegen, Rechtsklick für den Hintergrund, und das Verhältnis wird sofort aktualisiert. • Verwenden Sie den Tab Ausschlüsse, um alles auszublenden, außer den Elementen, die Sie korrigieren. 📐 Kriterien hinter den Urteilen. Dieser Kontrastverhältnisprüfer testet die Farbzugänglichkeit gegen die Anforderungen von WCAG und APCA. APCA Lc wird gegen die Bridge-PCA-Schwellenwerte bewertet, die strenger sind als die entsprechenden WCAG-Verhältnisse — ein Bridge-PCA-Pass impliziert immer einen WCAG-Pass. 🔬 Was ist APCA? APCA (Accessible Perceptual Contrast Algorithm) ist ein Modell, das verfolgt, wie Menschen Text auf einem Bildschirm lesen. Zwei Farbpaare mit demselben WCAG-Verhältnis können deutlich unterschiedlich aussehen, und ihr APCA Lc (Luminanzkontrast) spiegelt das wider: Ein Paar kann WCAG bestehen und dennoch schwer lesbar erscheinen. Dieser Farbzugänglichkeitsprüfer berechnet beide Zahlen. 🚧 Einschränkungen: 1. Wie jeder andere Website-Zugänglichkeitsprüfer gibt dieser nur Schätzungen nach bestem Wissen ab, kein Konformitätszertifikat. 2. Die Abdeckung ist nur textbasiert; die Überprüfung nicht-textueller Elemente (WCAG 1.4.11) steht auf der Roadmap. 3. Cross-Origin-Iframes werden nicht betreten. 4. Komplexe Hintergründe und Animationen werden an einer endlichen Anzahl von räumlichen und zeitlichen Punkten abgetastet; das schlechteste Verhältnis der Proben wird gemeldet, kann aber dennoch optimistisch sein; der Sampler kann auch durch Rendering-Artefakte in die Irre geführt werden. 5. Hochdynamische Seiten können falsche Probleme erzeugen. 6. Dieser Farbkontrastprüfer führt keine OCR auf Bildern automatisch durch; testen Sie Bilder mit bedeutendem Text über das integrierte Farbauswahlwerkzeug. 🔒 Datenschutz und Berechtigungen. ▸ Läuft lokal; keine Webseitendaten verlassen jemals Ihren Computer. ▸ Nur 'activeTab': Das Analyse-Skript wird injiziert, wenn Sie auf das Symbol in der Symbolleiste klicken. ▸ Die Berechtigung 'debugger' ist erforderlich, um in Shadow DOM und Iframes einzutreten, CSS-Quellen zu verfolgen und komplexe Hintergründe zu sampeln. 🧮 Genauigkeitsdetails. Semi-transparenter Text und Opazität der Vorfahren werden korrekt behandelt: Der Vordergrund wird über seinen tatsächlichen Hintergrund zusammengesetzt, bevor die Luminanz gemessen wird, sodass das gemeldete Verhältnis dem entspricht, was die Benutzer tatsächlich sehen. Breite Farbmodelle — oklch, lab, lch, color(display-p3) — werden ebenfalls unterstützt, auf sRGB begrenzt, wenn sie außerhalb des Farbraums liegen. 🎨 Text über Bildern und Farbverläufen. Im Gegensatz zu den meisten ähnlichen Tools gibt dieses nicht auf bei nicht-flachen Hintergründen oder vertraut darauf, was 'getComputedStyle' / 'CSS.getBackgroundColors' berichten. Es verfolgt die Malreihenfolge des Browsers, um den tatsächlichen Hintergrund zu kompositieren — Opazität, Mischmodi, lineare Farbverläufe, Hintergrundfilter — und wenn das nicht ausreicht, sampelt dieses Farbkontrastwerkzeug die gerenderten Pixel an der Position des Textes. ❓ Q&A 📌 Warum erhält dasselbe Farbpaar manchmal unterschiedliche Urteile unter WCAG und APCA? ↳ WCAG misst Luminanz; APCA misst den wahrnehmbaren Kontrast. Ein Paar, das 4.5:1 besteht, kann dennoch unter die Bridge-PCA Lc-Schwelle fallen — ein strengeres Modell. 📌 Ersetzt APCA WCAG? ↳ Nein — APCA ist kein Ersatz, sondern eine nützliche zweite Meinung. Dieser Kontrastprüfer berichtet beides. 📌 Kann ich eine lokale Datei oder meinen Entwicklungsserver mit diesem Zugänglichkeitsprüfer scannen? ↳ Ja. Aktivieren Sie "Zugriff auf Datei-URLs erlauben" in den Erweiterungseinstellungen. Öffnen Sie die Datei:// oder localhost-URL und klicken Sie auf das Symbol in der Symbolleiste. Nur chrome://, der Chrome Web Store und andere eingeschränkte Protokolle werden übersprungen. 📌 Zertifiziert dieses Tool die ADA-Konformität? ↳ Nein. Es überprüft nur den Farbkontrast — eine Facette der Zugänglichkeit. Die ADA-Konformität ist eine rechtliche Bestimmung, die viele Standards und Kriterien (Semantik, Tastaturzugang, Alt-Text, Untertitel und mehr) abdeckt und von einem qualifizierten Fachmann bewertet werden sollte.