Herzlich Willkommen zum Mitglieder-Wiki von   Wikimedia Österreich.
Für ein Benutzerkonto schreibe bitte an   verein [at] wikimedia.at

Projekte/Style Guide: Unterschied zwischen den Versionen

Aus Mitglieder
Zur Navigation springen Zur Suche springen
Keine Bearbeitungszusammenfassung
 
(23 dazwischenliegende Versionen von 3 Benutzern werden nicht angezeigt)
Zeile 29: Zeile 29:
<br>
<br>
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>
<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 sowie in weiß auf den AAA geprüften Farben der Ursprungspalette ergänzt.
<br>
<br>
<b>Farbkombination-"Don'ts"</b>
<b>Farbkombination-"Don'ts"</b>
<br>
<br>
Zeile 100: Zeile 103:
<b>AAA-geprüft:</b>
<b>AAA-geprüft:</b>
</div>
</div>
<div style="background:#246342; width:170px; height:75px;">
<div style="background:#246342; color:#FFFFFF; width:170px; height:75px;">
<div style="padding:10px>
'''Schrift weiß
</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 118: Zeile 124:
<b>AAA-geprüft:</b>
<b>AAA-geprüft:</b>
</div>
</div>
<div style="background:#0C57A8; width:170px; height:75px;">
<div style="background:#0C57A8; color:#FFFFFF; width:170px; height:75px;">
<div style="padding:10px>
'''Schrift weiß
</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 136: Zeile 145:
<b>AAA-geprüft:</b>
<b>AAA-geprüft:</b>
</div>
</div>
<div style="background:#970302; width:170px; height:75px;">
<div style="background:#970302; color:#FFFFFF; width:170px; height:75px;">
<div style="padding:10px>
'''Schrift weiß
</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 149: 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 ===


<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:#970302; width:170px; height:150px;">
<div style="background:#970302; color:#FFFFFF; width:170px; height:50px;">
'''Rot, Schrift schwarz'''
<div style="padding:10px>
</div><div style="padding:10px; width: auto; margin-left: auto; margin-right: auto; line-height:1.5em">
'''Rot, Schrift weiß
</div></div>
<div style="background:#970302; color:#000000; width:170px; height:100px;">
<div style="padding:10px">
'''<s>(Rot, Schrift schwarz)</s>'''
</div></div>
<div style="padding:10px; width: auto; margin-left: auto; margin-right: auto; line-height:1.5em">
&#35;970302<br>
&#35;970302<br>
R151, G03, B02<br>
R151, G03, B02<br>
Zeile 162: Zeile 186:


<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; width:170px; height:150px;">
<div style="background:#E679A6; color:#FFFFFF; width:170px; height:50px;">
'''Rosa, Schrift schwarz'''
<div style="padding:10px>
</div><div style="padding:10px; width: auto; margin-left: auto; margin-right: auto; line-height:1.5em">
'''Rosa, Schrift weiß
</div></div>
<div style="background:#E679A6; color:#000000; width:170px; height:100px;">
<div style="padding:10px">
'''Rosa, Schrift schwarz
</div></div>
<div style="padding:10px; width: auto; margin-left: auto; margin-right: auto; line-height:1.5em">
&#35;E679A6<br>
&#35;E679A6<br>
R230, G121, B166<br>
R230, G121, B166<br>
Zeile 171: Zeile 201:


<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; width:170px; height:150px;">
<div style="background:#EE8019; color:#FFFFFF; width:170px; height:50px;">
'''Orange, Schrift schwarz'''
<div style="padding:10px>
</div><div style="padding:10px; width: auto; margin-left: auto; margin-right: auto; line-height:1.5em">
'''Orange, Schrift weiß
</div></div>
<div style="background:#EE8019; color:#000000; width:170px; height:100px;">
 
<div style="padding:10px>
'''Orange, Schrift schwarz
</div></div>
<div style="padding:10px; width: auto; margin-left: auto; margin-right: auto; line-height:1.5em">
&#35;EE8019<br>
&#35;EE8019<br>
R238, G128, B25<br>
R238, G128, B25<br>
Zeile 180: Zeile 217:


<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; width:170px; height:150px;">
<div style="background:#F0BC00; color:#FFFFFF; width:170px; height:50px;">
'''Gelb, Schrift schwarz'''
<div style="padding:10px>
</div><div style="padding:10px; width: auto; margin-left: auto; margin-right: auto; line-height:1.5em">
'''Gelb, Schrift weiß
</div></div>
<div style="background:#F0BC00; color:#000000; width:170px; height:100px;">
 
<div style="padding:10px>
'''Gelb, Schrift schwarz
</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>
Zeile 189: Zeile 232:


<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; width:170px; height:150px;">
<div style="background:#5748B5; color:#FFFFFF; width:170px; height:50px;">
'''Violett, Schrift weiß'''
<div style="padding:10px>
</div><div style="padding:10px; width: auto; margin-left: auto; margin-right: auto; line-height:1.5em">
'''Violett, Schrift weiß
</div></div>
<div style="background:#5748B5; color:#000000; width:170px; height:100px;">
 
<div style="padding:10px>
'''<s>(Violett, Schrift schwarz)</s>'''
</div></div>
<div style="padding:10px; width: auto; margin-left: auto; margin-right: auto; line-height:1.5em">
&#35;5748B5<br>
&#35;5748B5<br>
R87, G72, B181<br>
R87, G72, B181<br>
Zeile 198: Zeile 248:


<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; width:170px; height:150px;">
<div style="background:#305D70; color:#FFFFFF; width:170px; height:50px;">
'''Dunkelgrün, Schrift weiß'''
<div style="padding:10px>
</div><div style="padding:10px; width: auto; margin-left: auto; margin-right: auto; line-height:1.5em">
'''Dunkelgrün, Schrift weiß
</div></div>
<div style="background:#305D70; color:#000000; width:170px; height:100px;">
 
<div style="padding:10px>
'''<s>(Dunkelgrün, Schrift schwarz)</s>'''
</div></div>
<div style="padding:10px; width: auto; margin-left: auto; margin-right: auto; line-height:1.5em">
&#35;305D70<br>
&#35;305D70<br>
R48, G93, B112<br>
R48, G93, B112<br>
Zeile 207: Zeile 264:


<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; width:170px; height:150px;">
<div style="background:#0E65C0; color:#FFFFFF; width:170px; height:50px;">
'''Blau, Schrift weiß'''
<div style="padding:10px>
</div><div style="padding:10px; width: auto; margin-left: auto; margin-right: auto; line-height:1.5em">
'''Blau, Schrift weiß
</div></div>
<div style="background:#0E65C0; color:#000000; width:170px; height:100px;">
 
<div style="padding:10px>
'''<s>(Blau, Schrift schwarz)</s>'''
</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>
Zeile 216: Zeile 279:


<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; width:170px; height:150px;">
<div style="background:#049DFF; color:#FFFFFF; width:170px; height:50px;">
'''Hellblau, Schrift schwarz'''
<div style="padding:10px>
</div><div style="padding:10px; width: auto; margin-left: auto; margin-right: auto; line-height:1.5em">
'''Hellblau, Schrift weiß
</div></div>
<div style="background:#049DFF; color:#000000; width:170px; height:100px;">
 
<div style="padding:10px>
'''Hellblau, Schrift schwarz
</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>
Zeile 225: Zeile 294:


<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; width:170px; height:150px;">
<div style="background:#E9E7C4; color:#FFFFFF; width:170px; height:50px;">
'''Hellgelb, Schrift schwarz'''
<div style="padding:10px>
</div><div style="padding:10px; width: auto; margin-left: auto; margin-right: auto; line-height:1.5em">
'''<s>(Hellgelb, Schrift weiß)</s>'''
</div></div>
<div style="background:#E9E7C4; color:#000000; width:170px; height:100px;">
 
<div style="padding:10px>
'''Hellgelb, Schrift schwarz
</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>
Zeile 234: Zeile 309:


<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; width:170px; height:150px;">
<div style="background:#308557; color:#FFFFFF; width:170px; height:50px;">
'''Grün, Schrift weiß'''
<div style="padding:10px>
</div><div style="padding:10px; width: auto; margin-left: auto; margin-right: auto; line-height:1.5em">
'''Grün, Schrift weiß
</div></div>
<div style="background:#308557; color:#000000; width:170px; height:100px;">
 
<div style="padding:10px>
'''<s>(Grün, Schrift schwarz)</s>'''
</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>
Zeile 243: Zeile 324:


<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; width:170px; height:150px;">
<div style="background:#71D1B3; color:#FFFFFF; width:170px; height:50px;">
'''Hellgrün, Schrift schwarz'''
<div style="padding:10px>
</div><div style="padding:10px; width: auto; margin-left: auto; margin-right: auto; line-height:1.5em">
'''<s>(Hellgrün, Schrift weiß)</s>'''
</div></div>
<div style="background:#71D1B3; color:#000000; width:170px; height:100px;">
 
<div style="padding:10px>
'''Hellgrün, Schrift schwarz
</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>
<br clear="all" />  
<br clear="all" />
 


=== Helle Farben ===
=== Helle Farben ===
Zeile 257: Zeile 343:
<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:#E5C0C0; width:170px; height:150px;">
<div style="background:#E5C0C0; width:170px; height:150px;">
</div><div style="padding:10px; width: auto; margin-left: auto; margin-right: auto; line-height:1.5em">
<div style="padding:10px>
'''Rot light, Schrift schwarz'''
</div></div><div style="padding:10px; width: auto; margin-left: auto; margin-right: auto; line-height:1.5em">
&#35;E5C0C0<br>
&#35;E5C0C0<br>
R229, G192, B192<br>
R229, G192, B192<br>
Zeile 265: Zeile 353:
<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:#F9DDE9; width:170px; height:150px;">
<div style="background:#F9DDE9; width:170px; height:150px;">
</div><div style="padding:10px; width: auto; margin-left: auto; margin-right: auto; line-height:1.5em">
<div style="padding:10px>
'''Rosa light,''' '''Schrift schwarz'''
</div></div><div style="padding:10px; width: auto; margin-left: auto; margin-right: auto; line-height:1.5em">
&#35;F9DDE9<br>
&#35;F9DDE9<br>
R249, G221, B233<br>
R249, G221, B233<br>
Zeile 273: Zeile 363:
<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:#FBDFC5; width:170px; height:150px;">
<div style="background:#FBDFC5; width:170px; height:150px;">
</div><div style="padding:10px; width: auto; margin-left: auto; margin-right: auto; line-height:1.5em">
<div style="padding:10px>
'''Orange light,''' '''Schrift schwarz'''
</div></div><div style="padding:10px; width: auto; margin-left: auto; margin-right: auto; line-height:1.5em">
&#35;FBDFC5<br>
&#35;FBDFC5<br>
R251, G223, B197<br>
R251, G223, B197<br>
Zeile 281: Zeile 373:
<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:#FBEEBF; width:170px; height:150px;">
<div style="background:#FBEEBF; width:170px; height:150px;">
</div><div style="padding:10px; width: auto; margin-left: auto; margin-right: auto; line-height:1.5em">
<div style="padding:10px>
'''Gelb light,''' '''Schrift schwarz'''
</div></div><div style="padding:10px; width: auto; margin-left: auto; margin-right: auto; line-height:1.5em">
&#35;FBEEBF<br>
&#35;FBEEBF<br>
R251, G238, B191<br>
R251, G238, B191<br>
Zeile 289: Zeile 383:
<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:#D5D1EC; width:170px; height:150px;">
<div style="background:#D5D1EC; width:170px; height:150px;">
</div><div style="padding:10px; width: auto; margin-left: auto; margin-right: auto; line-height:1.5em">
<div style="padding:10px>
'''Violett light,''' '''Schrift schwarz'''
</div></div><div style="padding:10px; width: auto; margin-left: auto; margin-right: auto; line-height:1.5em">
&#35;D5D1EC<br>
&#35;D5D1EC<br>
R213, G209, B07<br>
R213, G209, B07<br>
Zeile 297: Zeile 393:
<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:#CBD6DB; width:170px; height:150px;">
<div style="background:#CBD6DB; width:170px; height:150px;">
</div><div style="padding:10px; width: auto; margin-left: auto; margin-right: auto; line-height:1.5em">
<div style="padding:10px>
'''Dunkelgrün light, Schrift schwarz'''
</div></div><div style="padding:10px; width: auto; margin-left: auto; margin-right: auto; line-height:1.5em">
&#35;CBD6DB<br>
&#35;CBD6DB<br>
R203, G214, B219<br>
R203, G214, B219<br>
Zeile 305: Zeile 403:
<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:#C3D8EF; width:170px; height:150px;">
<div style="background:#C3D8EF; width:170px; height:150px;">
</div><div style="padding:10px; width: auto; margin-left: auto; margin-right: auto; line-height:1.5em">
<div style="padding:10px>
'''Dunkelblau light,''' '''Schrift schwarz'''
</div></div><div style="padding:10px; width: auto; margin-left: auto; margin-right: auto; line-height:1.5em">
&#35;C3D8EF<br>
&#35;C3D8EF<br>
R251, G223, B197<br>
R251, G223, B197<br>
Zeile 313: Zeile 413:
<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:#C0E6FF; width:170px; height:150px;">
<div style="background:#C0E6FF; width:170px; height:150px;">
</div><div style="padding:10px; width: auto; margin-left: auto; margin-right: auto; line-height:1.5em">
<div style="padding:10px>
'''Hellblau light,''' '''Schrift schwarz'''
</div></div><div style="padding:10px; width: auto; margin-left: auto; margin-right: auto; line-height:1.5em">
&#35;C0E6FF<br>
&#35;C0E6FF<br>
R192, G230, B255<br>
R192, G230, B255<br>
Zeile 321: Zeile 423:
<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:#F9F9F0; width:170px; height:150px;">
<div style="background:#F9F9F0; width:170px; height:150px;">
</div><div style="padding:10px; width: auto; margin-left: auto; margin-right: auto; line-height:1.5em">
<div style="padding:10px>
'''Hellgelb light,''' '''Schrift schwarz'''
</div></div><div style="padding:10px; width: auto; margin-left: auto; margin-right: auto; line-height:1.5em">
&#35;F9F9F0<br>
&#35;F9F9F0<br>
R249, G249, B240<br>
R249, G249, B240<br>
Zeile 329: Zeile 433:
<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:#CBE0D5; width:170px; height:150px;">
<div style="background:#CBE0D5; width:170px; height:150px;">
</div><div style="padding:10px; width: auto; margin-left: auto; margin-right: auto; line-height:1.5em">
<div style="padding:10px>
'''Grün light,''' '''Schrift schwarz'''
</div></div><div style="padding:10px; width: auto; margin-left: auto; margin-right: auto; line-height:1.5em">
&#35;CBE0D5<br>
&#35;CBE0D5<br>
R203, G224, B213<br>
R203, G224, B213<br>
Zeile 337: Zeile 443:
<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:#DBF3EC; width:170px; height:150px;">
<div style="background:#DBF3EC; width:170px; height:150px;">
</div><div style="padding:10px; width: auto; margin-left: auto; margin-right: auto; line-height:1.5em">
<div style="padding:10px>
'''Hellgrün light,''' '''Schrift schwarz'''
</div></div><div style="padding:10px; width: auto; margin-left: auto; margin-right: auto; line-height:1.5em">
&#35;DBF3EC<br>
&#35;DBF3EC<br>
R219, G243, B236<br>
R219, G243, B236<br>
Zeile 383: 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]]

Aktuelle Version vom 23. Juni 2023, 18:37 Uhr

Schriftarten

Wikimedia verwendet zwei Haupt-Schriftarten: Montserrat and Source Serif Pro. Beide Schriften sind frei und als Open Source verfügbar ("Open Font License").


Logos

(siehe Wikimedia Österreich Logos auf Commons, dort auch als PNGs verfügbar)


  • Wikimedia Österreich Logos im .svg Format
  • Wikimedia Österreich normal (Standard)

    Wikimedia Österreich normal (Standard)

  • Wikimedia Österreich vertikal

    Wikimedia Österreich vertikal

  • Wikimedia Österreich weiß (für besondere Hintergründe)

    Wikimedia Österreich weiß (für besondere Hintergründe)

  • Wikimedia Österreich schwarz (für besondere Hintergründe)

    Wikimedia Österreich schwarz (für besondere Hintergründe)

  • Wikimedia Österreich schwarz vertikal (für besondere Hintergründe)

    Wikimedia Österreich schwarz vertikal (für besondere Hintergründe)


Farben

Die Wikimedia-Farben bestehen aus drei verschiedenen Farbpaletten: Die Kernpalette ("Core-Palette"), die Ursprungspalette ("Legacy-Palette") und die Kreativpalette ("Creative-Palette"). Die jewiligen Farbcodes finden sich unterhalb.

Verwendung von Farben


Farbkombinationen
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.
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.

Farbkombination-"Don'ts"
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, da so nicht ausreichend Kontrast für eine gute Lesbarkeit zustande kommt.

Kernpalette ("Core-Palette")

Die Kernpalette besteht aus Weiß und Schwarz sowie drei Schwarzschattierungen: Schwarz 75, Schwarz 50 und Schwarz 25. Schwarz und Weiß sind unsere Hauptfarben, die gut mit den Farben der Ursprungspalette und der Kreativpalette harmonieren.

#FFFFFF
R255, G255, B255
C0, M0, Y0, K0

#000000
R0, G0, B0
C0, M0, Y0, K100

#404040
R64, G64, B64
C0, M0, Y0, K75

#7F7F7F
R127, G127, B127
C0, M0, Y0, K50

#BFBFBF
R191, G191, B191
C0, M0, Y0, K25



Ursprungspalette ("Legacy-Palette")

Die Ursprungspalette besteht aus den drei bereits ursprünglich eng mit der Wikimedia-Bewegung verbundenen Farben: Grün, Blau und Rot. Sie können z.B. als Hintergrundfarben, Titel- oder Überschriftenfarben oder Branding-Farbtöne verwendet werden. In Kombimation mit Weiß gibt es auch eine für Barrierefreiheit optimierte Version der Farben mit Konformitätsstufe AAA-geprüftem Kontrast (s. zweite Farb-Zeile).

#396
R51, G153, B102
C67, M0, Y33, K40
PMS 347U

AAA-geprüft:

Schrift weiß

#246342
R36, G99, B66
C64, M0, Y33, K61

#0063BF
R0, G99, B191
C89, M63, Y0, K0
PMS 2388U

AAA-geprüft:

Schrift weiß

#0C57A8
R12, G87, B168
C93, M48, Y0, K0

#900
R153, G0, B0
C24, M100, Y100, K25
PMS 2350U

AAA-geprüft:

Schrift weiß

#970302
R151, G03, B02
C0, M98, Y99, K41


Hinweis: Der grüne CMYK-Farbwert ist inkonsistent bei Adobe-Anwendungen. Verwende den grünen Hex-Wert und setze dein Dokument im CMYK-Farbmodus auf.

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 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

Rot, Schrift weiß

(Rot, Schrift schwarz)

#970302
R151, G03, B02
C0, M98, Y99, K41

Rosa, Schrift weiß

Rosa, Schrift schwarz

#E679A6
R230, G121, B166
C0, M47, Y28, K10

Orange, Schrift weiß

Orange, Schrift schwarz

#EE8019
R238, G128, B25
C0, M46, Y89, K07

Gelb, Schrift weiß

Gelb, Schrift schwarz

#F0BC00
R240, G188, B0
C0, M22, Y100, K06

Violett, Schrift weiß

(Violett, Schrift schwarz)

#5748B5
R87, G72, B181
C52, M60, Y0, K29

Dunkelgrün, Schrift weiß

(Dunkelgrün, Schrift schwarz)

#305D70
R48, G93, B112
C57, M17, Y0, K56

Blau, Schrift weiß

(Blau, Schrift schwarz)

#0E65C0
R14, G101, B192
C93, M47, Y0, K25

Hellblau, Schrift weiß

Hellblau, Schrift schwarz

#049DFF
R04, G157, B255
C98, M38, Y0, K0

(Hellgelb, Schrift weiß)

Hellgelb, Schrift schwarz

#E9E7C4
R233, G231, B196
C0, M01, Y16, K09

Grün, Schrift weiß

(Grün, Schrift schwarz)

#308557
R48, G133, B87
C64, M0, Y35, K48

(Hellgrün, Schrift weiß)

Hellgrün, Schrift schwarz

#71D1B3
R113, G209, B179
C46, M0, Y14, K18


Helle Farben

Rot light, Schrift schwarz

#E5C0C0
R229, G192, B192
C0, M16, Y16, K10

Rosa light, Schrift schwarz

#F9DDE9
R249, G221, B233
C0, M11, Y06, K02

Orange light, Schrift schwarz

#FBDFC5
R251, G223, B197
C0, M11, Y22, K02

Gelb light, Schrift schwarz

#FBEEBF
R251, G238, B191
C0, M05, Y24, K02

Violett light, Schrift schwarz

#D5D1EC
R213, G209, B07
C10, M11, Y0, K07

Dunkelgrün light, Schrift schwarz

#CBD6DB
R203, G214, B219
C07, M02, Y0, K14

Dunkelblau light, Schrift schwarz

#C3D8EF
R251, G223, B197
C0, M11, Y22, K02

Hellblau light, Schrift schwarz

#C0E6FF
R192, G230, B255
C25, M10, Y0, K0

Hellgelb light, Schrift schwarz

#F9F9F0
R249, G249, B240
C0, M0, Y04, K02

Grün light, Schrift schwarz

#CBE0D5
R203, G224, B213
C09, M0, Y05, K12

Hellgrün light, Schrift schwarz

#DBF3EC
R219, G243, B236
C10, M0, Y03, K05


Grafiken und Illustrationen

Präsentationsvorlage

Auf Basis des hier vorgestellten Ccorporate Designs gibt es auch eine Präsentationsvorlage, die für Vorträge etc verwendet werden kann.

Siehe auch

Abgerufen von „https://mitglieder.wikimedia.at/w/index.php?title=Projekte/Style_Guide&oldid=20190“