diff --git a/library/components/legends/LegendProgressBar.vue b/library/components/legends/LegendProgressBar.vue
index 5485e5ed5..d3143aecd 100644
--- a/library/components/legends/LegendProgressBar.vue
+++ b/library/components/legends/LegendProgressBar.vue
@@ -67,9 +67,13 @@ useShadowStyles(`
    part of the legend chrome. Dark is the STL default; .lpb-light mirrors the
    .stl-panel[data-theme="light"] palette. ── */
 .lpb{position:relative;display:flex;align-items:center;gap:8px;min-width:0;width:100%;box-sizing:border-box;}
-.lpb-track{position:relative;flex:1 1 auto;min-width:60px;display:flex;height:10px;border-radius:5px;overflow:hidden;background:rgba(110,118,129,0.25);}
+/* Hit area vs paint (WCAG 2.5.8, rega at 390: every segment was a 10px-tall button). The track is 24px
+   tall so each segment button is a 24px target, but it paints only a 10px band: the track's background is
+   a centred 10px strip and each segment clips its colour to its content box inside 7px of padding. The
+   -7px margins keep the legend's layout exactly 10px tall, as before. */
+.lpb-track{position:relative;flex:1 1 auto;min-width:60px;display:flex;height:24px;margin:-7px 0;overflow:hidden;background:linear-gradient(rgba(110,118,129,0.25),rgba(110,118,129,0.25)) center/100% 10px no-repeat;}
 .lpb-span{display:flex;height:100%;min-width:0;flex:0 0 auto;}
-.lpb-seg{appearance:none;-webkit-appearance:none;border:none;margin:0;padding:0;height:100%;display:block;flex:0 0 auto;cursor:pointer;outline:none;-webkit-tap-highlight-color:transparent;transition:filter 0.12s,box-shadow 0.12s;}
+.lpb-seg{appearance:none;-webkit-appearance:none;border:none;margin:0;padding:7px 0;box-sizing:border-box;background-clip:content-box !important;height:100%;display:block;flex:0 0 auto;cursor:pointer;outline:none;-webkit-tap-highlight-color:transparent;transition:filter 0.12s,box-shadow 0.12s;}
 .lpb-seg-rest{flex:1 1 auto;}
 .lpb-seg:focus{outline:none;}
 /* Hover / keyboard-focus / active highlight — brighter + a 1px inset ring (inset