diff --git a/packages/web/components/tokens/stitches.config.ts b/packages/web/components/tokens/stitches.config.ts
index 52e2c1795..537eb72e5 100644
--- a/packages/web/components/tokens/stitches.config.ts
+++ b/packages/web/components/tokens/stitches.config.ts
@@ -136,9 +136,9 @@ export const { styled, css, theme, getCssText, globalCss, keyframes, config } =
 
         // Semantic Colors
         overlay: blackA.blackA9,
-        highlightBackground: 'rgb(255,234,159)',
+        highlightBackground: 'rgba(255, 210, 52, 0.65)',
         highlight: '#FFD234',
-        highlightText: 'rgba(255, 210, 52, 0.65)',
+        highlightText: '#3D3D3D',
         error: '#FA5E4A',
 
         // Brand Colors
@@ -180,7 +180,6 @@ export const darkTheme = createTheme(ThemeId.Dark, {
     grayBgActive: '#4f4d4c',
     grayTextContrast: '#D8D7D7',
     grayBorder: 'rgba(255, 255, 255, 0.06)',
-    highlightText: '#867740',
     graySolid: '#9C9B9A',
 
     grayBgSubtle: grayDark.gray2,
@@ -192,8 +191,9 @@ export const darkTheme = createTheme(ThemeId.Dark, {
 
     // Semantic Colors
     overlay: blackA.blackA9,
-    highlightBackground: 'rgb(255,234,159)',
+    highlightBackground: '#867740',
     highlight: '#FFD234',
+    highlightText: 'white',
     error: '#FA5E4A',
 
     // Reader Colors
@@ -296,7 +296,7 @@ export const globalStyles = globalCss({
   // browser prefers this loaded here vs in the article styling css
   '.article-inner-css': {
     '::selection': {
-      background: '$highlightText',
+      background: '$highlightBackground',
     }
   }
 })
diff --git a/packages/web/styles/articleInnerStyling.css b/packages/web/styles/articleInnerStyling.css
index 934dd431f..ee40081a6 100644
--- a/packages/web/styles/articleInnerStyling.css
+++ b/packages/web/styles/articleInnerStyling.css
@@ -3,14 +3,16 @@
 }
 
 .highlight {
-  background-color: var(--colors-highlightText) !important;
+  color: var(--colors-highlightText);
+  background-color: var(--colors-highlightBackground);
   cursor: pointer;
 }
 
 .highlight_with_note {
-  cursor: pointer;
-  border-bottom: 2px var(--colors-highlightText) solid;
+  color: var(--colors-highlightText);
+  border-bottom: 2px var(--colors-highlightBackground) solid;
   border-radius: 2px;
+  cursor: pointer;
 }
 
 .article-inner-css .highlight_with_note .highlight_note_button {
@@ -118,7 +120,11 @@ on smaller screens we display the note icon
 }
 
 .article-inner-css a {
-  color: #416ed2;
+  color: var(--font-color-readerFont);
+}
+
+.article-inner-css .highlight a {
+  color: var(--colors-highlightText);
 }
 
 .article-inner-css figure {