-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
134 lines (125 loc) · 3.82 KB
/
index.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WCAG 3 contrast calculation</title>
</head>
<style>
:root {
--fg: #000;
--bg: #fff;
}
body {
font-family: Inter, sans-serif;
color: var(--fg);
background-color: var(--bg);
}
article {
max-width: 90ch;
margin: 0 auto;
}
section {
display: flex;
justify-content: space-between;
}
label {
font-size: .75rem;
text-transform: uppercase;
letter-spacing: 0.025em;
font-weight: bold;
margin-right: .5rem;
}
section {
margin-top: 3rem;
}
a {
color: inherit;
font-weight: bold;
}
.colorpicker {
display: grid;
grid-template-columns: 1fr 1fr 4rem 1fr;
align-items: center;
}
.result {
display: flex;
flex-direction: column;
}
#comment {
opacity: .5;
}
</style>
<body>
<article>
<h1>APCA/SAPC - the new way to calculate contrast.</h1>
<p>WCAG 3 is now moving to a new algorithm for measuring contrast, called APCA (Advanced Perceptual Contrast Algorithm).</p>
<p>It's much more truthful in its results than the previous method used by WCAG 2.</p>
<p>The old contrast ratios (7:1 for example) are replaced with a contrast level that goes from 0 -> ~107.</p>
<p>The guidelines recommend:
<ul>
<li>15 - Minimum for non-text elements</li>
<li>30 - Absolute min for any text</li>
<li>45 - Min for large text (the old 3:1)</li>
<li>60 - Min for body text (the old 4.5:1)</li>
<li>75 - Stort vitt korsmärke Preferred level for body text</li>
</ul>
</p>
<p>Read more: <a href="https://github.com/Myndex/SAPC-APCA/blob/master/JS/ReadMe.md">ACPA repo</a> & <a href="https://typefully.app/u/DanHollick/t/sle13GMW2Brp">Dan Hollicks tweet</a></p>
<section class="colorpicker">
<div class="colorpicker">
<label for="textcolor">Text color:</label>
<input type="color" name="textcolor" id="textcolor" value="#000000">
</div>
<div class="colorpicker">
<label for="bgcolor">Background color:</label>
<input type="color" name="bgcolor" id="bgcolor" value="#ffffff">
</div>
<div>--></div>
<div class="result">
<span id="contrast">contrast val</span>
<span id="comment">comment</span>
</div>
</section>
</article>
<script src="APCA_0_98G_4g_minimal.js"></script>
<script>
// init
let root = document.documentElement;
let contrast = document.querySelector("#contrast")
let comment = document.querySelector("#comment")
let fg_input = document.querySelector('#textcolor')
let bg_input = document.querySelector('#bgcolor')
let fg,bg,contrastLc, fg_hex, bg_hex
function get_contrast() {
bg = bg_input.value
fg = fg_input.value
fg_hex = "0x" + fg.slice(1)
bg_hex = "0x" + bg.slice(1)
contrastLc = Math.abs(APCAcontrast( sRGBtoY(fg_hex) , sRGBtoY(bg_hex)).toPrecision(5))
contrast.innerText = contrastLc;
root.style.setProperty('--fg', fg)
root.style.setProperty('--bg', bg)
rate_contrast()
}
function rate_contrast() {
let contrast_val = Math.abs(APCAcontrast( sRGBtoY(fg_hex), sRGBtoY(bg_hex)));
if (contrast_val < 30) {
comment.innerText = "👎"
} else if (contrast_val > 30 && contrast_val < 45) {
comment.innerText = "Absolute min for any text"
} else if (contrast_val > 45 && contrast_val < 60) {
comment.innerText = "OK for large text (the old 3:1)"
} else if (contrast_val > 60 && contrast_val < 75) {
comment.innerText = "OK for body text (the old 4.5:1)"
} else if (contrast_val > 75) {
comment.innerText = "Real nice for body text"
}
}
// less get it
get_contrast()
fg_input.addEventListener("input", get_contrast)
bg_input.addEventListener("input", get_contrast)
</script>
</body>
</html>