Farbkontrast-Checker
Messen Sie mit diesem Farbkontrast-Checker den Kontrast einer Vordergrundfarbe zu einer Hintergrundfarbe. Prüfen Sie die Ergebnisse für WCAG 2.2 AA und AAA, die nächstgelegene Farbe mit ausreichendem Kontrast, transparente Ebenen und Farbpalettenpaare.
Kostenlos, ohne Anmeldung. Läuft in Ihrem Browser, ohne KI-Aufrufe.
Kontrastverhältnis
4,54:1
| Verwendung | Stufe | Erforderlich | Ergebnis |
|---|---|---|---|
| Normaler Text | AA | 4,5:1 | Bestanden |
| Großer Text | AA | 3:1 | Bestanden |
| Bedienelemente und Grafiken | AA | 3:1 | Bestanden |
| Normaler Text | AAA | 7:1 | Nicht bestanden |
| Großer Text | AAA | 4,5:1 | Bestanden |
Diese Vorschau verwendet das Modell von Machado aus dem Jahr 2009 mit maximaler Ausprägung. Sie ist eine Annäherung an die Farbwahrnehmung, keine Diagnose. Die WCAG-Ergebnisse beruhen immer auf den ursprünglichen sichtbaren Farben.
Machado, Oliveira und Fernandes: veröffentlichtes ModellNormaler Text mit 16 Pixeln sieht aus wie dieser Satz.
Großer Text mit 24 Pixeln
Ein Rahmen mit 2 PixelnLizenz des Farbsehmodells
Copyright 2013 Colour Developers Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met: 1. Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer. 2. Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution. 3. Neither the name of the copyright holder nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission. THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS “AS IS” AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE
Farbpalette prüfen
Fügen Sie mindestens zwei Farben hinzu, um die Palette zu vergleichen. Wiederholte Farben werden nur einmal gezählt.
Ein Farbkontrast-Checker misst den Kontrast zweier Farben als Verhältnis von 1:1 bis 21:1. Prüfen Sie die Textanforderungen nach WCAG 2.2 AA und AAA sowie den Grenzwert von 3:1 für Nicht-Text-Elemente. Finden Sie eine Farbe mit ausreichendem Kontrast bei gleichbleibendem Farbton, verrechnen Sie transparente Ebenen mit einer gewählten Grundfläche, vergleichen Sie bis zu 12 Palettenfarben und sehen Sie mit dem Machado-Modell eine Vorschau auf Farbsehstörungen.
So verwenden Sie dieses Tool
- Zwei Farben eingeben
- Geben Sie einen Hex-Code wie #1a1a2e oder #fff, einen rgb()- oder hsl()-Wert oder einen CSS-Farbnamen wie navy ein. Sie können auch die Farbauswahl verwenden. Alpha-Werte in rgba(), hsla() und Hex-Codes mit 4 oder 8 Stellen werden akzeptiert. Legen Sie die Farbe der darunterliegenden Grundfläche fest, um transparente Hintergrund- und Textebenen zu verrechnen. Die Deckkraftregler multiplizieren den bereits im jeweiligen Eingabewert enthaltenen Alphawert. Für die Kontrastberechnung werden die unverrundeten, verrechneten Farben verwendet. Die Hex-Angaben sind Näherungswerte.
- So wird das Kontrastverhältnis berechnet
- Die relative Leuchtdichte jeder Farbe wird nach der WCAG-Formel berechnet. Für das Verhältnis wird die Leuchtdichte der helleren Farbe plus 0.05 durch die Leuchtdichte der dunkleren Farbe plus 0.05 geteilt. Das angezeigte Verhältnis wird auf zwei Dezimalstellen abgerundet. Ein Wert von 4.499 wird daher nie als bestanden angezeigt.
- Was die Konformitätsstufen bedeuten
- Auf die Stufe AA beziehen sich die meisten Gesetze und Richtlinien: 4.5:1 für normalen Text und 3:1 für großen Text. AAA verlangt 7:1 beziehungsweise 4.5:1. Als groß gilt Text ab 24 px oder fetter Text ab etwa 18.7 px. Symbole, Eingabefeldränder und Fokusmarkierungen benötigen zu den angrenzenden Farben einen Kontrast von 3:1.
- Der vorgeschlagene Farbwert
- Wird eine Konformitätsstufe nicht erreicht, behalten wir Farbton und Sättigung der Farbe bei, die Sie ändern möchten. Nur ihre Helligkeit wird in kleinen Schritten angepasst, bis das erforderliche Verhältnis erreicht ist. Die nächstgelegene passende Farbe wird mit ihrem eigenen Kontrastverhältnis angezeigt. „Nächstgelegen“ bedeutet hier die kleinste Änderung der HSL-Helligkeit in Schritten von 0.001, nicht den geringsten wahrgenommenen Farbabstand. Wenn Sie einen Vorschlag übernehmen, wird die Ebene deckend. Bei durchscheinendem Text sollten Sie den Text ersetzen, denn eine Änderung des Hintergrunds würde beide sichtbaren Farben verändern.
- Vorschau für Farbpaletten und Farbsehstörungen
- Geben Sie bis zu 12 unterschiedliche, deckende Farben ein, getrennt durch Zeilenumbrüche, Kommas oder Semikolons. Die Zeilen stehen für Vordergrundfarben, die Spalten für Hintergrundfarben. Für jedes Paar werden das Kontrastverhältnis und das AA-Ergebnis für normalen Text angezeigt. Wählen Sie ein Paar aus, um alle Konformitätsstufen zu prüfen. Die Vorschau für Protanopie, Deuteranopie und Tritanopie nutzt das Modell von Machado, Oliveira und Fernandes (2009) bei vollständiger Ausprägung sowie BSD-lizenzierte Matrizen von Colour Science. Sie nähert die Wahrnehmung an, verändert die WCAG-Berechnung nicht und dient nicht zur Diagnose.
Fragen vor dem Start
Prüfen Sie, wie Ihr Unternehmen in KI-Antworten erscheint
Technische Prüfungen helfen Ihnen, eine Seite zu verbessern. Der kostenlose KI-Sichtbarkeitsscan zeigt, welche Antworten zu Ihrem Unternehmen geprüft wurden und woran Sie als Nächstes arbeiten sollten.