Projekte/Style Guide: Unterschied zwischen den Versionen

775 Bytes hinzugefügt , vor 10 Monaten

keine Bearbeitungszusammenfassung

Vorstand, WLM, Widget-Bearbeiter, Bots, Bürokraten, Oberflächenadministratoren, Oversighter, Administratoren, Widget-Bearbeiter

7.985

Bearbeitungen

@@ Zeile 161: / Zeile 161: @@
 == 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.
+'''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 ===
@@ Zeile 171: / Zeile 177: @@
 <div style="background:#970302; color:#000000; width:170px; height:100px;">
 <div style="padding:10px">
-'''(Rot, Schrift schwarz)
+'''<s>(Rot, Schrift schwarz)</s>'''
 </div></div>
 <div style="padding:10px; width: auto; margin-left: auto; margin-right: auto; line-height:1.5em">
@@ Zeile 177: / Zeile 183: @@
 R151, G03, B02<br>
 C0, M98, Y99, K41
-</div></div></div>
+</div></div>
 <div style="margin: 20px; border: 1px solid black; width: 170px; height:auto; float: left">
@@ Zeile 192: / Zeile 198: @@
 R230, G121, B166<br>
 C0, M47, Y28, K10
-</div></div></div>
+</div></div>
 <div style="margin: 20px; border: 1px solid black; width: 170px; height:auto; float: left">
@@ Zeile 208: / Zeile 214: @@
 R238, G128, B25<br>
 C0, M46, Y89, K07
-</div></div></div>
+</div></div>
 <div style="margin: 20px; border: 1px solid black; width: 170px; height:auto; float: left">
@@ Zeile 223: / Zeile 229: @@
 R240, G188, B0<br>
 C0, M22, Y100, K06
-</div></div></div>
+</div></div>
 <div style="margin: 20px; border: 1px solid black; width: 170px; height:auto; float: left">
@@ Zeile 233: / Zeile 239: @@
 <div style="padding:10px>
-'''(Violett, Schrift schwarz)
+'''<s>(Violett, Schrift schwarz)</s>'''
 </div></div>
 <div style="padding:10px; width: auto; margin-left: auto; margin-right: auto; line-height:1.5em">
@@ Zeile 239: / Zeile 245: @@
 R87, G72, B181<br>
 C52, M60, Y0, K29
-</div></div></div>
+</div></div>
 <div style="margin: 20px; border: 1px solid black; width: 170px; height:auto; float: left">
@@ Zeile 249: / Zeile 255: @@
 <div style="padding:10px>
-'''(Dunkelgrün, Schrift schwarz)
+'''<s>(Dunkelgrün, Schrift schwarz)</s>'''
 </div></div>
 <div style="padding:10px; width: auto; margin-left: auto; margin-right: auto; line-height:1.5em">
@@ Zeile 255: / Zeile 261: @@
 R48, G93, B112<br>
 C57, M17, Y0, K56
-</div></div></div>
+</div></div>
 <div style="margin: 20px; border: 1px solid black; width: 170px; height:auto; float: left">
@@ Zeile 265: / Zeile 271: @@
 <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">
 &#35;0E65C0<br>
 R14, G101, B192<br>
 C93, M47, Y0, K25
-</div></div></div>
+</div></div>
 <div style="margin: 20px; border: 1px solid black; width: 170px; height:auto; float: left">
@@ Zeile 285: / Zeile 291: @@
 R04, G157, B255<br>
 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="background:#E9E7C4; color:#FFFFFF; width:170px; height:50px;">
 <div style="padding:10px>
-'''(Hellgelb, Schrift weiß)
+'''<s>(Hellgelb, Schrift weiß)</s>'''
 </div></div>
 <div style="background:#E9E7C4; color:#000000; width:170px; height:100px;">
@@ Zeile 300: / Zeile 306: @@
 R233, G231, B196<br>
 C0, M01, Y16, K09
-</div></div></div>
+</div></div>
 <div style="margin: 20px; border: 1px solid black; width: 170px; height:auto; float: left">
@@ Zeile 310: / Zeile 316: @@
 <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">
 &#35;308557<br>
 R48, G133, B87<br>
 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="background:#71D1B3; color:#FFFFFF; width:170px; height:50px;">
 <div style="padding:10px>
-'''(Hellgrün, Schrift weiß)
+'''<s>(Hellgrün, Schrift weiß)</s>'''
 </div></div>
 <div style="background:#71D1B3; color:#000000; width:170px; height:100px;">
@@ Zeile 330: / Zeile 336: @@
 R113, G209, B179<br>
 C46, M0, Y14, K18
-</div></div></div>
+</div></div>
 <br clear="all" />
@@ Zeile 338: / Zeile 344: @@
 <div style="background:#E5C0C0; width:170px; height:150px;">
 <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">
 &#35;E5C0C0<br>
@@ Zeile 348: / Zeile 354: @@
 <div style="background:#F9DDE9; width:170px; height:150px;">
 <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">
 &#35;F9DDE9<br>
@@ Zeile 358: / Zeile 364: @@
 <div style="background:#FBDFC5; width:170px; height:150px;">
 <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">
 &#35;FBDFC5<br>
@@ Zeile 368: / Zeile 374: @@
 <div style="background:#FBEEBF; width:170px; height:150px;">
 <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">
 &#35;FBEEBF<br>
@@ Zeile 378: / Zeile 384: @@
 <div style="background:#D5D1EC; width:170px; height:150px;">
 <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">
 &#35;D5D1EC<br>
@@ Zeile 388: / Zeile 394: @@
 <div style="background:#CBD6DB; width:170px; height:150px;">
 <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">
 &#35;CBD6DB<br>
@@ Zeile 398: / Zeile 404: @@
 <div style="background:#C3D8EF; width:170px; height:150px;">
 <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">
 &#35;C3D8EF<br>
@@ Zeile 408: / Zeile 414: @@
 <div style="background:#C0E6FF; width:170px; height:150px;">
 <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">
 &#35;C0E6FF<br>
@@ Zeile 418: / Zeile 424: @@
 <div style="background:#F9F9F0; width:170px; height:150px;">
 <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">
 &#35;F9F9F0<br>
@@ Zeile 428: / Zeile 434: @@
 <div style="background:#CBE0D5; width:170px; height:150px;">
 <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">
 &#35;CBE0D5<br>
@@ Zeile 438: / Zeile 444: @@
 <div style="background:#DBF3EC; width:170px; height:150px;">
 <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">
 &#35;DBF3EC<br>
@@ Zeile 488: / Zeile 494: @@
 = 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]]

Projekte/Style Guide: Unterschied zwischen den Versionen

Projekte/Style Guide (Quelltext anzeigen)

Version vom 23. Juni 2023, 18:37 Uhr