diff --git a/extensions/tags/js/src/forum/components/TagHero.js b/extensions/tags/js/src/forum/components/TagHero.js
index e1ff645f2..e288949ba 100644
--- a/extensions/tags/js/src/forum/components/TagHero.js
+++ b/extensions/tags/js/src/forum/components/TagHero.js
@@ -10,7 +10,7 @@ export default class TagHero extends Component {
 
     return (
       <header
-        className={classList('Hero', 'TagHero', { 'TagHero--colored': color }, textContrastClass(color))}
+        className={classList('Hero', 'TagHero', { 'TagHero--colored': color, [textContrastClass(color)]: color })}
         style={color ? { '--hero-bg': color } : ''}
       >
         <div className="container">