From 9e99749de911ffc5b375bc79ee664d498e4d76d6 Mon Sep 17 00:00:00 2001 From: Craig Jennings Date: Tue, 16 Jun 2026 06:11:15 -0500 Subject: feat(theme-studio): move the contrast verdict into a hover The contrast column showed "5.4 PASS". The number's color already encodes the tier (green AAA, grey AA, red fail), so the PASS/FAIL word was redundant. I dropped it and put the WCAG meaning in the cell's hover via a pure contrastTitle helper. crHtml now renders just the colored number. verdictFor stays for the covered-overlay worst-case readout, which is unchanged. --- scripts/theme-studio/app-util.js | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) (limited to 'scripts/theme-studio/app-util.js') diff --git a/scripts/theme-studio/app-util.js b/scripts/theme-studio/app-util.js index e3f76dd88..774553012 100644 --- a/scripts/theme-studio/app-util.js +++ b/scripts/theme-studio/app-util.js @@ -17,4 +17,14 @@ function ratingColor(r){return r>=7?'#5d9b86':r>=4.5?'#a9b2bb':'#cb6b4d';} // Pick black or white text for a background hex, by WCAG relative luminance. function textOn(h){const L=rl(h);return ((L+0.05)/0.05)>(1.05/(L+0.05))?'#000':'#fff';} -export { normHex, ratingColor, textOn }; +// Hover text for a contrast ratio. The number's color already encodes the tier +// (ratingColor: green AAA, grey AA, red fail), so the cell drops the PASS/FAIL +// word and this explains the color on hover. +function contrastTitle(r){ + const n=r.toFixed(1)+':1'; + if(r>=7) return n+' (green): passes WCAG AA and AAA'; + if(r>=4.5) return n+' (grey): passes WCAG AA, not AAA'; + return n+' (red): fails WCAG AA'; +} + +export { normHex, ratingColor, textOn, contrastTitle }; -- cgit v1.2.3