Inhaltselemente
Übersicht
Farbpalette
Folgende Farben stehen für alle Elementen zur Auswahl:
Rot
Grün dunkel
Grün
Eierschale
Orange
Violette
Pflaume
Hellblau
Orange hell
Lavendel
Rosa
Grün hell
Beim Einsatz der Farben miteinander ist zu beachten, dass sich nicht alle Farben gut miteinander kombinieren lassen. Im Rahmen der Barrierefreiheit sollte darauf geachtet werden, dass ein ausreichender Kontrast zwischen Schrift und Hintergrund entsteht.
Nachfolgend werden alle möglichen Kombinationen zwischen Schriftfarbe und Hintergrund aufgelistet.
Legende: Für Schriftgrößen unter 24px (bzw. 18,7px bei fetter Schrift): 4,5:1 oder höher!
✅= Ausreichend für normale Schrift, da der Kontrast zum Hintergrund über 4,5:1 liegt.
❌= Nicht ausreichend für normale und fette Schrift sowie Überschriften, da der Kontrast zum Hintergrund unterhalb von 3:1 liegt.
⚠️= Nicht ausreichend für normale aber für fette Schrift und Überschriften, da der Kontrast zwischen 3:1 und 4,5:1 liegt.
Hintergrund: Weiß
✅Schwarz
✅Grün dunkel
✅Rot
✅Violette
✅Pflaume
⚠️Grün
⚠️Orange
❌Grün hell
❌Orange hell
❌Lavendel
❌Rosa
❌Hellblau
❌Eierschale
Primärfarben
Hintergrund: Rot
✅Weiß
✅ Eierschale
⚠️Schwarz
⚠️Grün hell
⚠️Lavendel
⚠️Rosa
❌Grün dunkel
❌Grün
❌Orange
❌Orange hell
❌Violette
❌Pflaume
❌Hellblau
Hintergrund: Grün dunkel
✅Weiß
✅Eierschale
✅Grün hell
✅Orange hell
✅Lavendel
✅Rosa
⚠️Schwarz
⚠️Grün
⚠️Orange
⚠️Hellblau
❌Rot
❌Violette
❌Pflaume
Hintergrund: Grün
✅Schwarz
⚠️Weiß
⚠️Grün dunkel
❌Grün hell
❌Rot
❌Orange
❌Orange hell
❌Violette
❌Pflaume
❌Lavendel
❌Hellblau
❌Rosa
❌Eierschale
Hintergrund: Eierschale
✅Schwarz
✅Grün dunkel
✅Rot
✅Violette
✅Pflaume
⚠️Orange
❌Weiß
❌Grün
❌Grün hell
❌Orange hell
❌Lavendel
❌Hellblau
❌Rosa
Sekundärfarben
Hintergrund: Orange
✅Schwarz
⚠️Weiß
⚠️Grün dunkel
❌Grün
❌Grün hell
❌Rot
❌Orange hell
❌Violette
❌Pflaume
❌Lavendel
❌Hellblau
❌Rosa
❌Eierschale
Hintergrund: Violette
✅Weiß
✅Eierschale
✅Grün hell
⚠️Schwarz
⚠️Orange hell
⚠️Lavendel
⚠️Rosa
❌Grün
❌Grün dunkel
❌Rot
❌Orange
❌Pflaume
❌Hellblau
Hintergrund: Pflaume
✅Weiß
✅Eierschale
✅Grün hell
⚠️Schwarz
⚠️Orange hell
⚠️Lavendel
⚠️Rosa
❌Grün dunkel
❌Grün
❌Rot
❌Orange
❌Violette
❌Hellblau
Hintergrund: Hellblau
✅Schwarz
⚠️Grün dunkel
❌Weiß
❌Grün
❌Grün hell
❌Rot
❌Orange
❌Orange hell
❌Violette
❌Pflaume
❌Lavendel
❌Rosa
❌Eierschale
Hintergrund: Orange hell
✅Schwarz
✅Grün dunkel
⚠️Violette
⚠️Pflaume
❌Weiß
❌Grün
❌Grün hell
❌Rot
❌Orange
❌Lavendel
❌Hellblau
❌Rosa
❌Eierschale
Hintergrund: Lavendel
✅Schwarz
✅Grün dunkel
⚠️Rot
⚠️Violette
⚠️Pflaume
❌Weiß
❌Grün
❌Grün hell
❌Orange
❌Orange hell
❌Hellblau
❌Rosa
❌Eierschale
Hintergrund: Rosa
✅Schwarz
✅Grün dunkel
⚠️Rot
⚠️Violette
⚠️Pflaume
❌Weiß
❌Grün
❌Grün hell
❌Orange
❌Orange hell
❌Lavendel
❌Hellblau
❌Eierschale
Hintergrund: Grün hell
✅Schwarz
✅Grün dunkel
✅Rot
✅Pflaume
⚠️Violette
❌Weiß
❌Grün
❌Orange
❌Orange hell
❌Lavendel
❌Hellblau
❌Rosa
❌Eierschale
H1: Hauptüberschrift
H2: Zwischenüberschrift
H3: Zwischenüberschrift
H4: Zwischenüberschrift
H5: Zwischenüberschrift
H6: Zwischenüberschrift
Lorem ipsum dolor sit amet, Text gefettet elitr, sed Text kursiv tempor invidunt ut Text Highlight magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Listenelemente
unsortiert
- Listenpunkt
- Listenpunkt
- Listenpunkt
- Listenpunkt
nummeriert
- Listenpunkt
- Listenpunkt
- Listenpunkt
- Listenpunkt
mit Icon
Bildformen
Bilder-Slider
Bildergalerie Kacheln
Video
Tabelement
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Tabelle
|
Tabellenkopf |
Tabellenkopf |
Tabellenkopf |
|
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. |
consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. |
Lorem ipsum dolor sit amet, consetetur sadipscing elitr |
|
Tabellenzelle |
Tabellenzelle |
Tabellenzelle |
|
Tabellenzelle |
Tabellenzelle |
Tabellenzelle |
Akkordeonelement
Zitat
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. – Max Mustermann
Ansprechpersonen
Vorname Nachname
Position
Vorname Nachname
Position
Vorname Nachname
Position
Zähler
Infobox
Wichtige Info:
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
Weitere Informationen
Link zu weiteren Informationen
Link zu weiteren Informationen
Subheadline
Teaser 2 Elemente
Teaser 3 Elemente
Titel der Teaserbox
Titel der Teaserbox
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Titel der Teaserbox
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Kontaktformular
Vorname Nachname
Position
Vorname Nachname
Position
Vorname Nachname
Position