Corporate Design digital und barrierefrei: Was sich ändert, wenn Ihre Marke auf den Bildschirm kommt

Warum Print-CDs im Digitalen scheitern – und was ein modernes Designsystem stattdessen braucht.

Viele Corporate Designs wurden für Print entwickelt. Das ist nicht falsch – aber es bedeutet, dass sie für die digitale Welt häufig nicht taugen.

Ein Logo, das auf Briefpapier perfekt wirkt, kann als Favicon verschwinden. Eine Farbkombination, die im Druck leuchtet, kann am Bildschirm zu wenig Kontrast haben. Eine Hausschrift, die in der Broschüre elegant ist, kann auf mobilen Endgeräten unleserlich sein.

Das sind keine Nischenfragen für Webentwickler. Das sind grundlegende Designentscheidungen, die von Anfang an mitgedacht werden müssen.

Ein digitales Corporate Design ist die Übersetzung des visuellen Markensystems in die Anforderungen digitaler Medien. Es berücksichtigt die spezifischen Darstellungsbedingungen von Bildschirmen (Farbprofile, Auflösung, Responsive-Breakpoints), definiert digitale Farbwerte (HEX, RGB), Webfonts und UI-Komponenten, und erfüllt die Anforderungen der digitalen Barrierefreiheit nach WCAG 2.1 AA. Seit dem 28. Juni 2025 sind viele Unternehmen in Deutschland durch das Barrierefreiheitsstärkungsgesetz (BFSG) gesetzlich verpflichtet, ihre digitalen Angebote barrierefrei zu gestalten.

Das eigentliche Problem: Print-Logik im digitalen Raum

Warum viele CDs im Digitalen scheitern – ohne dass es jemand bemerkt

Es gibt Unternehmen, die seit Jahren mit einem Corporate Design kommunizieren, das digital nicht funktioniert – und niemand hat es ihnen gesagt.

Ihre Website nutzt eine Schrift, die nicht als Webfont lizenziert ist – also in anderen Schriften dargestellt wird. Ihr Logo hat im Header keine transparente Version und liegt deshalb auf einem weißen Block. Ihre Primärfarbe erfüllt auf weißem Hintergrund nicht das Mindestkontrastniveau für Barrierefreiheit. Ihre mobilen Seiten sehen gut aus – aber die Schriftgröße ist für ältere Menschen schwer lesbar.

Keiner dieser Fehler ist dramatisch. In der Summe erzeugen sie ein Erscheinungsbild, das weniger professionell wirkt als das Unternehmen ist. Und seit dem 28. Juni 2025 können einige dieser Fehler rechtliche Konsequenzen haben.

Das Gute: Wer ein Corporate Design von Grund auf oder bei der nächsten Überarbeitung digital mitdenkt, vermeidet all diese Probleme – und baut ein System, das auf allen Kanälen funktioniert.

Was sich im Digitalen wirklich verändert

Die vier wesentlichen Unterschiede zwischen Print und Screen

1. Farbsystem wechselt. Print arbeitet mit CMYK und Pantone – subtraktiver Farbmischung mit physischen Pigmenten. Bildschirme arbeiten mit RGB und HEX – additiver Farbmischung mit Licht. Farben, die im Druck identisch aussehen, können auf verschiedenen Bildschirmen unterschiedlich wirken. Wer keine digitalen Farbwerte im CD definiert hat, überlässt die Farbdarstellung dem Zufall.

2. Typografie braucht eine Lizenz für Web und App. Die meisten Schriftlizenzen für Print decken die Einbettung in Websites oder Apps nicht ab. Webfont-Lizenzen müssen separat erworben werden – und die monatlichen Kosten skalieren je nach Nutzungsvolumen. Wer das übersieht, riskiert eine Lizenzrechtsverletzung und muss die Website im schlimmsten Fall auf Systemschriften umstellen.

3. Das Layout muss responsiv sein. Ein Layout, das für einen Desktop-Bildschirm entworfen wurde, funktioniert auf einem Smartphone meistens nicht. Responsives Design ist heute keine Option, sondern Grundvoraussetzung – und Teil der gesetzlichen Barrierefreiheitsanforderungen.

4. Kontrast und Lesbarkeit werden gemessen. Im Print entscheidet das Auge des Designers, ob etwas lesbar ist. Im digitalen Barrierefreiheitsrecht gibt es Messstandards: Kontrastverhältnisse werden berechnet und müssen definierte Mindestwerte erreichen.

Logo und Markenzeichen: Was digital anders ist

Von der Favicon-Tauglichkeit bis zur App-Integration

Ein gutes Logo für die digitale Welt muss deutlich mehr Varianten mitbringen als ein Print-Logo.

Was ein vollständiges digitales Logo-Set enthält:

Hauptvariante als SVG (skalierbar ohne Qualitätsverlust). PNG-Varianten in verschiedenen Auflösungen (für Social Media, E-Mail-Signaturen, Präsentationen). Favicon-Variante: das Logo oder ein Teil davon, der in 16 × 16 Pixel noch erkennbar ist. Variante für dunkle Hintergründe (helle Version für Dark Mode und dunkle Website-Header). Monochromatische Version (ein- oder zweifarbig für Situationen ohne Farbdruck oder eingeschränkte Darstellung). App-Icon-Variante, falls relevant.

Die häufigste Schwäche: Unternehmen haben ein Logo, aber keine Favicon-taugliche Variante. Das Ergebnis: Im Browser-Tab erscheint das Firmenlogo als unkenntliches Pixel-Rauschen – oder, noch schlechter, das Standard-Browser-Icon.

Was beim Logodesign von Anfang an mitgedacht werden sollte: Taugt das Logo in 16 × 16 Pixel noch als Erkennungspunkt? Wenn nicht, braucht es eine vereinfachte Favicon-Variante – ein Bildzeichen oder ein Anfangsbuchstabe, der sofort erkennbar ist.

Farbwelt digital: HEX, RGB und Barrierefreiheit

Warum Farbentscheidungen im Digitalen strategische Konsequenzen haben

Farben im Digitalen funktionieren nach anderen Regeln als im Print – und diese Regeln haben seit 2025 auch rechtliche Relevanz.

Was ein vollständiges digitales Farbsystem enthält:

HEX-Codes für alle Markenfarben (für Web, Social Media, digitale Dokumente). RGB-Werte für alle Markenfarben (für Bildbearbeitung und Videoproduktion). Klare Farbhierarchie: Welche Farbe dominiert, welche ist Akzent, welche ist Hintergrund? Kontrastverhältnisse für alle geplanten Farbkombinationen (Text auf Hintergrund).

Das Kontrast-Thema:

Die WCAG 2.1 fordert für normalen Text mindestens ein Kontrastverhältnis von 4,5:1 gegenüber dem Hintergrund. Für große Texte (ab 18pt / 14pt fett) reicht 3:1. Viele Markenfarben – besonders helle Gelb-, Orange- oder Grüntöne – erfüllen dieses Verhältnis auf weißem Hintergrund nicht.

Das bedeutet in der Praxis: Wer seine Primärfarbe auf weißem Hintergrund für Textdarstellungen nutzt, muss prüfen, ob der Kontrast ausreicht. Wenn nicht, braucht es entweder eine dunklere Textvariante der Farbe oder eine andere Lösung – beides ist designtechnisch lösbar, wenn es im CD-System berücksichtigt wird. Es ist kaum lösbar, wenn es nachträglich geflickt werden muss.

Farbkonsistenz über Geräte: Farben werden auf verschiedenen Bildschirmen unterschiedlich dargestellt – je nach Kalibrierung, Technologie (OLED vs. LCD) und Farbprofil. Absolute Farbkonsistenz ist nicht möglich, aber eine gute Definition der digitalen Farbwerte minimiert Abweichungen.

Typografie digital: Webfonts, Responsive und Lesbarkeit

Was eine Hausschrift können muss, wenn sie im Browser funktionieren soll

Typografie im Digitalen ist komplexer als im Print – weil sie nicht nur gut aussehen, sondern technisch einwandfrei funktionieren muss.

Was eine vollständige digitale Typografiedefinition enthält:

Webfont-Lizenz für alle relevanten Schriftschnitte (separat zur Print-Lizenz). Schriftgröße-Hierarchie für verschiedene Breakpoints (Desktop, Tablet, Mobile). Mindestschriftgröße: 16px für Fließtext ist eine verbreitete Empfehlung – kleinere Schriftgrößen sind für Menschen mit Seheinschränkungen problematisch. Zeilenabstände und Laufweiten für Bildschirmdarstellung (andere Anforderungen als Print). Fallback-Schriften für den Fall, dass der Webfont nicht geladen wird.

Was in der Praxis oft fehlt:

Schriftgröße auf Mobile. Viele Websites haben für Desktop gut lesbare Schriftgrößen – die auf Mobile deutlich zu klein dargestellt werden. WCAG fordert, dass Text ohne Hilfsmittel auf bis zu 200% vergrößert werden kann, ohne dass Inhalt abgeschnitten wird.

Webfont-Performance. Webfonts verlangsamen die Ladezeit – besonders wenn mehrere Schriftschnitte geladen werden. Ein gutes digitales Typografiesystem lädt nur die Schriftschnitte, die tatsächlich gebraucht werden.

Variable Fonts als Lösung: Moderne variable Fonts enthalten alle Schriftgewichte in einer Datei und sind deutlich performanter als klassische Webfonts mit mehreren Dateien. Für neue CD-Projekte sollte diese Option geprüft werden.

Dark Mode: Warum er zum Designthema geworden ist

Und warum viele Marken darauf nicht vorbereitet sind

Dark Mode ist auf Betriebssystemebene (iOS, Android, macOS, Windows) und in Browsern inzwischen Standard. Über 80% der Smartphone-Nutzer nutzen Dark Mode regelmäßig oder dauerhaft.

Was das für Corporate Design bedeutet:

Logos auf dunklem Hintergrund: Ein Logo, das nur in der Primärfarbe auf weißem Hintergrund existiert, ist auf einem dunklen System-Hintergrund häufig nicht lesbar. Eine helle Logovariante für dunkle Hintergründe ist kein Nice-to-have – sie ist eine Grundanforderung für ein vollständiges digitales CD.

Farbwelt im Dark Mode: Helle Hintergrundfarben werden im Dark Mode zu dunklen. Was das mit einer Farbwelt macht, die nur für helle Hintergründe konzipiert wurde, ist oft unschön: Farben, die im Light Mode harmonieren, können im Dark Mode clashing oder unleserlich wirken.

Lösungsansatz: Wer sein Corporate Design mit einem Dark-Mode-Konzept entwickelt oder überarbeitet, definiert für die wichtigsten Anwendungsfälle (Website, App, Dokumente) explizit, wie die Farbwelt im Dark Mode aussieht – als eigenständige Entscheidung, nicht als automatische Invertierung.

Barrierefreiheit: Was das BFSG für Ihr CD bedeutet

Rechtslage, Pflichten und was Designentscheidungen damit zu tun haben

Ab dem 28. Juni 2025 verpflichtet das Barrierefreiheitsstärkungsgesetz (BFSG) Unternehmen in Deutschland, ihre digitalen Angebote barrierefrei zu gestalten. Das Gesetz setzt den European Accessibility Act (EAA) der EU in deutsches Recht um.

Wen betrifft das BFSG?

Betroffen sind Unternehmen, die digitale Produkte oder Dienstleistungen im B2C-Bereich anbieten – unter anderem Online-Shops, digitale Dienstleistungen, Banking, E-Commerce. Rein B2B-orientierte Websites ohne Endkundengeschäft fallen unter bestimmten Bedingungen nicht in den direkten Anwendungsbereich. Kleinstunternehmen mit weniger als zehn Mitarbeitenden und einem Jahresumsatz unter zwei Millionen Euro sind ausgenommen – sofern sie keine digitalen Dienstleistungen verkaufen.

Für öffentliche Stellen gilt die Pflicht bereits länger und weiter.

Was bei Nichteinhaltung droht:

Marktüberwachungsbehörden können Unternehmen zur Anpassung verpflichten. Bei wiederholter Nichterfüllung drohen Bußgelder von bis zu 100.000 Euro und im Extremfall die Einstellung des digitalen Betriebs.

Warum das ein CD-Thema ist und kein reines Entwicklungsthema:

Barrierefreiheit beginnt bei Designentscheidungen – nicht bei der technischen Implementierung. Kontrastverhältnisse werden im Farbsystem definiert. Schriftgrößen werden im Typografiesystem festgelegt. Alt-Texte für Bilder sind eine redaktionelle Entscheidung. Tastaturnavigation hängt von der UI-Struktur ab. Wer Barrierefreiheit erst im Entwicklungsprozess mitdenkt, zahlt für Nachbesserungen. Wer sie im CD-System verankert, baut von Anfang an richtig.

WCAG in der Praxis: Was konkret gefordert ist

Die vier Prinzipien und ihre gestalterischen Konsequenzen

Die WCAG 2.1 basiert auf vier Grundprinzipien. Konformitätsstufe AA ist der rechtlich relevante Standard.

1. Wahrnehmbar Alle Inhalte müssen wahrnehmbar sein – auch ohne Sehvermögen oder Farbwahrnehmung. Gestalterische Konsequenzen: Alt-Texte für alle informativen Bilder. Ausreichende Farbkontraste (4,5:1 für normalen Text). Keine Information nur über Farbe transportieren. Untertitel für Videos.

2. Bedienbar Alle Funktionen müssen ohne Maus bedienbar sein. Gestalterische Konsequenzen: Fokus-Zustände für alle interaktiven Elemente müssen sichtbar sein. Klickflächen müssen groß genug sein (mindestens 44 × 44px empfohlen). Keine Zeitlimits ohne Alternative.

3. Verständlich Inhalte und Bedienelemente müssen verständlich sein. Gestalterische Konsequenzen: Klare Beschriftungen für Formularfelder. Fehlermeldungen müssen verständlich formuliert sein. Konsistente Navigation.

4. Robust Inhalte müssen mit Assistive Technology (Screenreader, Tastatur, Spracheingabe) kompatibel sein. Gestalterische Konsequenzen: Saubere HTML-Struktur mit semantischen Elementen. Korrekte ARIA-Labels für komplexe Interaktionselemente. Responsives Design ohne horizontales Scrollen.

Was das für die CD-Entwicklung bedeutet: Diese Anforderungen sind keine nachträglichen Anpassungen. Sie sind Designanforderungen, die von Anfang an in das CD-System einfließen müssen – in Farbsystem, Typografie, UI-Komponenten und Bildsprache.

Typische Fehler beim digitalen CD

Was regelmäßig übersehen wird

Keine Favicon-Variante. Das Logo ist für Briefpapier perfekt – aber im Browser-Tab ein Pixelmatsch. Eine vereinfachte Favicon-Version gehört zu jedem vollständigen digitalen Logo-Set.

Webfont nicht lizenziert. Die Hausschrift sieht auf der Website wunderbar aus – bis der Lizenzinhaber eine Abmahnung schickt. Webfont-Lizenzen müssen separat geprüft und erworben werden.

Farben nicht auf Kontrast geprüft. Besonders helle Akzentfarben erfüllen auf weißem Hintergrund oft nicht den WCAG-Mindeststandard. Ein Contrast-Checker ist ein 30-Sekunden-Test, der vor teuren Nachbesserungen schützt.

Kein Dark-Mode-Konzept. Das Logo ist nur für helle Hintergründe definiert. Auf dunklen System-Themes ist es nicht sichtbar oder sieht falsch aus.

Mobile nicht mitgedacht. Das CD sieht auf Desktop perfekt aus. Auf Mobile sind Schriften zu klein, Abstände zu eng, Klickflächen zu winzig.

Barrierefreiheit als nachträgliche Aufgabe behandelt. Wer Barrierefreiheit erst nach dem Launch prüft, zahlt für Nachbesserungen, die bei richtiger Planung überflüssig gewesen wären.

Kein digitales Designsystem. Das CD-Manual existiert als PDF für Print. Für Website und App gibt es keine verbindlichen UI-Komponenten oder Farbdefinitionen – also entscheidet jede Entwicklungsphase neu.

Ihre Checkliste: Digital-CD-Grundlagen

Logo:

• Favicon-Variante vorhanden?
• SVG-Datei für skalierbare Darstellung?
• Variante für dunkle Hintergründe definiert?
• Transparente PNG-Varianten in verschiedenen Auflösungen?

Farbwelt:

• HEX und RGB-Werte für alle Markenfarben dokumentiert?
• Kontrastverhältnisse für alle geplanten Text-Hintergrund-Kombinationen geprüft (mindestens 4,5:1)?
• Dark-Mode-Farbkonzept definiert oder zumindest evaluiert?

Typografie:

• Webfont-Lizenz für alle verwendeten Schriftschnitte vorhanden?
• Schriftgrößen-Hierarchie für Desktop, Tablet und Mobile definiert?
• Fließtextgröße mindestens 16px auf Mobile?
• Fallback-Schrift definiert?

Barrierefreiheit (BFSG/WCAG):

• Gilt das BFSG für Ihr digitales Angebot?
• Kontrastverhältnisse WCAG-konform?
• Alt-Texte für alle informativen Bilder definiert?
• Fokus-Zustände für interaktive Elemente sichtbar?
• Website vollständig per Tastatur bedienbar?
• Erklärung zur Barrierefreiheit auf der Website vorhanden?

Was SILBERWEISS anders macht

Digital mitgedacht – von Anfang an

Ein Corporate Design, das nur für Print konzipiert ist, ist heute kein vollständiges Corporate Design mehr.

SILBERWEISS entwickelt CD-Systeme, die von Anfang an die digitalen Anforderungen mitdenken: digitale Farbwerte, Webfont-Lizenzen, Favicon-Varianten, Dark-Mode-Konzepte, Barrierefreiheit nach WCAG. Das sind keine nachträglichen Anpassungen – das ist Teil des Systems.

Das Ergebnis: Ein Corporate Design, das auf Briefpapier genauso gut funktioniert wie auf der Website, in der App und im LinkedIn-Post. Und das rechtssicher ist – heute und in Zukunft.

→ Weiterführende Inhalte:

• Was Corporate Design wirklich ist
• Wann Corporate Design überarbeitet werden muss
• Logo, Typografie, Farbe, Bildsprache
• CD-Manual und Designsystem
• Fluid Branding: Freiheit durch Stabilität
• Corporate Design digital und barrierefrei
• Corporate Design einführen und verankern