forked from wikimedia/WikimediaUI-Style-Guide
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathvisual-style_colors.html
More file actions
380 lines (373 loc) · 18.9 KB
/
visual-style_colors.html
File metadata and controls
380 lines (373 loc) · 18.9 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
<!DOCTYPE html>
<!--[if lte IE 8 ]><html lang="en" class="js-off lte-ie8"><![endif]-->
<!--[if IE 9 ]> <html lang="en" class="js-off ie9"><![endif]-->
<!--[if (gt IE 9)|!(IE)]><!-->
<html lang="en" class="js-off">
<!--<![endif]-->
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<link rel="stylesheet" href="css/build/wmui-style-guide.min.css">
<title>Visual Style: Colors – Wikimedia Design Style Guide</title>
<script>
document.documentElement.className = document.documentElement.className.replace(/\bjs-off\b/,'js-on'); // no BEM notation thx to IE
</script>
<!--[if lt IE 9]>
<script>window.html5={'shivCSS':false};</script>
<script src="js/vendor/ie/html5shiv-3.7.3.min.js"></script>
<script src="js/vendor/ie/respond-1.4.2.min.js"></script>
<![endif]-->
<link rel="preload" href="fonts/Charter_regular.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="fonts/Lato_regular.woff2" as="font" type="font/woff2" crossorigin>
<script src="js/fonts-loader.js" async></script>
<script>
var _paq = _paq || [];
_paq.push(['setDomains', ['*.design.wikimedia.org.']]);
_paq.push(['trackPageView']);
_paq.push(['enableLinkTracking']);
function embedTrackingCode() {
var u='https://piwik.wikimedia.org/';
_paq.push(['setTrackerUrl', u+'piwik.php']);
_paq.push(['setSiteId', '16']);
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
g.defer=true; g.async=true; g.src=u+'piwik.js'; s.parentNode.insertBefore(g,s);
}
if (window.addEventListener) {
window.addEventListener('load', embedTrackingCode, false);
} else if (window.attachEvent) {
window.attachEvent('onload',embedTrackingCode);
} else {
embedTrackingCode();
}
</script>
</head>
<body class="page--visual-style-colors">
<header id="header" class="header" role="banner">
<div class="content-box">
<a href="#content" class="is-aural is-focusable">Jump to content</a>
<a href="#nav--main" class="is-aural is-focusable">Jump to navigation</a>
<h1 class="site__title"><a href="./"><span class="site__org">Wikimedia </span><span class="site__project">Design Style Guide</span></a></h1>
<label class="btn--nav-main" for="trigger--nav-main" aria-hidden="true" title="Show main menu">
<i></i> <span>Menu</span>
</label>
<a href="https://github.com/wikimedia/WikimediaUI-Style-Guide" class="lnk--contribute" title="Fork and contribute on GitHub"><span>Contribute on </span>GitHub</a>
</div>
</header>
<div class="page">
<div class="content-box">
<div class="col col--start">
<input type="checkbox" id="trigger--nav-main" class="trigger--nav-main">
<nav id="nav--main" class="nav nav--main" role="navigation">
<ol>
<li class="nav__item"><a href="index.html">Introduction</a></li>
<li class="nav__item"><a href="design-principles.html">Design principles</a></li>
<li class="nav__item is-on"><a href="visual-style.html">Visual style</a>
<ul class="nav__sub-items">
<li class="nav__sub-item"><a href="visual-style.html">Principles</a></li>
<li class="nav__sub-item is-on"><a href="visual-style_colors.html">Colors</a></li>
<li class="nav__sub-item"><a href="visual-style_typography.html">Typography</a></li>
<li class="nav__sub-item"><a href="visual-style_icons.html">Icons</a></li>
<li class="nav__sub-item"><a href="visual-style_imagery.html">Imagery</a></li>
<li class="nav__sub-item"><a href="visual-style_illustrations.html">Illustrations</a></li>
</ul>
</li>
<!-- <li><a href="components.html">Components</a></li>
<li><a href="patterns.html">Patterns</a></li>
<li><a href="resources.html">Resources</a></li> -->
</ol>
</nav>
</div>
<div class="col col--end">
<main id="content" class="content" role="main">
<div class="page__parent-title">Visual Style</div>
<h1 class="page__title">Colors</h1>
<p>The <a href="https://phabricator.wikimedia.org/M82" target="_blank" rel="noopener">color palette</a> represents our character and brings a hint of freshness to our products.</p>
<img src="img/visual-style/Color-palette-2017-01-15-simplified.png" alt="color palette">
<p>Making the content readable for everyone was our main goal. Accessibility considerations have been our top priority. Each color in the palette indicates its <a href="https://www.w3.org/WAI/intro/wcag" target="_blank" rel="noopener" title="Web Content Accessibility Guidelines 2.0">WCAG</a> conformance level (“AA” or “AAA”). It's based on colors' contrast against white or black.</p>
<h3>Base colors</h3>
<p>Base colors define the content surface and the main color for content. Different shades of paper and ink are useful to emphasise or de-emphasise different content areas.</p>
<p>Base colors go from pure white (Base100) to true black (Base0). Intermediate shades of grey include a tint of blue for greater harmony with our accent color.</p>
<p>When applying text on a surface, you need to <a href="http://webaim.org/resources/contrastchecker/" target="_blank" rel="noopener">check the color contrast</a> between the text and the background: </p>
<ul>
<li>Base100…50 are safe text colors for a black surface.</li>
<li>Base30…0 are safe text colors for a white surface. </li>
</ul>
<div class="color-palette color-section">
<ol>
<li class="color">
<div class="color__swatch" style="background-color: #fff;">
<strong class="color__name">Base100</strong>
<span class="color__wcag-level" title="WCAG conformance level">AAA</span>
</div>
<div class="color__codes">
<code class="color-code color-code--hex">#fff</code>
<code class="color-code color-code--rgb">RGB 255, 255, 255</code>
<code class="color-code color-code--hsb">HSB 0, 0%, 100%</code>
</div>
</li>
<li class="color">
<div class="color__swatch" style="background-color: #f8f9fa;">
<strong class="color__name">Base90</strong>
<span class="color__wcag-level" title="WCAG conformance level">AAA</span>
</div>
<div class="color__codes">
<code class="color-code color-code--hex">#f8f9fa</code>
<code class="color-code color-code--rgb">RGB 248, 249, 250</code>
<code class="color-code color-code--hsb">HSB 210, 1%, 98%</code>
</div>
</li>
<li class="color">
<div class="color__swatch" style="background-color: #eaecf0;">
<strong class="color__name">Base80</strong>
<span class="color__wcag-level" title="WCAG conformance level">AAA</span>
</div>
<div class="color__codes">
<code class="color-code color-code--hex">#eaecf0</code>
<code class="color-code color-code--rgb">RGB 234, 236, 240</code>
<code class="color-code color-code--hsb">HSB 220, 3%, 94%</code>
</div>
</li>
<li class="color">
<div class="color__swatch" style="background-color: #c8ccd1;">
<strong class="color__name">Base70</strong>
<span class="color__wcag-level" title="WCAG conformance level">AAA</span>
</div>
<div class="color__codes">
<code class="color-code color-code--hex">#c8ccd1</code>
<code class="color-code color-code--rgb">RGB 200, 204, 209</code>
<code class="color-code color-code--hsb">HSB 213, 4%, 82%</code>
</div>
</li>
<li class="color">
<div class="color__swatch" style="background-color: #a2a9b1;">
<strong class="color__name">Base50</strong>
<span class="color__wcag-level" title="WCAG conformance level">AAA</span>
</div>
<div class="color__codes">
<code class="color-code color-code--hex">#a2a9b1</code>
<code class="color-code color-code--rgb">RGB 162, 169, 177</code>
<code class="color-code color-code--hsb">HSB 212, 8%, 69%</code>
</div>
</li>
<li class="color">
<div class="color__swatch" style="background-color: #72777d;">
<strong class="color__name">Base30</strong>
<span class="color__wcag-level" title="WCAG conformance level">AA / <span>AA</span></span>
</div>
<div class="color__codes">
<code class="color-code color-code--hex">#72777d</code>
<code class="color-code color-code--rgb">RGB 114, 119, 125</code>
<code class="color-code color-code--hsb">HSB 210, 9%, 49%</code>
</div>
</li>
<li class="color color--dark">
<div class="color__swatch" style="background-color: #54595d;">
<strong class="color__name">Base20</strong>
<span class="color__wcag-level" title="WCAG conformance level">AAA</span>
</div>
<div class="color__codes">
<code class="color-code color-code--hex">#54595d</code>
<code class="color-code color-code--rgb">RGB 84, 89, 93</code>
<code class="color-code color-code--hsb">HSB 207, 10%, 36%</code>
</div>
</li>
<li class="color color--dark">
<div class="color__swatch" style="background-color: #222;">
<strong class="color__name">Base10</strong>
<span class="color__wcag-level" title="WCAG conformance level">AAA</span>
</div>
<div class="color__codes">
<code class="color-code color-code--hex">#222</code>
<code class="color-code color-code--rgb">RGB 34, 34, 34</code>
<code class="color-code color-code--hsb">HSB 0, 0%, 13%</code>
</div>
</li>
<li class="color color--dark">
<div class="color__swatch" style="background-color: #000;">
<strong class="color__name">Base0</strong>
<span class="color__wcag-level" title="WCAG conformance level">AAA</span>
</div>
<div class="color__codes">
<code class="color-code color-code--hex">#000</code>
<code class="color-code color-code--rgb">RGB 0, 0, 0</code>
<code class="color-code color-code--hsb">HSB 0, 0%, 0%</code>
</div>
</li>
</ol>
</div>
<h3>Accent colors</h3>
<p>Accent colors are used to emphasise actions and highlight key information. Blue is a natural choice in our context, where it has been the default color used for links, conveying the idea of action.</p>
<p>There are three shades provided for situations where you need a lighter (Accent90), regular (Accent50) or a darker (Accent10) version.</p>
<p>Accent50 provides a blue which is suitable to be used for text and as background. When used as link text it provides sufficient contrast with black text to notice the difference. When used as background, it provides enough contrast with white text to keep the text readable.</p>
<div class="color-palette color-section">
<ol>
<li class="color">
<div class="color__swatch" style="background-color: #eaf3ff;">
<strong class="color__name">Accent90</strong>
<span class="color__wcag-level" title="WCAG conformance level">AAA</span>
</div>
<div class="color__codes">
<code class="color-code color-code--hex">#eaf3ff</code>
<code class="color-code color-code--rgb">RGB 234, 243, 255</code>
<code class="color-code color-code--hsb">HSB 214, 8%, 100%</code>
</div>
</li>
<li class="color color--dark">
<div class="color__swatch" style="background-color: #36c;">
<strong class="color__name">Accent50</strong>
<span class="color__type">Progressive</span>
<span class="color__wcag-level" title="WCAG conformance level">AA</span>
</div>
<div class="color__codes">
<code class="color-code color-code--hex">#36c</code>
<code class="color-code color-code--rgb">RGB 51, 102, 204</code>
<code class="color-code color-code--hsb">HSB 220, 75%, 80%</code>
</div>
</li>
<li class="color color--dark">
<div class="color__swatch" style="background-color: #2a4b8d;">
<strong class="color__name">Accent10</strong>
<span class="color__wcag-level" title="WCAG conformance level">AAA</span>
</div>
<div class="color__codes">
<code class="color-code color-code--hex">#2a4b8d</code>
<code class="color-code color-code--rgb">RGB 42, 75, 141</code>
<code class="color-code color-code--hsb">HSB 220, 70%, 55%</code>
</div>
</li>
</ol>
</div>
<h3>Utility colors</h3>
<p>Red, green and yellow are utility colors. They can act as accent colors bringing the additional meaning that is commonly associated with them.</p>
<div class="color-palette color-section">
<ol>
<li class="color">
<div class="color__swatch" style="background-color: #fee7e6;">
<strong class="color__name">Red90</strong>
<span class="color__wcag-level" title="WCAG conformance level">AAA</span>
</div>
<div class="color__codes">
<code class="color-code color-code--hex">#fee7e6</code>
<code class="color-code color-code--rgb">RGB 255, 231, 230</code>
<code class="color-code color-code--hsb">HSB 2, 10%, 100%</code>
</div>
</li>
<li class="color color--dark">
<div class="color__swatch" style="background-color: #d33;">
<strong class="color__name">Red50</strong>
<span class="color__type">Destructive</span>
<span class="color__wcag-level" title="WCAG conformance level">AA / <span>AA</span></span>
</div>
<div class="color__codes">
<code class="color-code color-code--hex">#d33</code>
<code class="color-code color-code--rgb">RGB 221, 51, 51</code>
<code class="color-code color-code--hsb">HSB 360, 77%, 87%</code>
</div>
</li>
<li class="color color--dark">
<div class="color__swatch" style="background-color: #b32424;">
<strong class="color__name">Red30</strong>
<span class="color__wcag-level" title="WCAG conformance level">AAA</span>
</div>
<div class="color__codes">
<code class="color-code color-code--hex">#b32424</code>
<code class="color-code color-code--rgb">RGB 135, 54, 54</code>
<code class="color-code color-code--hsb">HSB 360, 60%, 53%</code>
</div>
</li>
</ol>
</div>
<div class="color-palette color-section">
<ol>
<li class="color">
<div class="color__swatch" style="background-color: #d5fdf4;">
<strong class="color__name">Green90</strong>
<span class="color__wcag-level" title="WCAG conformance level">AAA</span>
</div>
<div class="color__codes">
<code class="color-code color-code--hex">#d5fdf4</code>
<code class="color-code color-code--rgb">RGB 213, 253, 244</code>
<code class="color-code color-code--hsb">HSB 167, 16%, 99%</code>
</div>
</li>
<li class="color">
<div class="color__swatch" style="background-color: #00af89;">
<strong class="color__name">Green50</strong>
<span class="color__wcag-level" title="WCAG conformance level">AA</span>
</div>
<div class="color__codes">
<code class="color-code color-code--hex">#00af89</code>
<code class="color-code color-code--rgb">RGB 0, 175, 137</code>
<code class="color-code color-code--hsb">HSB 167, 100%, 69%</code>
</div>
</li>
<li class="color color--dark">
<div class="color__swatch" style="background-color: #14866d;">
<strong class="color__name">Green30</strong>
<span class="color__wcag-level" title="WCAG conformance level">AA</span>
</div>
<div class="color__codes">
<code class="color-code color-code--hex">#14866d</code>
<code class="color-code color-code--rgb">RGB 20, 134, 109</code>
<code class="color-code color-code--hsb">HSB 167, 85%, 53%</code>
</div>
</li>
</ol>
</div>
<div class="color-palette color-section">
<ol>
<li class="color">
<div class="color__swatch" style="background-color: #fef6e7;">
<strong class="color__name">Yellow90</strong>
<span class="color__wcag-level" title="WCAG conformance level">AAA</span>
</div>
<div class="color__codes">
<code class="color-code color-code--hex">#fef6e7</code>
<code class="color-code color-code--rgb">RGB 254, 246, 231</code>
<code class="color-code color-code--hsb">HSB 39, 9%, 100%</code>
</div>
</li>
<li class="color">
<div class="color__swatch" style="background-color: #fc3;">
<strong class="color__name">Yellow50</strong>
<span class="color__wcag-level" title="WCAG conformance level">AAA</span>
</div>
<div class="color__codes">
<code class="color-code color-code--hex">#fc3</code>
<code class="color-code color-code--rgb">RGB 255, 204, 51</code>
<code class="color-code color-code--hsb">HSB 45, 80%, 100%</code>
</div>
</li>
<li class="color color--dark">
<div class="color__swatch" style="background-color: #ac6600;">
<strong class="color__name">Yellow30</strong>
<span class="color__wcag-level" title="WCAG conformance level">AA</span>
</div>
<div class="color__codes">
<code class="color-code color-code--hex">#ac6600</code>
<code class="color-code color-code--rgb">RGB 172, 102, 0</code>
<code class="color-code color-code--hsb">HSB 36, 100%, 67%</code>
</div>
</li>
</ol>
</div>
<h3>Additional colors</h3>
<p>Some use cases, such as charts and data visualization, may need a broader color palette. Make sure to aim for level AA contrast (4.5:1) when extending the default palette. Also try to test how they are perceived at different color vision deficiency conditions.</p>
</main>
</div>
</div>
</div>
<footer id="footer" class="footer">
<div class="content-box">
<ul class="footer__list">
<li><a href="https://github.com/wikimedia/WikimediaUI-Style-Guide">Contribute on GitHub</a></li>
<li><a href="https://twitter.com/@WikimediaUX" title="Follow Wikimedia User Experience team account on Twitter">Follow @WikimediaUX</a></li>
<li><a href="https://lists.wikimedia.org/mailman/listinfo/design" title="Join Wikimedia Design mailing list">Join mailing list</a></li>
</ul>
<p>Text is available under the <a href="https://creativecommons.org/licenses/by-sa/4.0/" target="_blank" rel="noopener">Creative Commons Attribution-ShareAlike 4.0 International</a>, additional terms may apply. <br>Code is available under the MIT license.</p>
<p><a href="https://wikimediafoundation.org/" class="lnk--wikimedia-project">A Wikimedia Foundation project</a></p>
<noscript><p><img src="https://piwik.wikimedia.org/piwik.php?idsite=16&rec=1" alt=""></p></noscript>
</div>
</footer>
</body>
</html>