demo · v130
Forced-colors audit
Chrome 130's meter fallback styles work cleanly with currentColor — which means a single meter theme can stretch across light, dark, and forced-colors modes. This page renders the same three meters in all four colour contexts side by side, computes WCAG AA contrast for each cell, and reports which themes survive accessibility.
theme
| context | bar / track contrast | fill / track contrast | verdict |
|---|
the code
/* Theme A — survives every context */
meter {
appearance: none;
background: transparent;
border: 1px solid currentColor;
}
meter::-webkit-meter-bar { background: transparent; border: 1px solid currentColor; }
meter::-webkit-meter-optimum-value { background: currentColor; }
@media (forced-colors: active) {
/* Nothing to override — currentColor is already the system text colour. */
}