CGM_Public/pretix_cgo
1
0
Fork 0
forked from CGM_Public/pretix_original
Code Pull Requests Actions Activity

[A11y] Adjust thresholds of color picker (#5110)

Browse Source 
* [A11y] Adjust thresholds of color picker

* Fix typo
This commit is contained in:
Raphael Michel
2025-05-15 12:24:23 +02:00
committed by GitHub
parent 9ee50a28a1
commit 3007b89d9b
1 changed files with 9 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/pretix/static/pretixcontrol/js/ui/main.js
View File

@@ -277,7 +277,8 @@ var form_handlers = function (el) {
fill_field.on("dp.show", show); fill_field.on("dp.show", show);
}); });
function luminanace(r, g, b) { function luminance(r, g, b) {
// Algorithm defined as https://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef
var a = [r, g, b].map(function (v) { var a = [r, g, b].map(function (v) {
v /= 255; v /= 255;
return v <= 0.03928 return v <= 0.03928
@@ -287,8 +288,9 @@ var form_handlers = function (el) {
return a[0] * 0.2126 + a[1] * 0.7152 + a[2] * 0.0722; return a[0] * 0.2126 + a[1] * 0.7152 + a[2] * 0.0722;
} }
function contrast(rgb1, rgb2) { function contrast(rgb1, rgb2) {
var l1 = luminanace(rgb1[0], rgb1[1], rgb1[2]) + 0.05, // Algorithm defined at https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
l2 = luminanace(rgb2[0], rgb2[1], rgb2[2]) + 0.05, var l1 = luminance(rgb1[0], rgb1[1], rgb1[2]) + 0.05,
l2 = luminance(rgb2[0], rgb2[1], rgb2[2]) + 0.05,
ratio = l1/l2 ratio = l1/l2
if (l2 > l1) {ratio = 1/ratio} if (l2 > l1) {ratio = 1/ratio}
return ratio.toFixed(1) return ratio.toFixed(1)
@@ -327,15 +329,15 @@ var form_handlers = function (el) {
var icon, text, cls; var icon, text, cls;
if (c > 7) { if (c > 7) {
icon = "fa-check-circle"; icon = "fa-check-circle";
text = gettext('Your color has great contrast and is very easy to read!'); text = gettext('Your color has great contrast and will provide excellent accessibility.');
cls = "text-success"; cls = "text-success";
} else if (c > 2.5) { } else if (c > 4.5) {
icon = "fa-info-circle"; icon = "fa-info-circle";
text = gettext('Your color has decent contrast and is probably good-enough to read!'); text = gettext('Your color has decent contrast and is sufficient for minimum accessibility requirements.');
cls = ""; cls = "";
} else { } else {
icon = "fa-warning"; icon = "fa-warning";
text = gettext('Your color has bad contrast for text on white background, please choose a darker shade.'); text = gettext('Your color has insufficient contrast to white. Accessibility of your site will be impacted.');
cls = "text-danger"; cls = "text-danger";
} }
if ($icon.length === 0) { if ($icon.length === 0) {