Farbkontrastprüfer
Über die Genauigkeit des Monitors
Der Farbkontrast-Checker von GrackleDocs kann auf verschiedenen Monitoren unterschiedliche Ergebnisse liefern, insbesondere wenn die Monitoreinstellungen nicht "nativ" sind. Verschiedene Monitore haben unterschiedliche Farbkalibrierungen, Helligkeiten und Kontraste, was die Genauigkeit des Pipettenwerkzeugs zur Auswahl von Farben beeinträchtigen und zu Unstimmigkeiten bei den berechneten Kontrastverhältnissen führen kann. Um konsistente und genaue Ergebnisse zu gewährleisten, sollten Sie das Tool am besten auf einem einzigen, integrierten Display verwenden.
Hilfe - Farbkontrast-Prüfung
Erste Schritte
Mit diesem Tool können Sie überprüfen, ob Ihre Farbkombinationen den Zugänglichkeitsstandards WCAG 2.2 entsprechen. Geben Sie eine Vordergrundfarbe (Text) und eine Hintergrundfarbe ein, um das Kontrastverhältnis und den Konformitätsstatus zu sehen.
Anzustreben sind mindestens 4.5:1 für normalen Text (AA) oder 7:1 für verbesserte Zugänglichkeit (AAA).
Eingabe von Farben
Geben Sie die Farben mit ein:
- Farbwähler: Klicken Sie auf das farbige Quadrat für die visuelle Auswahl
- Hex: Geben Sie Codes wie
#FF5733oderFF5733 - RGB: Werte von 0-255 für Rot, Grün, Blau
- HSL: Farbton (0-360), Sättigung (0-100%), Helligkeit (0-100%)
- HSV: Farbton (0-360), Sättigung (0-100%), Wert (0-100%)
- Namen der Farben: CSS-Namen wie
rot,darkslategray
EyeDropper Werkzeug
Wähle mit der Pipette eine beliebige Farbe von deinem Bildschirm.
Farbschieberegler und Alpha
Klicken Sie auf "Farbschieberegler", um die einstellbaren Regler zu öffnen:
- RGB: Rot, Grün, Blau (0-255)
- HSL: Farbton, Sättigung, Helligkeit
- HSV: Farbton, Sättigung, Wert
- Alpha: Transparenz (0-1)
WCAG 2.2 Erfolgskriterien
| Kriterium | Ebene | Normal | Groß |
|---|---|---|---|
| SC 1.4.3 (Minimum) | AA | 4.5:1 | 3:1 |
| SC 1.4.6 (Erweitert) | AAA | 7:1 | 4.5:1 |
| SC 1.4.11 (Nicht-Text) | AA | 3:1 | |
Vorgeschlagene barrierefreie Farben
Wenn der Kontrast nicht ausreicht, schlägt das Tool zugängliche Alternativen vor:
- AA/AAA-Vorschläge: Farben, die den Anforderungen entsprechen
- Zum Anwenden klicken: Klicken Sie auf einen Vorschlag, um ihn zu verwenden
- Rückgängig machen: Rückgängig machen mit der Schaltfläche Rückgängig
Visionssimulation
Sehen Sie sich an, wie Farben bei unterschiedlichen Sehbedingungen erscheinen:
- Protanopie/Deuteranopie/Tritanopie: Arten von Farbenblindheit
- Monochromie: Vollständige Farbenblindheit
- Sehschärfe: Verschwommenes Sehen (20/40 bis 20/400)
- Tunnelblick: Peripherer Sehverlust
Kopieren von Ergebnissen
- Zusammenfassung kopieren: Kurzes Kontrastverhältnis und Status
- Ausführliche Kopie: Vollständiger WCAG-Konformitätsbericht
- Farbe kopieren: Einzelne Farbwerte
Tastatur-Navigation
- Registerkarte - Steuerelemente navigieren
- Flucht - Dialoge schließen
- Pfeiltasten - Schieberegler einstellen
Vordergrundfarbe
Hintergrundfarbe
BEISPIEL: Vordergrund auf Hintergrund
Kontrastverhältnis: 21.00:1
WCAG 2.2 Erfolgskriterien
Dies ist normaler Fließtext, der den Kontrast zwischen Vordergrund- und Hintergrundfarben veranschaulicht.
Dies ist großer Text (24px fett).
Interaktive Elemente: Beispiel-Link
Vorgeschlagene barrierefreie Farben
Klicken Sie auf einen beliebigen Vorschlag, um ihn als Vordergrundfarbe zu verwenden