Repository navigation
fix(a11y): WCAG AA hint/helper text contrast sweep - #15
Merged
Merged
Conversation
Per audit T8-a11y-hints (audits/T8-a11y-hints.md), the systemic use of
text-xs text-slate-500 and text-slate-400 across hint, helper, label
and small-state text produced contrast ratios from 2.87:1 to 4.51:1 —
either failing or borderline against WCAG SC 1.4.3 (Contrast Minimum)
on white and bg-slate-50 surfaces.
Changes:
- FormFieldHint (form/FormField.tsx) bumped to text-sm text-slate-600
→ fixes every FormField hint= consumer (calculators, GemIdentifier).
- All text-xs text-slate-500 in calculator hints upgraded to
text-sm text-slate-600 (14px, 7.59:1 on white, 7.24:1 on slate-50).
- All text-{xs,sm} text-slate-500 → text-{xs,sm} text-slate-600 across
src/ — clears every visible-content slate-500 instance.
- Unprefixed text-slate-400 (visible body text and UI affordances)
bumped to text-slate-500 (4.51:1, well above 3:1 SC 1.4.11). The
perl pattern preserves dark:, disabled:, placeholder:, hover:,
group-hover:, peer-disabled:, focus: variants — dark mode and
disabled-state semantics unchanged.
- Quiz/study surface (Quiz.tsx, Exam.tsx, QuizProgress.tsx,
QuestionNav.tsx, RationalePanel.tsx, StudySettingsPanel.tsx) and
GemIdentifier panels handled with the same color bump.
- Idle copy-button states (ResultCard.tsx, NumberResult.tsx) and the
exam flag-button idle (Exam.tsx) bumped to slate-500 with a
hover:text-slate-700 lift — keeps interactive contrast headroom.
Verification:
- npm run build → 912 pages built, no errors.
- npm test --run → 210/210 tests pass.
- 86 files changed, all class-only edits, no behaviour change.
|
🚀 Preview deployed to: https://f343970d.gemmology-dev.pages.dev |
Bissbert
added a commit
that referenced
this pull request
May 11, 2026
Per audit T8-a11y-hints (audits/T8-a11y-hints.md), the systemic use of
text-xs text-slate-500 and text-slate-400 across hint, helper, label
and small-state text produced contrast ratios from 2.87:1 to 4.51:1 —
either failing or borderline against WCAG SC 1.4.3 (Contrast Minimum)
on white and bg-slate-50 surfaces.
Changes:
- FormFieldHint (form/FormField.tsx) bumped to text-sm text-slate-600
→ fixes every FormField hint= consumer (calculators, GemIdentifier).
- All text-xs text-slate-500 in calculator hints upgraded to
text-sm text-slate-600 (14px, 7.59:1 on white, 7.24:1 on slate-50).
- All text-{xs,sm} text-slate-500 → text-{xs,sm} text-slate-600 across
src/ — clears every visible-content slate-500 instance.
- Unprefixed text-slate-400 (visible body text and UI affordances)
bumped to text-slate-500 (4.51:1, well above 3:1 SC 1.4.11). The
perl pattern preserves dark:, disabled:, placeholder:, hover:,
group-hover:, peer-disabled:, focus: variants — dark mode and
disabled-state semantics unchanged.
- Quiz/study surface (Quiz.tsx, Exam.tsx, QuizProgress.tsx,
QuestionNav.tsx, RationalePanel.tsx, StudySettingsPanel.tsx) and
GemIdentifier panels handled with the same color bump.
- Idle copy-button states (ResultCard.tsx, NumberResult.tsx) and the
exam flag-button idle (Exam.tsx) bumped to slate-500 with a
hover:text-slate-700 lift — keeps interactive contrast headroom.
Verification:
- npm run build → 912 pages built, no errors.
- npm test --run → 210/210 tests pass.
- 86 files changed, all class-only edits, no behaviour change.
This branch was successfully deployed
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
1 participant
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.
Summary
audits/T8-a11y-hints.mddocuments 27 specific findings; this PR implements the fix tier across 86 source files.What changed
FormFieldHint)text-xs text-slate-500(12px @ 4.30:1 onbg-slate-50, fails AA)text-sm text-slate-600(14px @ 7.24:1)hint=consumer (calculators +GemIdentifier).text-xs text-slate-500text-sm text-slate-600text-{xs,sm} text-slate-500(marginal 4.51:1)text-{xs,sm} text-slate-600(7.59:1)text-slate-400(2.87:1 — hard fail)text-slate-400text-slate-500(4.51:1)dark:,disabled:,placeholder:,hover:,group-hover:,peer-disabled:,focus:variants — dark mode and disabled-state semantics unchanged.text-slate-400 hover:text-slate-600text-slate-500 hover:text-slate-700Test plan
npm run build→ 912 pages built, no errorsnpm test -- --run→ 210/210 tests pass/tools/calculator,/tools/identification,/quiz,/study/settings,/learn/equipment/refractometerAudit reference
audits/T8-a11y-hints.md(included in this PR) carries the full per-finding table with computed contrast ratios, file:line citations, and the recommended token swap.