diff --git a/package-lock.json b/package-lock.json
index ca96271..95468ec 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -45,7 +45,6 @@
         "glob": "^11.0.0",
         "lightningcss": "^1.28.2",
         "plop": "^4.0.1",
-        "postcss-color-contrast": "^1.1.0",
         "sass-embedded": "^1.82.0",
         "storybook": "^8.4.7",
         "storybook-dark-mode": "^4.0.2",
@@ -9833,19 +9832,6 @@
         "node": "^10 || ^12 || >=14"
       }
     },
-    "node_modules/postcss-color-contrast": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/postcss-color-contrast/-/postcss-color-contrast-1.1.0.tgz",
-      "integrity": "sha512-NYZcZf+D70RlM71cTBl7Vkz+ZmHY5iik0BXmG089GnVv0iAEODhXqQDdH8LVBPQANLKV/ZcW0y4nVtOoFk4d2g==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "postcss-value-parser": "^4.2.0"
-      },
-      "peerDependencies": {
-        "postcss": "*"
-      }
-    },
     "node_modules/postcss-load-config": {
       "version": "3.1.4",
       "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-3.1.4.tgz",
diff --git a/package.json b/package.json
index 1b27d9d..5109895 100644
--- a/package.json
+++ b/package.json
@@ -88,7 +88,6 @@
     "vite-css-modules": "^1.6.0",
     "typescript-plugin-css-modules": "^5.0.1",
     "sass-embedded": "^1.82.0",
-    "postcss-color-contrast": "^1.1.0",
     "lightningcss": "^1.28.2",
     "@types/react": "^19.0.1",
     "@types/react-dom": "^19.0.1"
diff --git a/package.json.js b/package.json.js
index ae03545..ad78301 100644
--- a/package.json.js
+++ b/package.json.js
@@ -128,7 +128,6 @@ const packageConfig = {
     'vite-css-modules': '^1.6.0',
     'typescript-plugin-css-modules': '^5.0.1',
     'sass-embedded': '^1.82.0',
-    'postcss-color-contrast': '^1.1.0',
     'lightningcss': '^1.28.2',
     
     // React
diff --git a/src/docs/Colors.mdx b/src/docs/Colors.mdx
index 85b5bc3..599e940 100644
--- a/src/docs/Colors.mdx
+++ b/src/docs/Colors.mdx
@@ -2,7 +2,6 @@
 import cx from 'classnames/dedupe';
 import { Meta, Unstyled } from '@storybook/blocks';
 
-import colorContrast from 'postcss-color-contrast/js';
 import { colorsByCategory } from '../styling/variables.ts';
 
 import { H4, H5 } from '../typography/Heading/Heading.tsx';
@@ -38,9 +37,7 @@ Primitive color tokens are the basic color definitions which are not dependent o
         <dl className={cl['colors-list']}>
           {Object.entries(colorCategory).map(([colorName, { weight, color }]) =>
             <TooltipProvider key={colorName} tooltip={<code className="bk-body-text">{`bk.$color-${colorName}`}</code>}>
-              <div className={cl['color']} tabIndex="1"
-                style={{ '--color': color, '--contrast': colorContrast(color, ['#e5e5e5', '#171717']) }}
-              >
+              <div className={cl['color']} tabIndex="1" style={{ '--color': color }}>
                 <dt>{weight}</dt>
                 <dd>{color}</dd>
               </div>
diff --git a/src/docs/Colors.module.scss b/src/docs/Colors.module.scss
index c087d9d..907b539 100644
--- a/src/docs/Colors.module.scss
+++ b/src/docs/Colors.module.scss
@@ -29,14 +29,15 @@
           justify-content: end;
           
           color: black;
+          /* color: color-contrast(var(--color) vs #171717, #e5e5e5); // Insufficient browser support */
+          /* color: white; mix-blend-mode: difference; // Works but results in some ugly colors */
+          color: lch(from var(--color) calc((49.44 - l) * infinity) 0 0); // https://codepen.io/devongovett/pen/QwLbRrW
+          
           font-size: 0.8rem;
           
           dt, dd {
             all: unset;
-            /* color: color-contrast(var(--color) vs black, white); // Insufficient browser support */
-            /* color: white; mix-blend-mode: difference; */
-            
-            color: var(--contrast);
+            color: inherit;
           }
           dt {
             font-weight: 600;