Kontrast im Webdesign: Visuelle Hierarchie gezielt aufbauen und WCAG Kontrastverhältnis richtig prüfen

Was bedeutet Kontrast im Webdesign?

Kontrast im Webdesign ist der bewusste Unterschied zwischen Elementen einer Seite: hell gegen dunkel, groß gegen klein, fett gegen dünn, voll gegen leer. Dieser Unterschied lenkt den Blick, hebt wichtige Informationen hervor und hält Texte lesbar. Zugleich ist er eine messbare Anforderung der Barrierefreiheit, die WCAG über Kontrastverhältnisse festlegt.

Ich arbeite seit 2012 an Webprojekten. Wenn ein Layout „unruhig“ wirkt, lautet die Diagnose meistens gleich: Entweder schreit alles gleich laut, oder alles flüstert. In diesem Beitrag betrachte ich Kontrast aus zwei Richtungen. Zunächst geht es um visuelle Hierarchie, also darum, wie ein Design Leser führt. Danach geht es um die messbaren Werte, die das W3C definiert. Die emotionale Wirkung von Farben behandle ich im Artikel über Farbpsychologie im Webdesign; hier steht der Unterschied selbst im Mittelpunkt.

Warum ist Kontrast auf einer Website so wichtig?

Besucher lesen eine Seite selten von oben nach unten. Sie scannen zunächst. Dabei bleibt das Auge vor allem an Unterschieden hängen. Ist die Überschrift deutlich größer als der Fließtext, hebt sich der Button von seiner Umgebung ab und springt der Preis ins Auge, dann versteht ein Leser das Angebot in wenigen Sekunden.

Fehlt der Kontrast, kommen meist drei Probleme zusammen:

• Die Lesbarkeit sinkt: Hellgrauer Text verschwindet auf dem Smartphone in der Sonne fast vollständig.
• Die Priorität geht verloren: Alles hat das gleiche Gewicht, also weiß niemand, wohin er klicken soll.
• Die Barrierefreiheit leidet: Menschen mit Sehschwäche, Farbfehlsichtigkeit oder altersbedingten Einschränkungen erreichen die Inhalte nicht.

Kontrast ist deshalb keine Dekoration, sondern der Träger der Botschaft. Außerdem signalisiert er Sorgfalt. Eine Preistabelle, die niemand lesen kann, kostet Vertrauen, ganz gleich, wie gut das Produkt dahinter ist.

Wen betrifft schwacher Kontrast am stärksten?

Viele Teams halten Kontrast für ein Randthema. Tatsächlich ist die betroffene Gruppe viel größer, als man denkt. Zuerst denkt man an Menschen mit Sehschwäche, Farbfehlsichtigkeit oder grauem Star. Allerdings endet die Liste dort nicht.

• Ältere Nutzer: Das alternde Auge braucht mehr Licht und deutlichere Unterschiede.
• Mobile Nutzer: Alle, die draußen, in der Sonne oder mit gedimmtem Display lesen.
• Nutzer mit einfachen Bildschirmen: Günstige Monitore und alte Smartphones zeigen Farben blass an.
• Müde oder eilige Leser: Wer abends nach einem langen Tag liest, ist ebenfalls vorübergehend eingeschränkt.

Anders gesagt: Kontrast im Webdesign ist kein Gefallen für eine Minderheit. Fast jeder braucht ihn irgendwann. Diese Sicht hilft auch, wenn ein Kunde sagt: „Etwas blasser wirkt doch eleganter.“ Denn dann dreht sich das Gespräch nicht mehr um Geschmack, sondern um die echten Bedingungen Ihrer Besucher.

Wie bauen Sie mit Kontrast eine visuelle Hierarchie auf?

Visuelle Hierarchie bedeutet, Informationen nach ihrer Wichtigkeit zu ordnen. Kontrast ist daher das wichtigste Werkzeug. Soll ein Element nach vorne rücken, machen Sie es anders als seine Umgebung. Soll es im Hintergrund bleiben, gleichen Sie es an.

In der Praxis denke ich jede Seite in drei Ebenen:

1. Erste Ebene: Kernbotschaft und wichtigste Aktion. Hier gehört der stärkste Kontrast hin.
2. Zweite Ebene: Zwischenüberschriften, unterstützende Aussagen, kurze Beschreibungen.
3. Dritte Ebene: Hinweise, Fußnoten, Metadaten. Weniger Kontrast, aber trotzdem gut lesbar.

Der letzte Punkt ist entscheidend. Eine leise Ebene muss keine unleserliche Ebene sein. Viele Designer blenden Nebentexte so stark ab, dass sie unter die Schwelle der Barrierefreiheit fallen. Bauen Sie die Hierarchie deshalb nicht nur über helles Grau auf, sondern kombinieren Sie Größe, Schriftstärke und Abstand. So bleibt das Verhältnis stabil, und die Reihenfolge ist trotzdem klar.

Ein einfacher Test hilft dabei. Treten Sie einen Schritt zurück oder kneifen Sie die Augen zusammen. Sehen Sie dann immer noch zuerst die Kernbotschaft, stimmt die Hierarchie.

Welche Arten von Kontrast gibt es?

Bei Kontrast denken die meisten an Schwarz und Weiß. Tatsächlich ist der Werkzeugkasten allerdings viel größer:

• Helligkeitskontrast: der Unterschied zwischen hellen und dunklen Tönen. Er bestimmt die Lesbarkeit am stärksten.
• Farbtonkontrast: verschiedene Farben nebeneinander, etwa Blau und Orange.
• Größenkontrast: das Verhältnis zwischen großer Überschrift und kleinem Fließtext.
• Stärkenkontrast: fette gegen feine Schriftschnitte.
• Formkontrast: zum Beispiel ein runder Button zwischen eckigen Karten.
• Raumkontrast: viel Weißraum neben einem dichten Bereich.
• Bewegungskontrast: ein einziges bewegtes Element auf einer ruhigen Seite. Wirksam, solange Sie es sparsam nutzen.

Diese Arten wirken am besten gemeinsam. Unterscheidet sich ein Button zum Beispiel in Farbe, Form und Umgebung, bemerkt ihn auch jemand mit schwacher Farbwahrnehmung. Zudem ersetzt eine übertriebene Kontrastart die anderen nicht; die Balance ist die eigentliche Aufgabe.

Stellen Sie sich eine Produktseite im Onlineshop vor. Der Produktname ist groß und fett, der Preis dunkel und prominent. Der Button „In den Warenkorb“ ist das einzige gefüllte, kräftig gefärbte Element. Versandinfos und Rückgabebedingungen stehen kleiner, aber gut lesbar in Grau. Dann sieht der Leser erst das Produkt, danach den Preis und schließlich den Button, ganz ohne Anleitung. Genau das leistet Kontrast im Webdesign, wenn Sie die Arten in der richtigen Reihenfolge kombinieren.

Worin unterscheiden sich Farbkontrast und Helligkeitskontrast?

Diese Unterscheidung sorgt in der Praxis für die meiste Verwirrung. Zwei Farben können völlig verschieden aussehen und trotzdem unlesbaren Text ergeben, wenn ihre Helligkeit ähnlich ist. Grüne Schrift auf Rot ist das klassische Beispiel: gegensätzliche Farbtöne, aber ähnliche Helligkeit. Zudem fällt genau die Unterscheidung von Rot und Grün bei der häufigsten Form der Farbfehlsichtigkeit schwer.

Auch die Formel der WCAG arbeitet mit relativer Leuchtdichte, nicht mit dem Farbton. Das heißt, sie fragt, wie hell oder dunkel eine Farbe ist, nicht wie kräftig sie wirkt. Deshalb erreicht ein leuchtendes Gelb auf Weiß nur einen sehr niedrigen Wert, egal wie grell es Ihnen vorkommt.

Mein Rat: Schalten Sie das Design bei der Prüfung einer Palette einmal auf Graustufen. Verschwimmen zwei Elemente in Grau, verschwimmen sie auch für viele echte Nutzer. Dieser kurze Test holt die Farbwahl aus dem Bauchgefühl heraus. HEX und RGB Werte finden Sie schnell mit unserem Tool für HTML Farbcodes.

Was ist das Kontrastverhältnis nach WCAG und wie berechnen Sie es?

Das Kontrastverhältnis nach WCAG drückt den Helligkeitsunterschied zwischen Vordergrund und Hintergrund in einer einzigen Zahl aus. Laut Definition des W3C lautet die Formel (L1 + 0,05) / (L2 + 0,05). L1 steht für die relative Leuchtdichte der helleren Farbe, L2 für die der dunkleren.

Das Ergebnis liegt zwischen 1:1 und 21:1. Zwei identische Farben ergeben 1:1, reines Schwarz auf reinem Weiß ergibt den Höchstwert von 21:1. Ein Detail ist dabei wichtig: Laut W3C dürfen Sie den berechneten Wert nicht runden. Ein Ergebnis von 4,499:1 erfüllt also die Schwelle von 4,5:1 nicht.

Einige konkrete Beispiele auf weißem Hintergrund:

• Das Grau #767676 erreicht etwa 4,54:1 und besteht die Schwelle für normalen Text.
• Das Grau #777777 erreicht etwa 4,48:1 und liegt knapp darunter.
• Das Grau #595959 erreicht etwa 7:1 und erfüllt die strengste Stufe.

Zwei Grautöne, die Sie mit bloßem Auge kaum unterscheiden, liefern also verschiedene Ergebnisse. Prüfen Sie Kontrast daher mit Messwerten, nicht nach Gefühl. Rechnen müssen Sie nicht selbst: Geben Sie zwei Farben in unseren Kontrastrechner ein, dann sehen Sie sofort das Verhältnis und die erfüllten Stufen.

Ein weiterer häufiger Fehler: Teams prüfen den Haupttext und übersehen die kleinen Details. Der Text im Cookie Banner, Hilfetexte unter Formularfeldern, der Hinweis „inkl. MwSt.“ neben dem Preis und die Links im Footer folgen derselben Regel. Gerade diese kleinen Texte sind meist am blassesten, deshalb fallen sie am häufigsten durch.

Welche Kontrastwerte braucht Text?

WCAG 2.2 definiert den Textkontrast auf zwei Stufen. Stufe AA ist die Basis, auf die sich die meisten Gesetze und Unternehmensrichtlinien beziehen. Stufe AAA ist strenger und dient als ideales Ziel. Die folgende Tabelle folgt der offiziellen Erläuterung des W3C zu 1.4.3 Contrast (Minimum) und den verwandten Kriterien:

Die Definition von „großem Text“ sorgt oft für Missverständnisse. Laut W3C entsprechen 18 pt und 14 pt fett auf dem Bildschirm etwa 24 px und 18,5 px. Für normalen Fließtext mit 16 px sollten Sie also immer 4,5:1 anpeilen. Den rechtlichen Rahmen in Deutschland erkläre ich im Beitrag zur barrierefreien Website nach WCAG und BFSG.

Wie viel Kontrast brauchen Buttons, Icons und Formularfelder?

Die Anforderung endet nicht beim Text. Das Kriterium 1.4.11 zum Kontrast von Bedienelementen und Grafiken stammt aus WCAG 2.1 und gilt auch in 2.2. Es verlangt für Bedienelemente und bedeutungstragende Grafiken ein Verhältnis von 3:1 zu angrenzenden Farben. Dazu zählen:

• Rahmen von Eingabefeldern, wenn Nutzer das Feld nur daran erkennen.
• Checkboxen, Schalter und Anzeigen für ausgewählte Zustände.
• Der Fokusindikator für die Tastaturbedienung.
• Icons mit eigener Bedeutung, etwa ein Telefon oder eine Lupe.
• Linien und Segmente in Diagrammen, die für das Verständnis nötig sind.

Den häufigsten Fehler sehe ich bei hellgrauen Feldrahmen auf weißem Grund. Nutzer erkennen nicht, wo das Feld beginnt, und das Ausfüllen fällt schwerer. Ebenso problematisch ist es, den Standardfokus des Browsers zu entfernen und durch einen blassen Schatten zu ersetzen. Dann verlieren Tastaturnutzer die Orientierung.

Andererseits sind inaktive Elemente von der Anforderung ausgenommen. Wirkt ein deaktivierter Button allerdings zu blass, versteht niemand, warum er nicht reagiert. Ein kurzer Hinweistext daneben löst das. Mehr zur Gestaltung von Buttons lesen Sie im Beitrag mit Beispielen für CTA Buttons.

Warum reicht Farbe allein als Informationsträger nicht aus?

Das Kriterium 1.4.1 Benutzung von Farbe verlangt, dass Farbe nicht das einzige visuelle Mittel zur Vermittlung einer Information ist. Der Grund ist einfach: Wer eine Farbfehlsichtigkeit hat oder den Bildschirm in Graustufen nutzt, erkennt einen reinen Farbunterschied nicht.

Typische Beispiele sind konkret:

• Ein fehlerhaftes Formularfeld nur mit rotem Rahmen markieren.
• Links im Fließtext ohne Unterstreichung, also nur über die Farbe erkennbar.
• Datenreihen in Diagrammen ausschließlich über Farben trennen.
• Den Lagerstatus nur mit einem grünen oder roten Punkt anzeigen.

Die Lösung ist ein zweites Signal. Sie schreiben die Fehlermeldung als Text, behalten bei Links eine Unterstreichung oder fettere Schrift und nutzen in Diagrammen Muster oder direkte Beschriftungen. So unterstützt Farbe die Information, statt sie allein zu tragen. Diese Regel ist vom Kontrastverhältnis getrennt. In der Praxis sollten Sie beide trotzdem zusammen behandeln, denn beide schützen dieselben Nutzer.

Welche Fehler beim Kontrast im Webdesign sehe ich am häufigsten?

In meinen Audits tauchen immer wieder dieselben Fehler auf. Die meisten entstehen nicht aus Nachlässigkeit, sondern aus dem Wunsch nach einem „cleanen“ Look:

1. Hellgrauer Fließtext: Töne wie #999 für einen modernen Eindruck. Auf Weiß erreicht dieser Wert nur etwa 2,85:1, also weit unter der Schwelle.
2. Platzhalter statt Beschriftung: Der blasse Beispieltext verschwindet beim Tippen und hat ohnehin wenig Kontrast.
3. Text direkt auf Fotos: Weiße Schrift auf einer hellen Bildstelle ist schlicht weg.
4. Weiße Schrift auf hellen Markenfarben: zum Beispiel auf einem hellen Türkis.
5. Alles betonen: fünf kräftige Farben und drei primäre Buttons auf einem Screen. Am Ende sticht nichts heraus.
6. Hover und Fokus vergessen: Niemand prüft, ob der Kontrast beim Zustandswechsel sinkt.

Der letzte Punkt verdient besondere Aufmerksamkeit. In der Designdatei wirkt alles perfekt. Auf der Live Seite verschmilzt die Buttonschrift beim Hover dann aber mit dem Hintergrund. Prüfen Sie deshalb auch im Browser, nicht nur im Designtool. Für eine strukturierte Prüfung empfehle ich die Schritte aus meinem Leitfaden zum UX Audit.

Wie setzen Sie Kontrast in der Typografie ein?

Typografie erzeugt starken Kontrast, ohne dass Sie eine Farbe ändern. Das Größenverhältnis zwischen Überschrift und Fließtext erleichtert das Scannen. Eine Hauptüberschrift mit 36 bis 44 px wirkt neben 16 px Fließtext zum Beispiel deutlich, aber nicht schreiend.

Die Schriftstärke erfüllt ebenso dieselbe Aufgabe. Eine fette Zwischenüberschrift hebt sich von einem normalen Absatz von selbst ab. Vorsicht allerdings bei feinen Schnitten wie Light oder Thin. Solche Schriften belegen pro Buchstabe nur wenige Pixel, deshalb fällt das Lesen schwer, selbst wenn das Verhältnis technisch reicht.

Auch die Kombination zweier Schriftfamilien ist eine Kontrastentscheidung. Eine Serifenschrift für Überschriften neben einer serifenlosen Schrift für den Fließtext schafft Abstand und stärkt die Hierarchie. Wählen Sie dagegen zwei fast gleiche Schriften, entsteht weder Kontrast noch Harmonie, sondern nur Unruhe. Details dazu finden Sie in meinem Beitrag zur Wahl der Webtypografie.

Wie schaffen Sie Kontrast mit Weißraum und Layout?

Weißraum ist das günstigste und zugleich am wenigsten genutzte Kontrastmittel. Lassen Sie auf einer vollen Seite viel Platz um ein Element, rückt es ohne jede Farbänderung in den Vordergrund. Deshalb zeigen Luxusmarken wenige Produkte und viel leere Fläche.

Beim Layout gilt zudem dieselbe Logik. Ist der Großteil der Seite linksbündig, zieht ein zentrierter Block Aufmerksamkeit auf sich. Sind alle Karten gleich groß, fällt eine größere Karte sofort auf. Kurz gesagt heißt Kontrast: ein Muster etablieren und es an einer Stelle bewusst brechen.

Eine Warnung gehört allerdings dazu: Der Bruch funktioniert nur einmal. Erfindet jeder Abschnitt seine eigene Ausnahme, lernen Leser die Regel nie, und die Ausnahme verliert ihre Wirkung. Bauen Sie daher ein ruhiges System und sparen Sie die Betonung für wenige, wirklich wichtige Stellen auf. Wie ein solches System aussieht, beschreibe ich im Beitrag über minimalistisches Webdesign.

Was tun, wenn die Markenfarben zu wenig Kontrast haben?

Diese Situation begegnet mir in Unternehmensprojekten am häufigsten. Die Hauptfarbe der Marke ist ein helles Grün, Orange oder Gelb und erreicht mit weißer Schrift keine 4,5:1. Das Logo zu ändern, kommt selten in Frage; Text im Logo ist ohnehin ausgenommen. Buttons und Texte in der Oberfläche sind es allerdings nicht.

Konkret nutze ich diese Lösungen:

• Dunklere Variante ableiten: einen tieferen Ton derselben Farbe verwenden. Das Auge erkennt die Farbfamilie, und das Verhältnis steigt.
• Schriftfarbe umkehren: dunkles Marineblau oder Schwarz statt Weiß auf hellen Buttons.
• Farbe auf Flächen verlagern: die Markenfarbe für große Flächen, Icons und Trennlinien nutzen, nicht für Text.

Solche Entscheidungen fallen zu Beginn viel leichter, also bei der Entwicklung der Markenidentität. Wenn mein Team und ich in einem Projekt zur Markenidentität eine Palette festlegen, messen wir jede Farbe von Anfang an gegen helle und dunkle Hintergründe. Somit gibt es später auf der Website keine Diskussion darüber, dass „diese Farbe nicht funktioniert“.

Wie gestalten Sie Kontrast im Webdesign für den Dark Mode?

Dark Mode bedeutet mehr, als das helle Theme umzukehren. Reines Weiß auf reinem Schwarz liefert zwar den Höchstwert von 21:1, doch bei langen Texten kann dieser harte Unterschied ermüden. Viele Designsysteme bevorzugen daher eine dunkelgraue Fläche. Die Richtlinien von Material Design empfehlen dafür zum Beispiel den Ton #121212.

Achten Sie dabei auf folgende Punkte:

• Eine Markenfarbe, die im hellen Theme funktioniert, wirkt auf dunklem Grund oft zu dunkel. Messen Sie beide Themes getrennt.
• Schatten verschwinden auf dunklen Flächen fast vollständig. Trennen Sie Ebenen stattdessen über Helligkeitsstufen.
• Blasser Nebentext wird im Dark Mode noch schwächer; halten Sie auch hier mindestens 4,5:1 ein.

Zusammengefasst heißt das: zwei Themes, zwei Paletten. Veröffentlichen Sie keines davon, ohne es auf dem eigenen Hintergrund zu prüfen. Auf unserer Website haben wir helle und dunkle Farben getrennt definiert; in unserer Erklärung zur Barrierefreiheit beschreiben wir, wie wir Kontrastwünsche von Nutzern unterstützen.

Wie bleibt Text auf Bildern gut lesbar?

Eine Überschrift auf einem großen Titelbild wirkt zunächst eindrucksvoll. Allerdings hat ein Foto nie nur eine Farbe. Ein Teil des Textes liegt vielleicht auf einer dunklen Fläche, ein anderer auf hellem Himmel. Dann ändert sich das Verhältnis von Buchstabe zu Buchstabe.

Bewährte Techniken sind zum Beispiel:

1. Halbtransparente Ebene: eine dunkle, durchscheinende Schicht über dem Foto.
2. Textbox: die Überschrift in eine einfarbige Fläche setzen.
3. Verlauf: ein Übergang, der auf der Textseite dunkler wird.
4. Bildauswahl: ein Foto mit ruhiger, einfarbiger Zone an der Textposition.

Nehmen Sie beim Messen den hellsten Punkt hinter dem Text als Referenz, denn die schlechteste Stelle bestimmt die Grenze der Lesbarkeit. Zudem schneiden Smartphones Bilder anders zu. Ein Layout, das am Desktop sicher wirkt, schiebt den Text am Handy womöglich auf eine helle Stelle. Prüfen Sie deshalb beide Ansichten getrennt.

Kann Kontrast im Webdesign auch zu stark sein?

Ja, das kann er. Kontrast im Webdesign ist eine Frage der Balance, und zu viel davon stört die Kommunikation ebenfalls. Hat jedes Element hohen Kontrast, findet das Auge keine Ruhe, und die Seite wirkt anstrengend und aggressiv. Außerdem gilt: Wenn alles wichtig aussieht, sticht nichts mehr heraus.

Hilfreich ist deshalb die Trennung zweier Begriffe. Der erste ist der Lesekontrast, also das Verhältnis zwischen Text und Hintergrund. Ihn zu erhöhen, ist fast immer gut, und unter das Minimum sollten Sie nie gehen. Der zweite ist der Betonungskontrast, also der Unterschied in der Wichtigkeit von Elementen. Diesen setzen Sie sparsam und bewusst ein.

Als Faustregel empfehle ich pro Ansicht eine Hauptaktion, höchstens zwei Akzentfarben und wenige Überschriftenebenen. Auf einer Leistungsseite sollte zum Beispiel der Button „Angebot anfragen“ das kontrastreichste Element sein. Nebenlinks erscheinen dagegen in einem ruhigeren Stil. Dann verstehen Leser, was zählt, ohne dass Sie es erklären müssen.

Wie prüfen Sie den Kontrast Schritt für Schritt?

Machen Sie die Kontrastprüfung zu einem festen Schritt im Designprozess, statt sie einmal abzuhaken. Ich gehe in dieser Reihenfolge vor:

1. Palette tabellarisch erfassen: jedes Paar aus Text und Hintergrund messen. Notieren Sie, welche Paare nur für großen Text taugen.
2. Komponenten messen: Buttons, Formularfelder, Checkboxen und Fokusindikator auf 3:1 zur Umgebung prüfen.
3. Zustände testen: Hover, Fokus, ausgewählt, Fehler und deaktiviert einzeln ansehen.
4. Graustufentest: die Seite in Graustufen umschalten und prüfen, ob die Hierarchie hält.
5. Automatischer Scan: Die Barrierefreiheitsprüfung in Tools wie Lighthouse listet Kontrastfehler auf.
6. Echtes Gerät: das Smartphone draußen bei niedriger Helligkeit testen.

Automatische Tools erkennen allerdings nicht alles. Text auf Bildern oder Verläufen messen sie zum Beispiel oft falsch. Deshalb brauchen Sie zusätzlich eine manuelle Prüfung. Für einzelne Farbpaare ist der Kontrastrechner der schnellste Weg; für die sprachliche Seite Ihrer Texte hilft das Tool zum Prüfen der Lesbarkeit.

Noch ein Hinweis: Jede Änderung der Palette erfordert eine neue Messung. Eine neue Bannerfarbe für eine Kampagne oder ein frisches Produktlabel kann die Balance unbemerkt kippen. Deshalb sehe ich Kontrast im Webdesign als laufende Pflege und nicht als einmaliges Projekt.

Wie wirkt sich Kontrast im Webdesign auf Conversion und SEO aus?

Zunächst eine klare Aussage: Google hat nicht erklärt, dass Farbkontrast ein direktes Rankingsignal ist. Die Erwartung „Kontrast verbessert, also steigt mein Ranking“ ist daher unrealistisch. Die indirekten Effekte sind allerdings real und wichtig.

Auf einer Seite, die niemand lesen kann, gehen Besucher, bevor sie finden, was sie suchen. Wer den Button nicht bemerkt, erreicht das Anfrageformular nie. Dieses Verhalten drückt Ihre Conversion Rate direkt. Zudem erfasst der Barrierefreiheitswert in Lighthouse Kontrastfehler und liefert Ihnen so einen konkreten Qualitätsindikator.

Auch die rechtliche Seite gewinnt an Gewicht. In Deutschland gilt das Barrierefreiheitsstärkungsgesetz seit dem 28. Juni 2025 für bestimmte digitale Produkte und Dienstleistungen, etwa im E-Commerce. Für betroffene Unternehmen ist WCAG damit mehr als gute Praxis. Kurz gesagt betrifft Kontrast gleichzeitig Nutzer, Conversion und rechtliches Risiko.

Wie gehen mein Team und ich bei Kontrast auf einer Website vor?

Wenn wir ein Projekt im Webdesign beginnen, behandeln wir Kontrast nicht als Detail für den Schluss. Am Tag der Palettenwahl messen wir jedes Farbpaar und legen fest, wo welches Paar erscheinen darf. Dadurch gibt es im weiteren Verlauf keine Überraschungen.

Danach bauen wir die Hierarchie auf, denn sie trägt die Seite. Für jede Seite definieren wir eine Hauptaktion und geben ihr den stärksten Kontrast. Nebenelemente trennen wir eher über Größe und Abstand als über Farbe. Das beruhigt die Seite und senkt das Risiko, unter die Schwellen der Barrierefreiheit zu rutschen.

Schließlich testen wir in der Live Umgebung: verschiedene Geräte, Dark Mode, Tastaturbedienung und automatische Scans. Sind Sie bei Ihrer eigenen Website unsicher, messen Sie zuerst Ihre Farben mit dem Tool. Fallen mehrere Paare unter die Schwelle, sprechen Sie uns an, dann schauen wir uns die Struktur gemeinsam an.