Weiße Schrift auf grünem Button: Erst messen, dann wählen

Die tatsächlichen Farben eingeben

Beginnen Sie beispielhaft mit #22c55e als Buttonfläche und #ffffff als Text. Verwenden Sie im eigenen Projekt die berechneten Browserstile. Vordergrund ist die Beschriftung, Hintergrund die Buttonfläche, nicht der allgemeine Seitenhintergrund. Prüfen Sie zunächst zwei deckende Farben.

Dunklen Text vergleichen

Lassen Sie die Fläche gleich und setzen Sie den Text auf #111827. W3C AA verlangt für normalen Text 4,5:1, für großen Text 3:1. Lesen Sie auch das Bestanden-Ergebnis und verlassen Sie sich nicht auf eine gerundete Anzeige. Eine kleine Beschriftung wird durch die Auswahl „großer Text“ nicht tatsächlich groß.

• W3C · WCAG 2.2 · Contrast (Minimum)

Weitere Zustände prüfen

Ändert sich die Fläche beim Darüberfahren, prüfen Sie dieses Paar separat. Erreichen Sie den Button mit der Tastatur und kontrollieren Sie die Beschriftung. Wiederholen Sie die Prüfung im dunklen Design. Die Farben der Entwurfsdatei können von den tatsächlichen CSS-Werten abweichen.

Auf der echten Seite abschließen

Das Werkzeug vergleicht zwei deckende HEX-Farben und untersucht nicht die gesamte Seite. Fotos, Verläufe oder transparente Schichten brauchen zusätzliche Betrachtung. Testen Sie den echten Button am Mobilgerät und mit der Tastatur. Notieren Sie Farben und geprüfte Zustände für spätere Designänderungen.