Mitglieder

Projekte/Style Guide: Unterschied zwischen den Versionen

Seite Diskussion

Projekte/Style Guide (Quelltext anzeigen)

Version vom 23. Juni 2023, 18:37 Uhr

1.069 Bytes hinzugefügt ,  vor 10 Monaten
keine Bearbeitungszusammenfassung
Keine Bearbeitungszusammenfassung
 
(11 dazwischenliegende Versionen von 3 Benutzern werden nicht angezeigt)
Zeile 30: Zeile 30:
Um einen ausreichend guten Kontrast zu erzielen empfiehlt sich die "Legacy-Palette" und die "Creative-Palette" mit schwarzem oder weißem Text zu kombinieren. Alle Farben mit Ausnahme von Violett, Blau, Grün und Dunkelgrün sind mit schwarzem Text kompatibel. Die übrigen Farben sollten mit Weiß kombiniert werden, um kontrastreich genug zu sein.  
Um einen ausreichend guten Kontrast zu erzielen empfiehlt sich die "Legacy-Palette" und die "Creative-Palette" mit schwarzem oder weißem Text zu kombinieren. Alle Farben mit Ausnahme von Violett, Blau, Grün und Dunkelgrün sind mit schwarzem Text kompatibel. Die übrigen Farben sollten mit Weiß kombiniert werden, um kontrastreich genug zu sein.  
<br>
<br>
Zur Demonstration haben wir Schrift in weiß und schwarz auf den 11 kräftigen und nur in schwarz auf den 11 hellen Farbtönen der Kreativpalette ergänzt.  
Zur Demonstration haben wir Schrift in weiß und schwarz auf den 11 kräftigen und nur in schwarz auf den 11 hellen Farbtönen der Kreativpalette sowie in weiß auf den AAA geprüften Farben der Ursprungspalette ergänzt.  
<br>
<br>
<br>
<br>
Zeile 161: Zeile 161:
== Kreativpalette ("Creative-Palette") ==
== Kreativpalette ("Creative-Palette") ==
Die 11 Farben der Kreativpalette leiten sich aus Farbgebungen ab, die von Wiki-Communities auf der ganzen Welt häufig verwendet werden und wurden mit den [https://meta.wikimedia.org/wiki/Wikipedia_20/Resources Wikipedia20]-Geburtstagsfarben ergänzt. Diese Farbpalette ergänzt die Ursprungs- und Kernpalette um bei Bedarf mehr Flexibilität in Gestaltungsmöglichkeiten zu bieten. Die Farben Rot, Blau und Grün der Kreativpalette unterscheiden sich leicht von jenen der Ursprungspalette, da sie für die Barrierefreiheit Konformitätsstufe AA angepasst sind.
Die 11 Farben der Kreativpalette leiten sich aus Farbgebungen ab, die von Wiki-Communities auf der ganzen Welt häufig verwendet werden und wurden mit den [https://meta.wikimedia.org/wiki/Wikipedia_20/Resources Wikipedia20]-Geburtstagsfarben ergänzt. Diese Farbpalette ergänzt die Ursprungs- und Kernpalette um bei Bedarf mehr Flexibilität in Gestaltungsmöglichkeiten zu bieten. Die Farben Rot, Blau und Grün der Kreativpalette unterscheiden sich leicht von jenen der Ursprungspalette, da sie für die Barrierefreiheit Konformitätsstufe AA angepasst sind.
'''Barrierefreiheit Farbkombinationen'''
Im Sinne der Barrierefreiheit wird empfohlen, auf eine ''gemeinsame Verwendung der 11 kräftigen und 11 hellen Farbtöne der Kreativpalette'' in Kombination für Hintergrund und Text zu vermeiden sowie bei der Verwendung von weiß und schwarz als Schriftfarben auf Lesbarkeit zu achten um ausreichenden Kontrast für eine gute Lesbarkeit zu erreichen.
Zur Demonstration haben wir Schriftbeispiele in weiß und schwarz über die Farbfelder gesetzt.


=== Dunkle Farben ===
=== Dunkle Farben ===
Zeile 167: Zeile 173:
<div style="background:#970302; color:#FFFFFF; width:170px; height:50px;">
<div style="background:#970302; color:#FFFFFF; width:170px; height:50px;">
<div style="padding:10px>
<div style="padding:10px>
'''Rot, Schrift weiß'''
'''Rot, Schrift weiß
</div></div>
</div></div>
<div style="background:#970302; color:#000000; width:170px; height:100px;">
<div style="background:#970302; color:#000000; width:170px; height:100px;">
<div style="padding:10px">
<div style="padding:10px">
'''(Rot, Schrift schwarz)'''
'''<s>(Rot, Schrift schwarz)</s>'''
</div></div>
</div></div>
<div style="padding:10px; width: auto; margin-left: auto; margin-right: auto; line-height:1.5em">
<div style="padding:10px; width: auto; margin-left: auto; margin-right: auto; line-height:1.5em">
Zeile 177: Zeile 183:
R151, G03, B02<br>
R151, G03, B02<br>
C0, M98, Y99, K41
C0, M98, Y99, K41
</div></div></div>
</div></div>


<div style="margin: 20px; border: 1px solid black; width: 170px; height:auto; float: left">
<div style="margin: 20px; border: 1px solid black; width: 170px; height:auto; float: left">
<div style="background:#E679A6; color:#FFFFFF; width:170px; height:50px;">
<div style="background:#E679A6; color:#FFFFFF; width:170px; height:50px;">
<div style="padding:10px>
<div style="padding:10px>
'''Rosa, Schrift weiß'''
'''Rosa, Schrift weiß
</div></div>
</div></div>
<div style="background:#E679A6; color:#000000; width:170px; height:100px;">
<div style="background:#E679A6; color:#000000; width:170px; height:100px;">
<div style="padding:10px">
<div style="padding:10px">
'''Rosa, Schrift schwarz'''
'''Rosa, Schrift schwarz
</div></div>
</div></div>
<div style="padding:10px; width: auto; margin-left: auto; margin-right: auto; line-height:1.5em">
<div style="padding:10px; width: auto; margin-left: auto; margin-right: auto; line-height:1.5em">
Zeile 192: Zeile 198:
R230, G121, B166<br>
R230, G121, B166<br>
C0, M47, Y28, K10
C0, M47, Y28, K10
</div></div></div>
</div></div>


<div style="margin: 20px; border: 1px solid black; width: 170px; height:auto; float: left">
<div style="margin: 20px; border: 1px solid black; width: 170px; height:auto; float: left">
<div style="background:#EE8019; color:#FFFFFF; width:170px; height:50px;">
<div style="background:#EE8019; color:#FFFFFF; width:170px; height:50px;">
<div style="padding:10px>
<div style="padding:10px>
'''Orange, Schrift weiß'''
'''Orange, Schrift weiß
</div></div>
</div></div>
<div style="background:#EE8019; color:#000000; width:170px; height:100px;">
<div style="background:#EE8019; color:#000000; width:170px; height:100px;">


<div style="padding:10px>
<div style="padding:10px>
'''Orange, Schrift schwarz'''
'''Orange, Schrift schwarz
</div></div>
</div></div>
<div style="padding:10px; width: auto; margin-left: auto; margin-right: auto; line-height:1.5em">
<div style="padding:10px; width: auto; margin-left: auto; margin-right: auto; line-height:1.5em">
Zeile 208: Zeile 214:
R238, G128, B25<br>
R238, G128, B25<br>
C0, M46, Y89, K07
C0, M46, Y89, K07
</div></div></div>
</div></div>


<div style="margin: 20px; border: 1px solid black; width: 170px; height:auto; float: left">
<div style="margin: 20px; border: 1px solid black; width: 170px; height:auto; float: left">
<div style="background:#F0BC00; color:#FFFFFF; width:170px; height:50px;">
<div style="background:#F0BC00; color:#FFFFFF; width:170px; height:50px;">
<div style="padding:10px>
<div style="padding:10px>
'''Gelb, Schrift weiß'''
'''Gelb, Schrift weiß
</div></div>
</div></div>
<div style="background:#F0BC00; color:#000000; width:170px; height:100px;">
<div style="background:#F0BC00; color:#000000; width:170px; height:100px;">


<div style="padding:10px>
<div style="padding:10px>
'''Gelb, Schrift schwarz'''
'''Gelb, Schrift schwarz
</div></div><div style="padding:10px; width: auto; margin-left: auto; margin-right: auto; line-height:1.5em">
</div></div><div style="padding:10px; width: auto; margin-left: auto; margin-right: auto; line-height:1.5em">
&#35;F0BC00<br>
&#35;F0BC00<br>
R240, G188, B0<br>
R240, G188, B0<br>
C0, M22, Y100, K06
C0, M22, Y100, K06
</div></div></div>
</div></div>


<div style="margin: 20px; border: 1px solid black; width: 170px; height:auto; float: left">
<div style="margin: 20px; border: 1px solid black; width: 170px; height:auto; float: left">
<div style="background:#5748B5; color:#FFFFFF; width:170px; height:50px;">
<div style="background:#5748B5; color:#FFFFFF; width:170px; height:50px;">
<div style="padding:10px>
<div style="padding:10px>
'''Violett, Schrift weiß'''
'''Violett, Schrift weiß
</div></div>
</div></div>
<div style="background:#5748B5; color:#000000; width:170px; height:100px;">
<div style="background:#5748B5; color:#000000; width:170px; height:100px;">


<div style="padding:10px>
<div style="padding:10px>
'''(Violett, Schrift schwarz)'''
'''<s>(Violett, Schrift schwarz)</s>'''
</div></div>
</div></div>
<div style="padding:10px; width: auto; margin-left: auto; margin-right: auto; line-height:1.5em">
<div style="padding:10px; width: auto; margin-left: auto; margin-right: auto; line-height:1.5em">
Zeile 239: Zeile 245:
R87, G72, B181<br>
R87, G72, B181<br>
C52, M60, Y0, K29
C52, M60, Y0, K29
</div></div></div>
</div></div>


<div style="margin: 20px; border: 1px solid black; width: 170px; height:auto; float: left">
<div style="margin: 20px; border: 1px solid black; width: 170px; height:auto; float: left">
<div style="background:#305D70; color:#FFFFFF; width:170px; height:50px;">
<div style="background:#305D70; color:#FFFFFF; width:170px; height:50px;">
<div style="padding:10px>
<div style="padding:10px>
'''Dunkelgrün, Schrift weiß'''
'''Dunkelgrün, Schrift weiß
</div></div>
</div></div>
<div style="background:#305D70; color:#000000; width:170px; height:100px;">
<div style="background:#305D70; color:#000000; width:170px; height:100px;">


<div style="padding:10px>
<div style="padding:10px>
'''(Dunkelgrün, Schrift schwarz)
'''<s>(Dunkelgrün, Schrift schwarz)</s>'''
</div></div>
</div></div>
<div style="padding:10px; width: auto; margin-left: auto; margin-right: auto; line-height:1.5em">
<div style="padding:10px; width: auto; margin-left: auto; margin-right: auto; line-height:1.5em">
Zeile 255: Zeile 261:
R48, G93, B112<br>
R48, G93, B112<br>
C57, M17, Y0, K56
C57, M17, Y0, K56
</div></div></div>
</div></div>


<div style="margin: 20px; border: 1px solid black; width: 170px; height:auto; float: left">
<div style="margin: 20px; border: 1px solid black; width: 170px; height:auto; float: left">
<div style="background:#0E65C0; color:#FFFFFF; width:170px; height:50px;">
<div style="background:#0E65C0; color:#FFFFFF; width:170px; height:50px;">
<div style="padding:10px>
<div style="padding:10px>
'''Blau, Schrift weiß'''
'''Blau, Schrift weiß
</div></div>
</div></div>
<div style="background:#0E65C0; color:#000000; width:170px; height:100px;">
<div style="background:#0E65C0; color:#000000; width:170px; height:100px;">


<div style="padding:10px>
<div style="padding:10px>
'''(Blau, Schrift schwarz)’’’
'''<s>(Blau, Schrift schwarz)</s>'''
</div></div><div style="padding:10px; width: auto; margin-left: auto; margin-right: auto; line-height:1.5em">
</div></div><div style="padding:10px; width: auto; margin-left: auto; margin-right: auto; line-height:1.5em">
&#35;0E65C0<br>
&#35;0E65C0<br>
R14, G101, B192<br>
R14, G101, B192<br>
C93, M47, Y0, K25
C93, M47, Y0, K25
</div></div></div>
</div></div>


<div style="margin: 20px; border: 1px solid black; width: 170px; height:auto; float: left">
<div style="margin: 20px; border: 1px solid black; width: 170px; height:auto; float: left">
<div style="background:#049DFF; color:#FFFFFF; width:170px; height:50px;">
<div style="background:#049DFF; color:#FFFFFF; width:170px; height:50px;">
<div style="padding:10px>
<div style="padding:10px>
'''Hellblau, Schrift weiß'''
'''Hellblau, Schrift weiß
</div></div>
</div></div>
<div style="background:#049DFF; color:#000000; width:170px; height:100px;">
<div style="background:#049DFF; color:#000000; width:170px; height:100px;">


<div style="padding:10px>
<div style="padding:10px>
'''Hellblau, Schrift schwarz'''
'''Hellblau, Schrift schwarz
</div></div><div style="padding:10px; width: auto; margin-left: auto; margin-right: auto; line-height:1.5em">
</div></div><div style="padding:10px; width: auto; margin-left: auto; margin-right: auto; line-height:1.5em">
&#35;049DFF<br>
&#35;049DFF<br>
R04, G157, B255<br>
R04, G157, B255<br>
C98, M38, Y0, K0
C98, M38, Y0, K0
</div></div></div>
</div></div>


<div style="margin: 20px; border: 1px solid black; width: 170px; height:auto; float: left">
<div style="margin: 20px; border: 1px solid black; width: 170px; height:auto; float: left">
<div style="background:#E9E7C4; color:#FFFFFF; width:170px; height:50px;">
<div style="background:#E9E7C4; color:#FFFFFF; width:170px; height:50px;">
<div style="padding:10px>
<div style="padding:10px>
'''(Hellgelb, Schrift weiß)'''
'''<s>(Hellgelb, Schrift weiß)</s>'''
</div></div>
</div></div>
<div style="background:#E9E7C4; color:#000000; width:170px; height:100px;">
<div style="background:#E9E7C4; color:#000000; width:170px; height:100px;">


<div style="padding:10px>
<div style="padding:10px>
'''Hellgelb, Schrift schwarz'''
'''Hellgelb, Schrift schwarz
</div></div><div style="padding:10px; width: auto; margin-left: auto; margin-right: auto; line-height:1.5em">
</div></div><div style="padding:10px; width: auto; margin-left: auto; margin-right: auto; line-height:1.5em">
&#35;E9E7C4<br>
&#35;E9E7C4<br>
R233, G231, B196<br>
R233, G231, B196<br>
C0, M01, Y16, K09
C0, M01, Y16, K09
</div></div></div>
</div></div>


<div style="margin: 20px; border: 1px solid black; width: 170px; height:auto; float: left">
<div style="margin: 20px; border: 1px solid black; width: 170px; height:auto; float: left">
<div style="background:#308557; color:#FFFFFF; width:170px; height:50px;">
<div style="background:#308557; color:#FFFFFF; width:170px; height:50px;">
<div style="padding:10px>
<div style="padding:10px>
'''Grün, Schrift weiß'''
'''Grün, Schrift weiß
</div></div>
</div></div>
<div style="background:#308557; color:#000000; width:170px; height:100px;">
<div style="background:#308557; color:#000000; width:170px; height:100px;">


<div style="padding:10px>
<div style="padding:10px>
'''(Grün, Schrift schwarz)
'''<s>(Grün, Schrift schwarz)</s>'''
</div></div><div style="padding:10px; width: auto; margin-left: auto; margin-right: auto; line-height:1.5em">
</div></div><div style="padding:10px; width: auto; margin-left: auto; margin-right: auto; line-height:1.5em">
&#35;308557<br>
&#35;308557<br>
R48, G133, B87<br>
R48, G133, B87<br>
C64, M0, Y35, K48
C64, M0, Y35, K48
</div></div></div>
</div></div>


<div style="margin: 20px; border: 1px solid black; width: 170px; height:auto; float: left">
<div style="margin: 20px; border: 1px solid black; width: 170px; height:auto; float: left">
<div style="background:#71D1B3; color:#FFFFFF; width:170px; height:50px;">
<div style="background:#71D1B3; color:#FFFFFF; width:170px; height:50px;">
<div style="padding:10px>
<div style="padding:10px>
'''(Hellgrün, Schrift weiß)'''
'''<s>(Hellgrün, Schrift weiß)</s>'''
</div></div>
</div></div>
<div style="background:#71D1B3; color:#000000; width:170px; height:100px;">
<div style="background:#71D1B3; color:#000000; width:170px; height:100px;">


<div style="padding:10px>
<div style="padding:10px>
'''Hellgrün, Schrift schwarz'''
'''Hellgrün, Schrift schwarz
</div></div><div style="padding:10px; width: auto; margin-left: auto; margin-right: auto; line-height:1.5em">
</div></div><div style="padding:10px; width: auto; margin-left: auto; margin-right: auto; line-height:1.5em">
&#35;71D1B3<br>
&#35;71D1B3<br>
R113, G209, B179<br>
R113, G209, B179<br>
C46, M0, Y14, K18
C46, M0, Y14, K18
</div></div></div>
</div></div>
<br clear="all" />
<br clear="all" />


Zeile 338: Zeile 344:
<div style="background:#E5C0C0; width:170px; height:150px;">
<div style="background:#E5C0C0; width:170px; height:150px;">
<div style="padding:10px>
<div style="padding:10px>
'''Schrift schwarz'''
'''Rot light, Schrift schwarz'''
</div></div><div style="padding:10px; width: auto; margin-left: auto; margin-right: auto; line-height:1.5em">
</div></div><div style="padding:10px; width: auto; margin-left: auto; margin-right: auto; line-height:1.5em">
&#35;E5C0C0<br>
&#35;E5C0C0<br>
Zeile 348: Zeile 354:
<div style="background:#F9DDE9; width:170px; height:150px;">
<div style="background:#F9DDE9; width:170px; height:150px;">
<div style="padding:10px>
<div style="padding:10px>
'''Schrift schwarz'''
'''Rosa light,''' '''Schrift schwarz'''
</div></div><div style="padding:10px; width: auto; margin-left: auto; margin-right: auto; line-height:1.5em">
</div></div><div style="padding:10px; width: auto; margin-left: auto; margin-right: auto; line-height:1.5em">
&#35;F9DDE9<br>
&#35;F9DDE9<br>
Zeile 358: Zeile 364:
<div style="background:#FBDFC5; width:170px; height:150px;">
<div style="background:#FBDFC5; width:170px; height:150px;">
<div style="padding:10px>
<div style="padding:10px>
'''Schrift schwarz'''
'''Orange light,''' '''Schrift schwarz'''
</div></div><div style="padding:10px; width: auto; margin-left: auto; margin-right: auto; line-height:1.5em">
</div></div><div style="padding:10px; width: auto; margin-left: auto; margin-right: auto; line-height:1.5em">
&#35;FBDFC5<br>
&#35;FBDFC5<br>
Zeile 368: Zeile 374:
<div style="background:#FBEEBF; width:170px; height:150px;">
<div style="background:#FBEEBF; width:170px; height:150px;">
<div style="padding:10px>
<div style="padding:10px>
'''Schrift schwarz'''
'''Gelb light,''' '''Schrift schwarz'''
</div></div><div style="padding:10px; width: auto; margin-left: auto; margin-right: auto; line-height:1.5em">
</div></div><div style="padding:10px; width: auto; margin-left: auto; margin-right: auto; line-height:1.5em">
&#35;FBEEBF<br>
&#35;FBEEBF<br>
Zeile 378: Zeile 384:
<div style="background:#D5D1EC; width:170px; height:150px;">
<div style="background:#D5D1EC; width:170px; height:150px;">
<div style="padding:10px>
<div style="padding:10px>
'''Schrift schwarz'''
'''Violett light,''' '''Schrift schwarz'''
</div></div><div style="padding:10px; width: auto; margin-left: auto; margin-right: auto; line-height:1.5em">
</div></div><div style="padding:10px; width: auto; margin-left: auto; margin-right: auto; line-height:1.5em">
&#35;D5D1EC<br>
&#35;D5D1EC<br>
Zeile 388: Zeile 394:
<div style="background:#CBD6DB; width:170px; height:150px;">
<div style="background:#CBD6DB; width:170px; height:150px;">
<div style="padding:10px>
<div style="padding:10px>
'''Schrift schwarz'''
'''Dunkelgrün light, Schrift schwarz'''
</div></div><div style="padding:10px; width: auto; margin-left: auto; margin-right: auto; line-height:1.5em">
</div></div><div style="padding:10px; width: auto; margin-left: auto; margin-right: auto; line-height:1.5em">
&#35;CBD6DB<br>
&#35;CBD6DB<br>
Zeile 398: Zeile 404:
<div style="background:#C3D8EF; width:170px; height:150px;">
<div style="background:#C3D8EF; width:170px; height:150px;">
<div style="padding:10px>
<div style="padding:10px>
'''Schrift schwarz'''
'''Dunkelblau light,''' '''Schrift schwarz'''
</div></div><div style="padding:10px; width: auto; margin-left: auto; margin-right: auto; line-height:1.5em">
</div></div><div style="padding:10px; width: auto; margin-left: auto; margin-right: auto; line-height:1.5em">
&#35;C3D8EF<br>
&#35;C3D8EF<br>
Zeile 408: Zeile 414:
<div style="background:#C0E6FF; width:170px; height:150px;">
<div style="background:#C0E6FF; width:170px; height:150px;">
<div style="padding:10px>
<div style="padding:10px>
'''Schrift schwarz'''
'''Hellblau light,''' '''Schrift schwarz'''
</div></div><div style="padding:10px; width: auto; margin-left: auto; margin-right: auto; line-height:1.5em">
</div></div><div style="padding:10px; width: auto; margin-left: auto; margin-right: auto; line-height:1.5em">
&#35;C0E6FF<br>
&#35;C0E6FF<br>
Zeile 418: Zeile 424:
<div style="background:#F9F9F0; width:170px; height:150px;">
<div style="background:#F9F9F0; width:170px; height:150px;">
<div style="padding:10px>
<div style="padding:10px>
'''Schrift schwarz'''
'''Hellgelb light,''' '''Schrift schwarz'''
</div></div><div style="padding:10px; width: auto; margin-left: auto; margin-right: auto; line-height:1.5em">
</div></div><div style="padding:10px; width: auto; margin-left: auto; margin-right: auto; line-height:1.5em">
&#35;F9F9F0<br>
&#35;F9F9F0<br>
Zeile 428: Zeile 434:
<div style="background:#CBE0D5; width:170px; height:150px;">
<div style="background:#CBE0D5; width:170px; height:150px;">
<div style="padding:10px>
<div style="padding:10px>
'''Schrift schwarz'''
'''Grün light,''' '''Schrift schwarz'''
</div></div><div style="padding:10px; width: auto; margin-left: auto; margin-right: auto; line-height:1.5em">
</div></div><div style="padding:10px; width: auto; margin-left: auto; margin-right: auto; line-height:1.5em">
&#35;CBE0D5<br>
&#35;CBE0D5<br>
Zeile 438: Zeile 444:
<div style="background:#DBF3EC; width:170px; height:150px;">
<div style="background:#DBF3EC; width:170px; height:150px;">
<div style="padding:10px>
<div style="padding:10px>
'''Schrift schwarz'''
'''Hellgrün light,''' '''Schrift schwarz'''
</div></div><div style="padding:10px; width: auto; margin-left: auto; margin-right: auto; line-height:1.5em">
</div></div><div style="padding:10px; width: auto; margin-left: auto; margin-right: auto; line-height:1.5em">
&#35;DBF3EC<br>
&#35;DBF3EC<br>
Zeile 485: Zeile 491:
  Wikimedia Brand Guidelines Update 2022 -CommunityFood.svg|CommunityFood.svg
  Wikimedia Brand Guidelines Update 2022 -CommunityFood.svg|CommunityFood.svg
</gallery>
</gallery>
= Präsentationsvorlage =
Auf Basis des hier vorgestellten Ccorporate Designs gibt es auch eine [https://docs.google.com/presentation/d/1bWuRGgn5ZU7zl5V2kOVwUp1q-81xdbYH-0yd-21JaWM/edit#slide=id.g1067b254598_0_230 Präsentationsvorlage], die für Vorträge etc verwendet werden kann.
= Siehe auch =
* [[Projekte/Kalender-Symbole]]
[[Kategorie:Verein]]
Abgerufen von „https://mitglieder.wikimedia.at/Spezial:Mobiler_Unterschied/19892...20190“