WCAG-Kontrastprüfer
Prüfen Sie den Kontrast zwischen einer Textfarbe und ihrer Hintergrundfarbe: Kontrastverhältnis, WCAG-Stufen AA und AAA für Text und Bedienelemente sowie ähnliche konforme Farben.
100 % lokale Verarbeitung — nichts verlässt Ihren Browser.Mehr erfahren
Farbe nicht erkannt. Beispiele: #1E40AF, rgb(30, 64, 175), hsl(224, 71%, 40%), navy
Farbe nicht erkannt. Beispiele: #1E40AF, rgb(30, 64, 175), hsl(224, 71%, 40%), navy
Kontrastverhältnis
Vorschau
Normaler Text (16 px): Franz jagt im komplett verwahrlosten Taxi quer durch Bayern.
Großer Text (24 px)
Großer fetter Text (19 px)
Rahmen eines Feldes oder einer Schaltfläche| Kriterium | Minimum | Ergebnis |
|---|---|---|
| Normaler Text, Stufe AA (WCAG 1.4.3) | 4,5:1 | |
| Normaler Text, Stufe AAA (WCAG 1.4.6) | 7:1 | |
| Großer Text, Stufe AA (WCAG 1.4.3) | 3:1 | |
| Großer Text, Stufe AAA (WCAG 1.4.6) | 4,5:1 | |
| Bedienelemente und Grafiken (WCAG 1.4.11) | 3:1 |
Großer Text: mindestens 24 px (18 pt) oder 18,66 px (14 pt) fett.
- Text:
- Hintergrund:
Keine ähnliche Farbe schafft das: Ändern Sie eine der beiden Farben deutlicher.
Nächste Schritte
Barrierefreiheit Ihrer Website prüfen lassen
Kontraste, Tastaturbedienung, Alternativtexte: Sprechen Sie mit StudioMaestro, dem Webstudio des Herausgebers von Youtilz. Das erste 30-minütige Gespräch ist kostenlos.
Gespräch mit StudioMaestro buchen (öffnet in einem neuen Tab)Service auf Französisch.
Ist Ihr Text kontrastreich genug?
Hellgrauer Text auf weißem Hintergrund wirkt auf einem gut eingestellten Bildschirm elegant, wird aber im Sonnenlicht, auf einem Bildschirm der unteren Preisklasse oder für sehbehinderte Menschen unlesbar. Der Kontrastprüfer berechnet das Verhältnis zwischen Textfarbe und Hintergrundfarbe und zeigt an, welche Stufen der Barrierefreiheit erreicht werden.
Ist der Kontrast unzureichend, schlägt das Tool die ähnlichsten Farben vor, die den Schwellenwert erreichen: derselbe Farbton, nur dunkler oder heller.
Anleitung
- Wählen Sie die Textfarbe und die Hintergrundfarbe mit dem Farbwähler oder durch Eingabe eines Codes (
#1E40AF,rgb(30, 64, 175),hsl(224, 71%, 40%)oder eines CSS-Farbnamens) - Lesen Sie das Kontrastverhältnis und das Ergebnis für jedes Kriterium ab
- Prüfen Sie die Vorschau für normalen Text, großen Text und einen Rahmen
- Klicken Sie bei Bedarf auf „Übernehmen“, um eine vorgeschlagene Farbe zu verwenden
Diese Schwellenwerte sollten Sie kennen
Normaler Text: 4,5:1
Stufe AA der WCAG (Kriterium 1.4.3), übernommen in Kriterium 3.2 des RGAA, des französischen Barrierefreiheitsstandards. Das ist die gesetzlich geforderte Stufe.
Großer Text: 3:1
Für Text von mindestens 24 px (18 pt) oder 18,66 px (14 pt) fett: Große Schrift bleibt auch mit weniger Kontrast lesbar.
Bedienelemente: 3:1
Rahmen von Eingabefeldern, Symbole, Fokuszustände und informationstragende Grafiken (WCAG 1.4.11, RGAA 3.3).
Erweiterte Stufe AAA: 7:1
4,5:1 für großen Text (WCAG 1.4.6). Diese Stufe wird in der Regel nicht verlangt, kommt aber Menschen mit nachlassender Sehkraft zugute.
Für dekorative Texte, Logos und deaktivierte Elemente gelten diese Schwellenwerte nicht.
Wie das Kontrastverhältnis berechnet wird
Jede Farbe erhält eine relative Leuchtdichte von 0 für Schwarz bis 1 für Weiß. Grün hat dabei das größte Gewicht (71,5 %), Blau das geringste (7,2 %), wie beim menschlichen Auge. Das Verhältnis beträgt dann (L1 + 0,05) / (L2 + 0,05), wobei L1 die Leuchtdichte der helleren Farbe ist: Es reicht von 1:1 (zwei identische Farben) bis 21:1 (Schwarz auf Weiß).
Das angezeigte Verhältnis wird abgeschnitten, nie aufgerundet: Ein Kontrast von 4,499:1 wird als 4,49:1 angezeigt und besteht Stufe AA nicht, da die WCAG kein Aufrunden zum Erreichen eines Schwellenwerts erlauben.
Wer ist betroffen?
In Frankreich ist der RGAA für öffentliche Websites und große Unternehmen verbindlich. Seit dem 28. Juni 2025 weitet der European Accessibility Act die Pflichten zur Barrierefreiheit auf viele Dienstleistungen aus, die online an Verbraucher verkauft werden, etwa den Onlinehandel oder Bankdienstleistungen. Kleinstunternehmen, die Dienstleistungen erbringen, sind davon ausgenommen. In Deutschland wird der European Accessibility Act durch das Barrierefreiheitsstärkungsgesetz (BFSG) umgesetzt.
Auch ohne Verpflichtung kommt ein guter Kontrast allen zugute: beim Lesen im Freien, auf abgenutzten Bildschirmen, für eilige Leser.
Einschränkungen
- Halbtransparente Farben werden nicht berücksichtigt: Geben Sie die endgültige Farbe an, so wie sie auf ihrem Hintergrund angezeigt wird.
- Text auf einem Bild oder einem Farbverlauf muss an der Stelle mit dem geringsten Kontrast geprüft werden.
- Der Kontrast ist nur eines von mehreren Kriterien: Auch Schriftgröße, Abstände und Struktur spielen eine Rolle.