diff --git a/packages/ui-toolkit/src/anchor/index.js b/packages/ui-toolkit/src/anchor/index.js
index eb3ca5a8..ddd21024 100644
--- a/packages/ui-toolkit/src/anchor/index.js
+++ b/packages/ui-toolkit/src/anchor/index.js
@@ -9,7 +9,7 @@ const BaseLink = styled(({ component, children, ...rest }) =>
   React.createElement(component, rest, children)
 )`
   color: ${props => props.theme.primary};
-  -webkit-text-fill-color: ${props => props.theme.primary};
+  -webkit-text-fill-color: currentcolor;
 
   &:hover {
     text-decoration: none;
@@ -17,12 +17,12 @@ const BaseLink = styled(({ component, children, ...rest }) =>
 
   ${isOr('secondary', 'reversed')`
     color: ${props => props.theme.white};
-    -webkit-text-fill-color: ${props => props.theme.white};
+    -webkit-text-fill-color: currentcolor;
   `};
 
   ${is('disabled')`
     color: ${props => props.theme.grey};
-    -webkit-text-fill-color: ${props => props.theme.grey};
+    -webkit-text-fill-color: currentcolor;
     pointer-events: none;
 
     &:hover {
diff --git a/packages/ui-toolkit/src/button/index.js b/packages/ui-toolkit/src/button/index.js
index 6a9bb637..d08933c1 100644
--- a/packages/ui-toolkit/src/button/index.js
+++ b/packages/ui-toolkit/src/button/index.js
@@ -104,7 +104,7 @@ const Button = styled(BaseButton)`
   cursor: pointer;
 
   color: ${props => props.theme.white};
-  -webkit-text-fill-color: ${props => props.theme.white};
+  -webkit-text-fill-color: currentcolor;
   background-image: none;
   background-color: ${props => props.theme.primary};
   border-radius: ${borderRadius};
@@ -138,7 +138,7 @@ const Button = styled(BaseButton)`
 
   ${is('secondary')`
     color: ${props => props.theme.secondary};
-    -webkit-text-fill-color: ${props => props.theme.secondary};
+    -webkit-text-fill-color: currentcolor;
     background-color: ${props => props.theme.white};
     border-color: ${props => props.theme.grey};
 
@@ -162,7 +162,7 @@ const Button = styled(BaseButton)`
 
   ${is('error')`
     color: ${props => props.theme.red};
-    -webkit-text-fill-color: ${props => props.theme.red};
+    -webkit-text-fill-color: currentcolor;
     background-color: ${props => props.theme.white};
     border-color: ${props => props.theme.red};
     font-weight: 600;
diff --git a/packages/ui-toolkit/src/card/header.js b/packages/ui-toolkit/src/card/header.js
index d25ad74b..9bb1fc86 100644
--- a/packages/ui-toolkit/src/card/header.js
+++ b/packages/ui-toolkit/src/card/header.js
@@ -31,13 +31,13 @@ const BaseHeader = BaseCard.extend`
   ${isNot('secondary', 'tertiary')`
     ${is('transparent')`
       color: ${props => props.theme.text};
-        -webkit-text-fill-color: ${props => props.theme.text};
+       -webkit-text-fill-color: currentcolor;
     `};
   `};
 
   ${is('disabled')`
     color: ${props => props.theme.text};
-    -webkit-text-fill-color: ${props => props.theme.text};
+    -webkit-text-fill-color: currentcolor;
     border-color: ${props => props.theme.grey};
     box-shadow: none;
   `};
@@ -77,7 +77,7 @@ const BaseBox = BaseCard.extend`
 
   ${is('disabled')`
     color: ${props => props.theme.text};
-    -webkit-text-fill-color: ${props => props.theme.text};
+    -webkit-text-fill-color: currentcolor;
     border-color: ${props => props.theme.grey};
     box-shadow: none;
 
diff --git a/packages/ui-toolkit/src/form/meta.js b/packages/ui-toolkit/src/form/meta.js
index 23921d71..8a6294ff 100644
--- a/packages/ui-toolkit/src/form/meta.js
+++ b/packages/ui-toolkit/src/form/meta.js
@@ -14,17 +14,17 @@ const StyledLabel = Label.extend`
 
   ${is('error')`
     color: ${props => props.theme.red};
-    -webkit-text-fill-color: ${props => props.theme.red};
+    -webkit-text-fill-color: currentcolor;
   `};
 
   ${is('warning')`
     color: ${props => props.theme.orange};
-    -webkit-text-fill-color: ${props => props.theme.orange};
+    -webkit-text-fill-color: currentcolor;
   `};
 
   ${is('success')`
     color: ${props => props.theme.green};
-    -webkit-text-fill-color: ${props => props.theme.green};
+    -webkit-text-fill-color: currentcolor;
   `};
 
   font-size: ${remcalc(13)};
diff --git a/packages/ui-toolkit/src/header/item.js b/packages/ui-toolkit/src/header/item.js
index c28633e3..0f4d61c7 100644
--- a/packages/ui-toolkit/src/header/item.js
+++ b/packages/ui-toolkit/src/header/item.js
@@ -8,7 +8,7 @@ import P from '../text/p';
 const Text = P.extend`
   text-align: center;
   color: ${props => props.theme.white};
-  -webkit-text-fill-color: ${props => props.theme.white};
+  -webkit-text-fill-color: currentcolor;
   margin: 0;
 `;
 
diff --git a/packages/ui-toolkit/src/header/nav.js b/packages/ui-toolkit/src/header/nav.js
index 5bbec1be..acb0c122 100644
--- a/packages/ui-toolkit/src/header/nav.js
+++ b/packages/ui-toolkit/src/header/nav.js
@@ -6,5 +6,5 @@ export default styled.ul`
   display: flex;
   list-style: none;
   color: ${props => props.theme.white};
-  -webkit-text-fill-color: ${props => props.theme.white};
+  -webkit-text-fill-color: currentcolor;
 `;
diff --git a/packages/ui-toolkit/src/styleguide/component.js b/packages/ui-toolkit/src/styleguide/component.js
index 0cf3c7eb..3eebf6c7 100644
--- a/packages/ui-toolkit/src/styleguide/component.js
+++ b/packages/ui-toolkit/src/styleguide/component.js
@@ -93,16 +93,6 @@ const Content = styled.div`
   margin-top: ${remcalc(40)};
 `;
 
-const HeaderText = styled(H2)`
-  -webkit-text-fill-color: ${props => props.theme.white};
-  color: ${props => props.theme.white};
-`;
-
-const Desc = styled(P)`
-  -webkit-text-fill-color: ${props => props.theme.white};
-  color: ${props => props.theme.white};
-`;
-
 export default ({
   name,
   heading,
@@ -114,9 +104,9 @@ export default ({
   return (
     <CardStyled id={name.toLowerCase()}>
       <Header>
-        <HeaderText>{heading.props.children}</HeaderText>
+        <H2 white>{heading.props.children}</H2>
         {description &&
-          description.props && <Desc>{description.props.text}</Desc>}
+          description.props && <P white>{description.props.text}</P>}
       </Header>
       <Main>
         <Props>{tabButtons}</Props>
diff --git a/packages/ui-toolkit/src/styleguide/section.js b/packages/ui-toolkit/src/styleguide/section.js
index 5276cc58..fcbf9dfa 100644
--- a/packages/ui-toolkit/src/styleguide/section.js
+++ b/packages/ui-toolkit/src/styleguide/section.js
@@ -27,16 +27,6 @@ const Main = styled.div`
   }
 `;
 
-const HeaderText = styled(H2)`
-  -webkit-text-fill-color: ${props => props.theme.white};
-  color: ${props => props.theme.white};
-`;
-
-const Desc = styled(P)`
-  -webkit-text-fill-color: ${props => props.theme.white};
-  color: ${props => props.theme.white};
-`;
-
 export default allProps => {
   const { name, content, components, sections, depth, description } = allProps;
 
@@ -47,8 +37,8 @@ export default allProps => {
       {name &&
         depth !== 1 && (
           <Header>
-            <HeaderText>{name}</HeaderText>
-            {description && <Desc>{description}</Desc>}
+            <H2 white>{name}</H2>
+            {description && <P white>{description}</P>}
           </Header>
         )}
       <TagMain>
diff --git a/packages/ui-toolkit/src/text/headings.js b/packages/ui-toolkit/src/text/headings.js
index a93cf2ab..03c2ff4f 100644
--- a/packages/ui-toolkit/src/text/headings.js
+++ b/packages/ui-toolkit/src/text/headings.js
@@ -17,9 +17,10 @@ export const H1 = NH1.extend`
   `};
 
   ${is('white')`
-    -webkit-text-fill-color: ${props => props.theme.white};
+    -webkit-text-fill-color: currentcolor;
     color: ${props => props.theme.white}
   `};
+
   & + p,
   & + small,
   & + h1,
@@ -46,7 +47,7 @@ export const H2 = styled.h2`
   `};
 
   ${is('white')`
-    -webkit-text-fill-color: ${props => props.theme.white};
+    -webkit-text-fill-color: currentcolor;
     color: ${props => props.theme.white}
   `};
 
@@ -76,7 +77,7 @@ export const H3 = styled.h3`
   `};
 
   ${is('white')`
-    -webkit-text-fill-color: ${props => props.theme.white};
+    -webkit-text-fill-color: currentcolor;
     color: ${props => props.theme.white}
   `};
 
@@ -107,7 +108,7 @@ export const H4 = styled.h4`
   `};
 
   ${is('white')`
-    -webkit-text-fill-color: ${props => props.theme.white};
+    -webkit-text-fill-color: currentcolor;
     color: ${props => props.theme.white}
   `};
 
@@ -137,7 +138,7 @@ export const H5 = styled.h4`
   `};
 
   ${is('white')`
-    -webkit-text-fill-color: ${props => props.theme.white};
+    -webkit-text-fill-color: currentcolor;
     color: ${props => props.theme.white}
   `};
 
@@ -167,7 +168,7 @@ export const H6 = styled.h6`
   `};
 
   ${is('white')`
-    -webkit-text-fill-color: ${props => props.theme.white};
+    -webkit-text-fill-color: currentcolor;
     color: ${props => props.theme.white}
   `};
 
diff --git a/packages/ui-toolkit/src/text/p.js b/packages/ui-toolkit/src/text/p.js
index 39dbbd7d..df767afe 100644
--- a/packages/ui-toolkit/src/text/p.js
+++ b/packages/ui-toolkit/src/text/p.js
@@ -11,7 +11,7 @@ export default styled.p`
   margin: 0;
 
   ${is('white')`
-    -webkit-text-fill-color: ${props => props.theme.white};
+    -webkit-text-fill-color: currentcolor;
     color: ${props => props.theme.white}
   `};
 
diff --git a/packages/ui-toolkit/src/theme/colors.js b/packages/ui-toolkit/src/theme/colors.js
index febd5a93..5ea87083 100644
--- a/packages/ui-toolkit/src/theme/colors.js
+++ b/packages/ui-toolkit/src/theme/colors.js
@@ -34,13 +34,13 @@ const Paragraph = P.extend`
   margin: 0;
   font-weight: bold;
   color: ${props => props.theme.white};
-  -webkit-text-fill-color: ${props => props.theme.white};
+  -webkit-text-fill-color: currentcolor;
   width: ${remcalc(193)};
   text-align: left;
 
   ${is('dark')`
     color: ${props => props.theme.text};
-    -webkit-text-fill-color: ${props => props.theme.text};
+    -webkit-text-fill-color: currentcolor;
   `};
 `;
 
@@ -48,11 +48,10 @@ const Code = styled.code`
   font-size: ${remcalc(13)};
   margin: 0;
   color: ${props => props.theme.white};
-  -webkit-text-fill-color: ${props => props.theme.white};
 
   ${is('dark')`
     color: ${props => props.theme.text};
-    -webkit-text-fill-color: ${props => props.theme.text};
+    -webkit-text-fill-color: currentcolor;
   `};
 `;
 
diff --git a/packages/ui-toolkit/src/tooltip/style.js b/packages/ui-toolkit/src/tooltip/style.js
index 8a6e9fc2..866dd006 100644
--- a/packages/ui-toolkit/src/tooltip/style.js
+++ b/packages/ui-toolkit/src/tooltip/style.js
@@ -4,7 +4,7 @@ import remcalc from 'remcalc';
 export default ({ background, color, border, arrow }) => css`
   background: ${props => props.theme[background]};
   color: ${props => props.theme[color]};
-  -webkit-text-fill-color: ${props => props.theme[color]};
+  -webkit-text-fill-color: currentcolor;
   z-index: 999;
 
   border-radius: ${remcalc(4)};