blob: 75ca08a7168ae85e350a03f346163f308aac916c (
plain)
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
|
<?xml version="1.0" encoding="utf-8"?>
<page xmlns="http://projectmallard.org/1.0/" style="xslt-template" id="color.contrast">
<info>
<link type="guide" xref="color" group="templates"/>
<link type="guide" xref="templates" group="color"/>
<desc>Get the contrast between two colors.</desc>
<revision version="3.28" date="2016-01-03" status="final"/>
</info>
<title>color.contrast</title>
<synopsis>
<title>Parameters</title>
<terms>
<item>
<title><code>$bg</code></title>
<p>A color specified in hexidecimal, <sys>rgb()</sys>, or <sys>rgba()</sys>.</p>
</item>
<item>
<title><code>$fg</code></title>
<p>A color specified in hexidecimal, <sys>rgb()</sys>, or <sys>rgba()</sys>.</p>
</item>
</terms>
</synopsis>
<p>This template calculates the contrast ratio between colors. The contrast ratio
is a number between 1 and 21. The algorithm is defined by the WCAG:</p>
<p><code>$link</code>[>>http://www.w3.org/TR/2008/REC-WCAG20-20081211/#contrast-ratiodef]</p>
<p>This template calls <code xref="color.rl">color.rl</code> to get the relative luminance of <code>$bg</code> and <code>$fg</code>.
It accepts six-digit and three-digit hexidecimal color codes, colors specified
with <sys>rgb()</sys>, and colors specified with <sys>rgba()</sys>. It does not accept HSL or
named HTML colors. Note that it does not take the alpha value into account when
calculating the contrast ratio. Semi-transparent colors will have a lower
actual contrast ratio than what is reported by this template.</p>
<p>The WCAG recommends a contrast ratio of at least 4.5 for normal text, and a
ratio of at least 3.0 for large-scale text.</p>
<list style="compact">
<title>Calls Parameters</title>
<item>
<p><link xref="color.bg"/></p>
</item>
<item>
<p><link xref="color.bg.blue"/></p>
</item>
<item>
<p><link xref="color.bg.dark"/></p>
</item>
<item>
<p><link xref="color.bg.gray"/></p>
</item>
<item>
<p><link xref="color.bg.red"/></p>
</item>
<item>
<p><link xref="color.bg.yellow"/></p>
</item>
<item>
<p><link xref="color.blue"/></p>
</item>
<item>
<p><link xref="color.fg"/></p>
</item>
<item>
<p><link xref="color.fg.blue"/></p>
</item>
<item>
<p><link xref="color.fg.dark"/></p>
</item>
<item>
<p><link xref="color.fg.purple"/></p>
</item>
<item>
<p><link xref="color.fg.red"/></p>
</item>
<item>
<p><link xref="color.gray"/></p>
</item>
<item>
<p><link xref="color.green"/></p>
</item>
<item>
<p><link xref="color.orange"/></p>
</item>
<item>
<p><link xref="color.purple"/></p>
</item>
<item>
<p><link xref="color.red"/></p>
</item>
<item>
<p><link xref="color.yellow"/></p>
</item>
</list>
<list style="compact">
<title>Calls Templates</title>
<item>
<p><link xref="color.rl"/></p>
</item>
</list>
</page>
|
