- commit
- ee521729e8f77fd6102cf54be315271e11d37960
- parent
- 71bb64fe041f653dd8e87f7a93dda4015a8610b9
- Author
- Tobias Bengfort <tobias.bengfort@posteo.de>
- Date
- 2023-05-25 05:58
add text description of result
Diffstat
| M | contrast.js | 28 | +++++++++++++++++++++++++--- |
| M | index.html | 9 | ++++++--- |
| M | style.css | 18 | +++++++++++++++++- |
3 files changed, 48 insertions, 7 deletions
diff --git a/contrast.js b/contrast.js
@@ -4,7 +4,8 @@ import * as favicon from './favicon.js'; 4 4 var fgInput = document.querySelector('#fgInput'); 5 5 var bgInput = document.querySelector('#bgInput'); 6 6 var swapButton = document.querySelector('#swap');7 -1 var output = document.querySelector('#output');-1 7 var gradient = document.querySelector('#output .gradient'); -1 8 var description = document.querySelector('#output .description'); 8 9 9 10 var score = function(range, levels) { 10 11 var biggerThan = function(t) { @@ -82,6 +83,18 @@ var formatRange = function(range, places) { 82 83 } 83 84 }; 84 85 -1 86 var makeDescription = function(value, levels) { -1 87 if (value < levels[0]) { -1 88 return 'not enough'; -1 89 } else if (value < levels[1]) { -1 90 return 'ok for large text'; -1 91 } else if (value < levels[2]) { -1 92 return 'ok'; -1 93 } else { -1 94 return 'great!'; -1 95 } -1 96 } -1 97 85 98 var oninput = function() { 86 99 // NOTE: | to prevent lazy evaluation 87 100 if (setColor(bgInput, 'backgroundColor') | setColor(fgInput, 'color')) { @@ -96,8 +109,17 @@ var oninput = function() { 96 109 var fg = parseColor(computed.color); 97 110 98 111 var wcag2Range = wcag2.contrastAlpha(fg, bg, wcag2.contrast);99 -1 output.style.backgroundImage = makeGradient(score(wcag2Range.map(Math.log), wcag2.levels.map(Math.log)));100 -1 output.textContent = formatRange(wcag2.getAbsRange(wcag2Range), 2);-1 112 var absRange = wcag2.getAbsRange(wcag2Range); -1 113 gradient.style.backgroundImage = makeGradient(score(wcag2Range.map(Math.log), wcag2.levels.map(Math.log))); -1 114 gradient.textContent = formatRange(absRange, 2); -1 115 -1 116 let desc1 = makeDescription(absRange[0], wcag2.levels); -1 117 let desc2 = makeDescription(absRange[1], wcag2.levels); -1 118 if (desc1 === desc2) { -1 119 description.textContent = desc1; -1 120 } else { -1 121 description.textContent = `ranges from "${desc1}" to "${desc2}"`; -1 122 } 101 123 } 102 124 }; 103 125
diff --git a/index.html b/index.html
@@ -7,9 +7,12 @@ 7 7 <link rel="shortcut icon" type="image/png" href="about:blank" /> 8 8 </head> 9 9 <body>10 -1 <output class="gradient" id="output" for="bgInput fgInput" aria-live="polite">11 -1 <strong></strong>12 -1 <span></span>-1 10 <output id="output" for="bgInput fgInput" aria-live="polite"> -1 11 <div class="gradient"> -1 12 <strong></strong> -1 13 <span></span> -1 14 </div> -1 15 <span class="description"></span> 13 16 </output> 14 17 15 18 <div id="form">
diff --git a/style.css b/style.css
@@ -84,6 +84,12 @@ body {
84 84 color: inherit;
85 85 }
86 86
-1 87 #output {
-1 88 display: block;
-1 89 text-align: center;
-1 90 margin-block-end: 1em;
-1 91 }
-1 92
87 93 .gradient {
88 94 display: flex;
89 95 block-size: 5em;
@@ -93,7 +99,7 @@ body {
93 99 text-align: center;
94 100 border-radius: 50%;
95 101 margin-inline: auto;
96 -1 margin-block-end: 1em;
-1 102 margin-block-end: 0.5em;
97 103 padding: 0.5em;
98 104 box-shadow: 0 0.1em 0.2em rgba(0,0,0,.4);
99 105 background-color: #888;
@@ -102,6 +108,16 @@ body {
102 108 font-weight: bold;
103 109 }
104 110
-1 111 .description {
-1 112 display: inline-block;
-1 113 padding-block: 0.3em;
-1 114 padding-inline: 0.8em;
-1 115 border-radius: 0.3em;
-1 116 background-color: #eee;
-1 117 color: #000;
-1 118 box-shadow: 0 0.1em 0.2em rgba(0,0,0,.4);
-1 119 }
-1 120
105 121 @media (min-width: 70em) {
106 122 #form {
107 123 flex-direction: row;