AnyTools
🌓
Farbkontrast-Rechner
Überprüfen Sie WCAG 2.1-Kontrastverhältnisse zwischen beliebigen Vorder- und Hintergrundfarben, sehen Sie sich Beispieltext an und erhalten Sie sofort AA/AAA-Bestehenergebnisse.
Farbeingaben
Vordergrund
Hintergrund
Vorschau
Beispieltext
Vorschau-ÜberschriftBarrierefreie Oberflächen kombinieren lebendige Markenfarben mit ausreichend Kontrast, um den Text lesbar zu halten.
Kontrastergebnisse
Kontrastverhältnis
19.79:1
Relative Leuchtdichte
Vordergrund0.003
Hintergrund1.000
| Kriterium | Erforderlich | Status | Hinweise |
|---|---|---|---|
| AA – normaler Text | 4.5:1 | Bestanden | Fließtext ≥ 4.5:1 |
| AAA – normaler Text | 7.0:1 | Bestanden | Sehr wichtiger Text ≥ 7:1 |
| AA – großer Text | 3.0:1 | Bestanden | Text ≥ 18pt normal oder 14pt fett ≥ 3:1 |
| AAA – großer Text | 4.5:1 | Bestanden | Großer Text ≥ 4.5:1 |
| UI-Grafiken/Symbole | 3.0:1 | Bestanden | Wesentliche Symbole und visuelle Zustände ≥ 3:1 |
Design-Anleitung
Verwenden Sie die Verhältnistabelle als Leitplanke und iterieren Sie, bis jeder Zustand das Zielniveau erreicht.
- Fügen Sie Transparenz oder Überlagerungen hinzu, wenn Sie Text auf Fotos platzieren, um den Kontrast zu erhalten.
- Reservieren Sie AAA für kritischen Text; AA ist ein ausgezeichneter Standard für die meisten Dashboards.
- Dokumentieren Sie die genehmigten Farbpaare in Ihrem Designsystem, damit Entwickler konforme Paletten wiederverwenden können.
❓Was ist Farbkontrast-Test
Farbkontrast-Tests stellen sicher, dass Text oder Symbole lesbar bleiben, indem sie den Unterschied zwischen Vorder- und Hintergrund-Leuchtdichte messen, eine Hauptanforderung in WCAG und den meisten Markenrichtlinien.
✨Hauptfunktionen
🎨
Live-Farbauswahl
Passen Sie Vorder- und Hintergrundfarben mit dem Ant Design-Picker an oder geben Sie präzise HEX-Werte ein.
📊
WCAG-Matrix
Sehen Sie AA/AAA-Anforderungen für normalen Text, großen Text und UI-Grafiken in einer einzigen Tabelle.
🧮
Genaue Leuchtdichte
Kontrastverhältnisse folgen WCAG 2.1 unter Verwendung linearisierter RGB-Kanäle und umfassen Leuchtdichteablesungen pro Farbe.
👁️
Vorschaublock
Testen Sie Überschriften und Absätze in einer Live-Beispielkarte mit Ihrer gewählten Palette.
📋Benutzerhandbuch
Farben wählen
Wählen oder fügen Sie HEX-Werte für Vordergrund und Hintergrund ein.
Verhältnis überprüfen
Überprüfen Sie das berechnete Kontrastverhältnis und die AA/AAA-Tabelle für Bestehen/Fehlschlagen-Einblicke.
Kopie anpassen
Bearbeiten Sie den Beispieltext, um echte Étiquettes, Schaltflächen oder Marketing-Texte zu sehen.
📚Technische Einführung
🔢Relative Leuchtdichte
Jeder RGB-Kanal wird mit der WCAG-Gammakurve in einen linearen Wert umgewandelt, bevor die Leuchtdichte mit den Koeffizienten 0.2126, 0.7152 und 0.0722 berechnet wird.
⚖️Kontrastverhältnis
Die Verhältnisformel (L1 + 0.05) / (L2 + 0.05) vergleicht die helleren und dunkleren Farben, um eine konsistente Lesbarkeit auf allen Geräten zu gewährleisten.
📐Schwellenwerte
AA normaler Text erfordert ≥ 4.5:1, großer Text ≥ 3:1, AAA normal benötigt 7:1, AAA groß 4.5:1, und grafische Objekte sollten 3:1 erfüllen.
❓
Frequently Asked Questions
❓
Verwendet großer Text andere Schwellenwerte?
Ja. Text ≥ 18px normal oder 14px fett gilt als groß und benötigt nur 3:1 für AA oder 4.5:1 für AAA.
💬
Wie teste ich Verläufe?
Überprüfen Sie die hellsten und dunkelsten Stopps im Verlauf. Jedes Stopp-Paar sollte das gewünschte Verhältnis erfüllen.
🔍
Zählen Symbole als Text?
Solide Symbole und wesentliche UI-Grafiken sollten mindestens 3:1 Kontrast im Verhältnis zu ihrem Hintergrund erfüllen.
💡How To & Tips
🧭
Mit Markenpalette beginnen
Tauschen Sie Farben schnell aus, um sowohl helle als auch dunkle Themen aus derselben Basispalette zu testen.
🪄
In kleinen Schritten iterieren
Passen Sie HEX-Werte an oder verwenden Sie den Farbauswahl-Schieberegler, um zu sehen, wie kleine Änderungen die Konformität beeinflussen.
📝
Inhalt in der Vorschau anzeigen
Fügen Sie echten UI-Text in den Vorschaublock ein, um Hierarchie und Betonung zu bewerten.
🔗Related Documents
📖WCAG 2.1 Kontrast (Erfolgskriterium 1.4.3)-Offizielle Anleitung zu minimalen Kontraststufen für Text und Textbilder.
🧭MDN - Leuchtdichte berechnen-Hintergrund zur linearen RGB-Formel, die in Barrierefreiheits-Tools verwendet wird.
🎨Inklusive Designkarten-Tipps zum Kombinieren von Farben und Typografie für verschiedene Zielgruppen.
📝Aktualisierungsprotokoll
📌v1.0.251117v1.0.0Erste Veröffentlichung mit WCAG-Tabelle, Leuchtdichte-Ablesung und Live-Vorschaukarte.(2025-11-17)
📦Empfohlene Komponenten
User Comments
Loading...