Skip to content

feat(mint): add contrastRatio and failsWCAG fields to ColorCluster type - #110

Draft
nujovich wants to merge 5 commits into
mainfrom
hermes/build/mint-contrast-color-audit
Draft

feat(mint): add contrastRatio and failsWCAG fields to ColorCluster type#110
nujovich wants to merge 5 commits into
mainfrom
hermes/build/mint-contrast-color-audit

Conversation

@nujovich

@nujovich nujovich commented Aug 21, 2026

Copy link
Copy Markdown
Owner

Card: https://github.com/nujovich/mint-radar/issues/20

What: Adds WCAG contrast-ratio awareness to Mint's CSS audit. Milestone 1 extended the ColorCluster interface with contrastRatio and failsWCAG fields. Milestone 2 implements the WCAG 2.1 contrast ratio calculator in lib/css-contrast.mjs (parseSrgbColor, relativeLuminance, contrastRatio, evaluateContrast, annotateColorClusters) and wires it into the CLI audit path (bin/mint-ds.mjs) and the playground API (app/api/audit/route.ts) so every color cluster is automatically annotated with its contrast ratio and AA/AAA pass flags against the detected background. The calculator supports hex, rgb(), hsl(), oklch(), and oklab() literals with wide-gamut fallback to sRGB. Milestone 3 adds buildContrastPairs() that generates a dedicated contrastPairs report on AuditReport listing foreground/background pairs that fail WCAG AA or AAA, each with a contrast-color() migration suggestion.

Why: 83.9% of homepages fail contrast (WebAIM Million 2026). Mint's CSS audit detects color clusters but had no awareness of accessibility contrast requirements. Milestone 2 computes WCAG 2.1 ratios for detected color-background pairs automatically after every audit, annotating each ColorCluster with its contrast ratio and WCAG pass/fail flags. Milestone 3 surfaces failing pairs in a dedicated contrastPairs report with actionable contrast-color() migration suggestions.

Milestones

  • Milestone 1 -- Extend ColorCluster in lib/types.ts with contrastRatio (number) and failsWCAG ({ aa: boolean; aaa: boolean }) fields
  • Milestone 2 -- Implement WCAG 2.1 contrast ratio calculation for each color-background pair detected in the audited CSS
  • Milestone 3 -- Add failing contrast pairs report in AuditReport with contrast-color() migration suggestions
  • Milestone 4 -- Add tests with WebAIM Million baseline (83.9% fail rate)

How to test:

npx vitest run lib/__tests__/css-contrast.test.mjs
# Full suite:
npm test

@nujovich

Copy link
Copy Markdown
Owner Author

All milestones complete. Ready for review when you are.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant