Files
novalon-website/scripts/check-color-contrast.ts
T
张翔 cbbc6e8824 feat: add color contrast checking script for CI/CD
- Added scripts/check-color-contrast.ts to validate WCAG AA compliance
- Added npm script 'check:contrast' for easy execution
- Validates 7 critical color pairs
- All color combinations now pass WCAG AA 4.5:1 standard
2026-03-06 20:25:52 +08:00

63 lines
2.0 KiB
TypeScript

import { calculateContrastRatio, meetsWCAGStandard } from '../src/lib/color-contrast.ts';
interface ColorPair {
name: string;
foreground: string;
background: string;
textSize?: 'normal' | 'large';
}
const criticalColorPairs: ColorPair[] = [
{ name: 'Primary text on primary background', foreground: '#1C1C1C', background: '#FFFFFF' },
{ name: 'Secondary text on primary background', foreground: '#3D3D3D', background: '#FFFFFF' },
{ name: 'Tertiary text on primary background', foreground: '#4A4A4A', background: '#FFFFFF' },
{ name: 'Muted text on primary background', foreground: '#6B6B6B', background: '#FFFFFF' },
{ name: 'Brand primary on white', foreground: '#C41E3A', background: '#FFFFFF' },
{ name: 'Brand primary on brand bg', foreground: '#C41E3A', background: '#FEF2F4' },
{ name: 'Link on hover', foreground: '#C41E3A', background: '#FFFFFF' },
];
function checkContrast() {
console.log('🎨 Color Contrast Check\n');
let failures = 0;
let passes = 0;
criticalColorPairs.forEach(pair => {
const result = meetsWCAGStandard(
pair.foreground,
pair.background,
'AA',
pair.textSize || 'normal'
);
const status = result.passes ? '✅ PASS' : '❌ FAIL';
const ratio = result.ratio.toFixed(2);
console.log(`${status} ${pair.name}`);
console.log(` Ratio: ${ratio}:1 (Required: ${result.requiredRatio}:1)`);
console.log(` FG: ${pair.foreground} | BG: ${pair.background}\n`);
if (result.passes) {
passes++;
} else {
failures++;
}
});
console.log(`\n📊 Summary:`);
console.log(` Total: ${criticalColorPairs.length}`);
console.log(` ✅ Passes: ${passes}`);
console.log(` ❌ Failures: ${failures}`);
if (failures > 0) {
console.log('\n⚠️ Some color pairs do not meet WCAG AA standards!');
process.exit(1);
} else {
console.log('\n✅ All color pairs meet WCAG AA standards!');
process.exit(0);
}
}
checkContrast();