Skip to content

Remove image color picker #158

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
github-actions merged 3 commits into from
Sep 12, 2026
Merged

Remove image color picker #158

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
c6d3040
Restore circular Forlæns favicon fallbacks
2biazdk Sep 9, 2026
d5681a4
Remove image color picker
2biazdk Sep 12, 2026
5e8b4fd
Merge branch 'main' into change-remove-image-color-picker
2biazdk Sep 12, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,8 +26,8 @@ The app lets someone upload or drop in an image, choose a text/icon/background c
- `i18n.js` owns supported languages, translated UI strings, language persistence, and translated attributes such as `aria-label`.
- `app.js` owns view routing, the accessibility statement view, error display, loading state, intro panel state, and theme preference.
- `image.js` owns file input, drag/drop, thumbnail preview, image decoding, canvas sizing, and cached source pixels.
- `canvas.js` contains canvas access, rendering, drawing, and keyboard handling for the color picker crosshairs.
- `toolbar.js` owns the checker toolbar state, selected test color, reset action, and crosshair placement.
- `canvas.js` contains canvas access, rendering, and drawing.
- `toolbar.js` owns the checker toolbar state, selected test color, and reset action.
- `contrast.js` performs the pixel-by-pixel contrast highlight pass.
- `color.js` contains RGB/hex conversion, pixel sampling, luminance, and contrast-ratio math.
- `pwa.js` registers the service worker.
Expand Down
79 changes: 1 addition & 78 deletions app/css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1168,10 +1168,6 @@ input[type=color] {
user-select: none;
}

.preview-viewport.is-color-picker {
cursor: crosshair;
}

.preview-canvas-layer {
position: relative;
min-width: 100%;
Expand Down Expand Up @@ -1228,10 +1224,6 @@ input[type=color] {
background-position: 0 0, 0 16px, 16px -16px, -16px 0;
}

.preview-viewport.is-color-picker .preview {
cursor: crosshair;
}

.preview-viewport.is-hand-tool .preview {
cursor: grab;
}
Expand All @@ -1245,29 +1237,6 @@ input[type=color] {
white-space: normal;
}

#crosshairs {
pointer-events: none;
display: none;
position: absolute;
width: 16px;
height: 16px;
}

#crosshairs svg {
width: 100%;
height: 100%;
}

#crosshairs svg .white {
stroke: white;
stroke-linejoin: round;
stroke-width: 100;
}

.preview:focus + .contrast-overlay + #crosshairs {
display: block;
}

/* One task at a time: chooser, simple checker, and image checker. */
.tool-chooser:focus,
.image-contrast-view:focus {
Expand Down Expand Up @@ -1449,18 +1418,6 @@ input[type=color] {
font-weight: 700;
}

.picker-button {
gap: 8px;
white-space: normal;
}

.picker-button svg {
flex: 0 0 auto;
width: 18px;
height: 18px;
fill: currentColor;
}

.selected-test-color {
display: inline-flex;
align-items: center;
Expand All @@ -1480,15 +1437,6 @@ input[type=color] {
background: var(--selected-color);
}

.picker-instruction {
flex-basis: 100%;
margin: 0;
padding: 10px 12px;
border-left: 4px solid var(--accent);
background: var(--panel);
color: var(--text);
}

.result-view-controls {
display: flex;
flex-wrap: wrap;
Expand All @@ -1511,10 +1459,6 @@ input[type=color] {
z-index: 1;
}

#crosshairs {
z-index: 2;
}

.palette-card {
display: block;
padding: 0;
Expand Down Expand Up @@ -1633,10 +1577,6 @@ input[type=color] {
flex-wrap: wrap;
}

.picker-button {
flex: 1 1 190px;
}

select {
width: 100%;
}
Expand All @@ -1645,7 +1585,6 @@ input[type=color] {
@media (forced-colors: active) {
.tool-choice,
.checker-result,
.picker-instruction,
.palette-pairs > li {
forced-color-adjust: auto;
border: 2px solid CanvasText;
Expand Down Expand Up @@ -2366,8 +2305,7 @@ body {
min-height: 40px;
}

.loaded-image-summary .cta:hover,
.picker-button:hover {
.loaded-image-summary .cta:hover {
border-color: var(--text);
background: var(--panel-soft);
color: var(--text);
Expand Down Expand Up @@ -2408,7 +2346,6 @@ body {
display: grid;
grid-template-areas:
"settings action"
"instruction instruction"
"result result";
grid-template-columns: minmax(0, 1fr) auto;
align-content: start;
Expand Down Expand Up @@ -2449,11 +2386,6 @@ body {
gap: 8px;
}

.color-field .picker-button {
grid-column: 1 / span 2;
justify-content: flex-start;
}

.color-field .hex-color-control,
.checker select {
width: 100%;
Expand All @@ -2474,15 +2406,6 @@ body {
background: var(--panel-soft);
}

.picker-instruction {
grid-area: instruction;
margin: 0;
padding: 8px 0 8px 16px;
border: 0;
border-left: 3px solid var(--accent);
background: transparent;
}

.view-controls {
grid-area: action;
display: flex;
Expand Down
41 changes: 2 additions & 39 deletions app/index.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -176,9 +176,6 @@
<span class="control-row">
<input id="test-color" class="hex-color-control" type="text" name="color" value="#000000" inputmode="text" spellcheck="false" autocomplete="off" aria-labelledby="testcolor-label" aria-describedby="test-color-error">
<input id="test-color-native" class="native-color-control" type="color" value="#000000" aria-label="Choose color visually" data-i18n-aria-label="chooseColorVisually">
<button id="colorpicker" class="cta ghost picker-button" type="button" aria-pressed="false" onclick="toggleColorPicker(this);">
<span data-i18n="pickColor">Pick a color from the image</span>
</button>
</span>
<span hidden id="test-color-error" class="field-error" data-i18n="colorInvalid">Enter a valid color, such as #1a2b3c.</span>
<span hidden id="selected-test-color" class="selected-test-color" aria-live="polite"></span>
Expand All @@ -196,7 +193,6 @@
</label>
</div>
</div>
<p hidden id="picker-instruction" class="picker-instruction" data-i18n="pickerInstruction">Click or tap the image to choose a color. With a keyboard, focus the image, move with the arrow keys, and press Enter.</p>
<div class="view-controls">
<button id="run-test" class="cta" type="button" onclick="initRenderContrast();" data-i18n="findProblemAreas">Find problem areas</button>
</div>
Expand All @@ -223,45 +219,12 @@
</div>
</div>

<p id="preview-help" class="sr-only" data-i18n="previewHelp">Use the zoom controls to inspect the image. If the image is larger than the visible preview, use the pan buttons or scroll the preview. Focus the image preview and use arrow keys to move the color picker.</p>
<p id="preview-help" class="sr-only" data-i18n="previewHelp">Use the zoom controls to inspect the image. If the image is larger than the visible preview, use the pan buttons or scroll the preview.</p>
<div class="preview-frame">
<section id="preview-viewport" class="preview-viewport">
<div id="preview-canvas-layer" class="preview-canvas-layer">
<canvas id="image_preview" class="preview" tabindex="0" aria-label="Image preview" data-i18n-aria-label="imagePreview" aria-describedby="preview-help" onmousedown="setTestColorFromCanvas(event, this);" onfocus="placeCrosshairs(this);" onkeydown="canvasKeyDown(this, event);" onkeyup="canvasKeyUp(event);" onblur="canvasBlur();"></canvas>
<canvas id="image_preview" class="preview" tabindex="0" aria-label="Image preview" data-i18n-aria-label="imagePreview" aria-describedby="preview-help"></canvas>
<canvas id="contrast_overlay" class="contrast-overlay" aria-hidden="true"></canvas>

<div id="crosshairs">
<svg aria-hidden="true" focusable="false" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1792 1792" xml:space="preserve">
<g>
<path class="white" d="M833.1,1691.6c-24.7,0-47.2-9.4-65-27.3c-17.9-17.9-27.3-40.4-27.3-65v-120.8
c-103-27.6-193.8-80.2-270.2-156.6c-76.4-76.4-129-167.2-156.6-270.2H193.1c-24.7,0-47.2-9.4-65-27.3c-17.9-17.9-27.3-40.4-27.3-65
v-128c0-24.7,9.4-47.2,27.3-65c17.9-17.9,40.4-27.3,65-27.3h120.8c27.6-103,80.2-193.8,156.6-270.2
c76.4-76.4,167.2-129,270.2-156.6V191.3c0-24.7,9.4-47.2,27.3-65c17.9-17.9,40.4-27.3,65-27.3h128c24.7,0,47.2,9.4,65,27.3
c17.9,17.9,27.3,40.4,27.3,65v120.8c103,27.6,193.8,80.2,270.2,156.6c76.4,76.4,129,167.2,156.6,270.2h120.8
c24.7,0,47.2,9.4,65,27.3c17.9,17.9,27.3,40.4,27.3,65v128c0,24.7-9.4,47.2-27.3,65c-17.9,17.9-40.4,27.3-65,27.3h-120.8
c-27.6,103-80.2,193.8-156.6,270.2c-76.4,76.4-167.2,129-270.2,156.6v120.8c0,24.7-9.4,47.2-27.3,65c-17.9,17.9-40.4,27.3-65,27.3
H833.1z M961.1,1122.9c24.7,0,47.2,9.4,65,27.3c17.9,17.9,27.3,40.4,27.3,65v69.2c52.3-20.9,99.3-52,140.1-92.8
c40.8-40.8,71.9-87.8,92.8-140.1h-69.2c-24.7,0-47.2-9.4-65-27.3c-17.9-17.9-27.3-40.4-27.3-65v-128c0-24.7,9.4-47.2,27.3-65
c17.9-17.9,40.4-27.3,65-27.3h69.2c-20.9-52.3-52-99.3-92.8-140.1c-40.8-40.8-87.8-71.9-140.1-92.8v69.2c0,24.7-9.4,47.2-27.3,65
c-17.9,17.9-40.4,27.3-65,27.3h-128c-24.7,0-47.2-9.4-65-27.3c-17.9-17.9-27.3-40.4-27.3-65v-69.2c-52.3,20.9-99.3,52-140.1,92.8
c-40.8,40.8-71.9,87.8-92.8,140.1h69.2c24.7,0,47.2,9.4,65,27.3c17.9,17.9,27.3,40.4,27.3,65v128c0,24.7-9.4,47.2-27.3,65
c-17.9,17.9-40.4,27.3-65,27.3h-69.2c20.9,52.3,52,99.3,92.8,140.1c40.8,40.8,87.8,71.9,140.1,92.8v-69.2c0-24.7,9.4-47.2,27.3-65
c17.9-17.9,40.4-27.3,65-27.3H961.1z"/>
</g>
<g>
<path d="M1325,1024h-109c-17.3,0-32.3-6.3-45-19s-19-27.7-19-45V832c0-17.3,6.3-32.3,19-45s27.7-19,45-19h109
c-21.3-72-58.8-134.8-112.5-188.5S1096,488.3,1024,467v109c0,17.3-6.3,32.3-19,45s-27.7,19-45,19H832c-17.3,0-32.3-6.3-45-19
s-19-27.7-19-45V467c-72,21.3-134.8,58.8-188.5,112.5S488.3,696,467,768h109c17.3,0,32.3,6.3,45,19s19,27.7,19,45v128
c0,17.3-6.3,32.3-19,45s-27.7,19-45,19H467c21.3,72,58.8,134.8,112.5,188.5S696,1303.7,768,1325v-109c0-17.3,6.3-32.3,19-45
s27.7-19,45-19h128c17.3,0,32.3,6.3,45,19s19,27.7,19,45v109c72-21.3,134.8-58.8,188.5-112.5S1303.7,1096,1325,1024z M1664,832v128
c0,17.3-6.3,32.3-19,45s-27.7,19-45,19h-143c-24.7,107.3-76.2,200.2-154.5,278.5S1131.3,1432.3,1024,1457v143
c0,17.3-6.3,32.3-19,45s-27.7,19-45,19H832c-17.3,0-32.3-6.3-45-19s-19-27.7-19-45v-143c-107.3-24.7-200.2-76.2-278.5-154.5
S359.7,1131.3,335,1024H192c-17.3,0-32.3-6.3-45-19s-19-27.7-19-45V832c0-17.3,6.3-32.3,19-45s27.7-19,45-19h143
c24.7-107.3,76.2-200.2,154.5-278.5S660.7,359.7,768,335V192c0-17.3,6.3-32.3,19-45s27.7-19,45-19h128c17.3,0,32.3,6.3,45,19
s19,27.7,19,45v143c107.3,24.7,200.2,76.2,278.5,154.5S1432.3,660.7,1457,768h143c17.3,0,32.3,6.3,45,19S1664,814.7,1664,832z"/>
</g>
</svg>
</div>
</div>
</section>
<div hidden id="pan-controls" class="pan-controls" role="group" aria-label="Pan image" data-i18n-aria-label="panControls">
Expand Down
68 changes: 0 additions & 68 deletions app/js/canvas.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,3 @@
function getCanvasCursorPosition(e, canvas) {
var rect = canvas.getBoundingClientRect();
var x = e.clientX - rect.left;
var y = e.clientY - rect.top;
return {
x,
y
};
}

function getCanvas() {
var canvas = selector('#image_preview');
if (!canvas || typeof canvas.getContext === 'undefined') {
Expand Down Expand Up @@ -55,61 +45,3 @@ function drawPixel(context, color, x, y) {
context.fillRect(x, y, 1, 1);
}
}

var shiftPressed = false;
function canvasKeyDown(canvas, e) {
if (e.code == 'Enter' || e.code == 'Space') {
e.preventDefault();
pickColorFromCrosshairs();
return;
}

if (e.key == 'Shift') {
shiftPressed = true;
return;
}

var crosshairs = selector('#crosshairs');

var change = false;
var x = parseInt(crosshairs.getAttribute('data-posx'));
var y = parseInt(crosshairs.getAttribute('data-posy'));

var speed = (shiftPressed ? 10 : 1);

if (e.key == 'ArrowUp') {
y -= 1 * speed;
change = true;
} else if (e.key == 'ArrowRight') {
x += 1 * speed;
change = true;
} else if (e.key == 'ArrowDown') {
y += 1 * speed;
change = true;
} else if (e.key == 'ArrowLeft') {
x -= 1 * speed;
change = true;
}

if (change) {
e.preventDefault();
moveCrosshairs(canvas, x, y);
}
}

function canvasKeyUp(e) {
if (e.key == 'Shift') {
return (shiftPressed = false);
}
}

function canvasBlur() {
shiftPressed = false;

if (window.setColorPickerActive) {
window.setColorPickerActive(false);
return;
}

selector('#colorpicker').setAttribute('aria-pressed', 'false');
}
Loading