chore: add color contrast testing scripts and update dependencies

package-lock.json

@@ -9,6 +9,7 @@
       "version": "0.1.0",
       "dependencies": {
         "@antv/g2": "^5.4.8",
+        "@playwright/test": "^1.58.2",
         "@radix-ui/react-dialog": "^1.1.15",
         "@radix-ui/react-dropdown-menu": "^2.1.16",
         "@types/three": "^0.183.1",
@@ -2292,6 +2293,21 @@
         "third-party-web": "latest"
       }
     },
+    "node_modules/@playwright/test": {
+      "version": "1.58.2",
+      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.58.2.tgz",
+      "integrity": "sha512-akea+6bHYBBfA9uQqSYmlJXn61cTa+jbO87xVLCWbTqbWadRVmhxlXATaOjOgcBaWU4ePo0wB41KMFv3o35IXA==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "playwright": "1.58.2"
+      },
+      "bin": {
+        "playwright": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/@prisma/instrumentation": {
       "version": "6.11.1",
       "resolved": "https://registry.npmjs.org/@prisma/instrumentation/-/instrumentation-6.11.1.tgz",
@@ -6242,13 +6258,29 @@
       "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
       "license": "ISC"
     },
+    "node_modules/playwright": {
+      "version": "1.58.2",
+      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.58.2.tgz",
+      "integrity": "sha512-vA30H8Nvkq/cPBnNw4Q8TWz1EJyqgpuinBcHET0YVJVFldr8JDNiU9LaWAE1KqSkRYazuaBhTpB5ZzShOezQ6A==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "playwright-core": "1.58.2"
+      },
+      "bin": {
+        "playwright": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "optionalDependencies": {
+        "fsevents": "2.3.2"
+      }
+    },
     "node_modules/playwright-core": {
       "version": "1.58.2",
       "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.58.2.tgz",
       "integrity": "sha512-yZkEtftgwS8CsfYo7nm0KE8jsvm6i/PTgVtB8DL726wNf6H2IMsDuxCpJj59KDaxCtSnrWan2AeDqM7JBaultg==",
-      "dev": true,
       "license": "Apache-2.0",
-      "peer": true,
       "bin": {
         "playwright-core": "cli.js"
       },
@@ -6256,6 +6288,20 @@
         "node": ">=18"
       }
     },
+    "node_modules/playwright/node_modules/fsevents": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
+      "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
     "node_modules/postal-mime": {
       "version": "2.7.3",
       "resolved": "https://registry.npmjs.org/postal-mime/-/postal-mime-2.7.3.tgz",

package.json

@@ -21,6 +21,7 @@
   },
   "dependencies": {
     "@antv/g2": "^5.4.8",
+    "@playwright/test": "^1.58.2",
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-dropdown-menu": "^2.1.16",
     "@types/three": "^0.183.1",

scripts/test-css-contrast.js

@@ -0,0 +1,25 @@
+const { calculateContrastRatio, meetsWCAGStandard } = require('../src/lib/color-contrast.ts');
+
+console.log('Testing CSS color contrast...');
+
+const primaryResult = meetsWCAGStandard('#1C1C1C', '#FFFFFF', 'AA', 'normal');
+console.log('Primary text (#1C1C1C) on background (#FFFFFF):', primaryResult);
+
+const tertiaryResult = meetsWCAGStandard('#4A4A4A', '#FFFFFF', 'AA', 'normal');
+console.log('Tertiary text (#4A4A4A) on background (#FFFFFF):', tertiaryResult);
+
+const mutedResult = meetsWCAGStandard('#6B6B6B', '#FFFFFF', 'AA', 'normal');
+console.log('Muted text (#6B6B6B) on background (#FFFFFF):', mutedResult);
+
+console.log('\nExpected: All should pass (passes: true)');
+console.log('Actual results:');
+console.log('- Primary:', primaryResult.passes ? '✓ PASS' : '✗ FAIL', `(ratio: ${primaryResult.ratio.toFixed(2)}:1)`);
+console.log('- Tertiary:', tertiaryResult.passes ? '✓ PASS' : '✗ FAIL', `(ratio: ${tertiaryResult.ratio.toFixed(2)}:1)`);
+console.log('- Muted:', mutedResult.passes ? '✓ PASS' : '✗ FAIL', `(ratio: ${mutedResult.ratio.toFixed(2)}:1)`);
+
+if (!primaryResult.passes || !tertiaryResult.passes || !mutedResult.passes) {
+  console.log('\n⚠️  Some tests failed - need to optimize CSS variables');
+  process.exit(1);
+}
+
+console.log('\n✅ All tests passed!');

scripts/verify-color-contrast.js

@@ -0,0 +1,15 @@
+const { calculateContrastRatio, meetsWCAGStandard } = require('../src/lib/color-contrast.ts');
+
+console.log('Testing color contrast functions...');
+
+const ratio = calculateContrastRatio('#000000', '#FFFFFF');
+console.log('Black on white ratio:', ratio);
+console.log('Expected: ~21, Actual:', ratio);
+
+const result = meetsWCAGStandard('#000000', '#FFFFFF', 'AA', 'normal');
+console.log('WCAG AA compliance:', result);
+
+const lowContrastResult = meetsWCAGStandard('#808080', '#FFFFFF', 'AA', 'normal');
+console.log('Low contrast test:', lowContrastResult);
+
+console.log('All tests completed!');