From e9e66b2dfb2ad3b3d606cd22ae892c7b40a2e162 Mon Sep 17 00:00:00 2001 From: Manuel Villaverde Date: Wed, 9 Sep 2026 20:21:41 +0200 Subject: [PATCH] fix: make non-preset channel colors visible on the map (#164) The fallback palette used for channels that are not Meshtastic presets was built out of pastels, which are unreadable against the light OSM tiles. Six of the nine entries scored under 1.6:1 contrast on the map: #fffac8 at 1.06:1 and #aaffc3 at 1.18:1 were effectively invisible, leaving only the white marker outline showing. The underlying issue is that one color feeds two opposite backgrounds. The marker fill sits on light map tiles, while the filter label is text on the dark Bootstrap panel. The old palette was calibrated only for the panel. Replace it with 12 colors chosen by a search over HSL, constrained to clear 3:1 contrast against both backgrounds, stay at deltaE >= 30 from every channelColorOverrides preset, and deltaE >= 20.9 from each other. Saturation is capped at 80% to keep out neon tones that would collide with ShortTurbo. Growing the palette from 9 to 12 entries is safe: the index is derived from palette.length rather than a fixed number. --- meshview/templates/map.html | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/meshview/templates/map.html b/meshview/templates/map.html index 7602aa6..0fae47a 100644 --- a/meshview/templates/map.html +++ b/meshview/templates/map.html @@ -207,8 +207,11 @@ const UNMAPPED_TTL_MS = 5000; const portMap = window.PORT_LABEL_MAP; -const palette = ["#bcf60c","#fabebe","#e6beff","#9a6324","#fffac8","#800000","#aaffc3","#ffd8b1", - "#808080"]; +// Fallback colors for channels that are not Meshtastic presets. +// Every entry clears 3:1 contrast against both the light map tiles and the dark +// filter panel, and stays perceptually far from every channelColorOverrides value. +const palette = ["#18aa18","#976049","#a5508c","#1898dc","#3a8846","#dc1884", + "#b8813d","#b64f35","#408b18","#4c719e","#be379c","#18aa52"]; const channelColorOverrides = { longfast: "#4363d8",