feat(mint): add contrastRatio and failsWCAG fields to ColorCluster type - #110
Draft
nujovich wants to merge 5 commits into
Draft
feat(mint): add contrastRatio and failsWCAG fields to ColorCluster type#110nujovich wants to merge 5 commits into
nujovich wants to merge 5 commits into
Conversation
Owner
Author
|
All milestones complete. Ready for review when you are. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
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
How to test: