Prinzip P5

Sichtbarkeit Bedienelemente

Was anklickbar ist, muss anklickbar aussehen — vor dem Hover, vor dem Tap.

Warum dieses Prinzip wichtig ist

Eine Schaltfläche, die nicht als solche erkennbar ist, ist keine Schaltfläche.

Schaltflächen müssen geschäftlich funktionieren, bevor sie ästhetisch gefallen. Wenn Ihr primärer Buchungs- oder Kauf-Button visuell nicht als „klickbar“ lesbar ist, verlieren Sie Konversionen — unabhängig davon, ob Nutzer:innen eine Beeinträchtigung haben oder nicht.

Die ästhetische Mode der „Ghost Buttons“ — schmale Outline-Schaltflächen ohne Füllung — sieht in Mockups elegant aus und scheitert in der Praxis. Auf realen Bildschirmen, bei realer Aufmerksamkeit, in realen Nutzungssituationen verschwinden sie zu oft. Was als „minimalistisch“ gemeint war, wird zur Bedienhürde.

Sichtbarkeit ist nicht das Gegenteil von Reduktion. Ein klar gestalteter Solid Button kann minimalistisch sein und gleichzeitig unmissverständlich als Bedienelement lesbar — wenn er konsistent in der Designsprache und konsistent in seiner Positionierung ist.

Fünf Zustände, fünf klare Signale

Default, Hover, Focus, Active, Disabled — jeder Zustand verdient ein eindeutiges visuelles Signal, kein subtiles Verschwinden.

  • Klar lesbarer Ausgangszustand mit hohem Kontrast.

  • Leichte Abdunklung signalisiert Aktivierbarkeit.

  • Sichtbarer Outline-Ring, auch für Tastatur-Navigation eindeutig.

  • Stärkere Abdunklung beim Tap oder Klick als Bestätigung.

  • Eigenes Token mit ≥ 3 : 1 Kontrast plus reduzierte Opazität.

Demonstrative Darstellung der fünf Zustände. Im echten Einsatz erzeugt der Browser diese Zustände aus Pseudo-Klassen — hier sind sie für die Vergleichbarkeit forciert.

Best Practice und Anti-Pattern

Drei Designentscheidungen, die Bedienelemente regelmäßig schwächen — und ihre robusten Alternativen.

Anti-Pattern

Ghost-Button als primärer CTA in der Hero

Der wichtigste Konversionspunkt der Seite ist visuell der schwächste.

Best Practice

Solid Primary plus Outline Secondary

Visuelle Hierarchie entspricht funktionaler Hierarchie.

Anti-Pattern

Focus-Ring durch Sticky-Header überlagert

Tastatur-Fokus springt auf ein scheinbar leeres Feld.

Best Practice

scroll-margin-top auf interaktive Elemente

Fokus landet immer sichtbar im Viewport.

Anti-Pattern

Disabled-Zustand nur durch Opacity-Reduktion

Fällt unter 3 : 1 Kontrast, scheitert SC 1.4.11.

Best Practice

Disabled-Token mit Mindestkontrast plus reduzierte Opacity

Zwei Signale für Disabled, beide WCAG-konform.

Anbindung an WCAG 2.2

Die normativen Erfolgskriterien, an denen dieses Prinzip operativ andockt.

  • SC 2.4.7Focus VisibleAA
  • SC 2.4.11Focus Not Obscured (Minimum)AA
  • SC 2.4.13Focus AppearanceAAA
  • SC 1.4.11Non-text ContrastAA

Verwandte Prinzipien

Sichtbarkeit Bedienelemente lehnt sich an diese Prinzipien an.

Erkennt man auf Ihrer Website auf den ersten Blick, was anklickbar ist?

Selbstcheck starten

Neun Fragen, etwa vier Minuten. Kein Login.