Skip to content

Fix: Darken validation error colour to meet AA contrast (fixes #618) - #619

Merged
swashbuck merged 1 commit into
masterfrom
issue/618
Sep 28, 2026
Merged

swashbuck merged 1 commit into
masterfrom
issue/618

Conversation

@swashbuck

Copy link
Copy Markdown
Contributor

Fixes #618

Darkens @validation-error from #ff0000 to #dd0000, taking its contrast against white from 4.00:1 to 5.15:1 and clearing the 4.5:1 WCAG AA needs for normal-size text.

  • The slider uses this colour as a background with @validation-error-inverted text when showing an incorrect answer, so the learner's selected number was below AA.
  • #dd0000 was chosen over the lightest passing value, #ee0000 (4.53:1), to leave headroom. A margin of 0.03 is fragile behind text, where thin glyphs and sub-pixel rendering perform worse than the raw ratio suggests.
  • Brings the error colour into line with @validation-success (#065f28, 7.85:1), which was already darkened for contrast.
  • @validation-error-inverted is unchanged; white on #dd0000 passes.
  • The box-shadow use in matching.less is unaffected, as a non-text indicator only needs 3:1.

Posted via collaboration with Claude Code

@kirsty-hames kirsty-hames left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great spot thanks @swashbuck 👍 New contrast confirmed as 5:15

@swashbuck
swashbuck merged commit 4ff36f0 into master Sep 28, 2026
1 check passed
@swashbuck
swashbuck deleted the issue/618 branch September 28, 2026 16:31
@github-actions

Copy link
Copy Markdown

🎉 This PR is included in version 9.41.2 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

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

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Fix validation error colour failing AA contrast in slider feedback

5 participants