Description
Several text elements in the overlay use colours that fail the WCAG AA minimum contrast ratio of 4.5:1 against the dark background, making them difficult to read for viewers on low-quality screens or at a distance.
Failing elements
| Colour |
Element |
Estimated ratio |
WCAG AA |
#666 |
.top-rank, #footer |
~2.7:1 |
Fails |
#777 |
#gauge-label, #last-label, #top-label |
~3.1:1 |
Fails |
#555 badge |
Idle status badge (small text) |
~3.5:1 |
Fails |
Fix
Replace all sub-threshold colours with #999 minimum (ratio ~5.7:1 on black):
#666 → #999#777 → #999#555 badge background → #888 with white text
These are safe, subtle changes that preserve the dark aesthetic while meeting accessibility requirements.
Identified by
🎨 [Tech] UX Designer
Description
Several text elements in the overlay use colours that fail the WCAG AA minimum contrast ratio of 4.5:1 against the dark background, making them difficult to read for viewers on low-quality screens or at a distance.
Failing elements
#666.top-rank,#footer#777#gauge-label,#last-label,#top-label#555badgeFix
Replace all sub-threshold colours with
#999minimum (ratio ~5.7:1 on black):#666→#999#777→#999#555badge background →#888with white textThese are safe, subtle changes that preserve the dark aesthetic while meeting accessibility requirements.
Identified by
🎨
[Tech] UX Designer