From ff7a9f6e4929c128803597f6ff274ffcd13ca6b7 Mon Sep 17 00:00:00 2001 From: Corwin Brust Date: Tue, 4 Aug 2026 09:45:56 -0500 Subject: [PATCH] Improve colour contrast to meet WCAG 2.1 AA Bring the SVG board and the text-mode faces up to WCAG 2.1 AA contrast. Two oppositions drove the changes: no single ring colour meets 3:1 on both a near-white card face and the dark-green felt, and no single fixed suit/marker colour meets 4.5:1 on both a light and a dark Emacs theme. The rings therefore become haloed (bright core plus dark edge, readable on either ground) and the theme-sensitive faces gain light/dark variants. Ratios are computed from the sRGB relative-luminance formula. * card-games-svg.el (card-games-svg-card): Draw the cursor highlight as a haloed ring (dark edge, bright core) so it clears 3:1 on both a card face and the felt; the old single gold ring was 1.63:1 on a card. Draw the hint as a haloed dashed ring for the same reason, keeping the dash pattern so it stays distinct by shape, not colour alone. (card-games-svg-club-color): #1a8a3c -> #166534; four-colour clubs were 4.35:1 on the card face, now 7.00:1. (card-games-svg-hint-color): #27ae60 -> #7cf59a; 2.36:1 -> 4.97:1 on felt. (card-games-svg-gap-color): #95a5a6 -> #cbd5e1; 2.65:1 -> 4.57:1 on felt (empty slots carry meaning in Gaps and Montana). * card-games-core.el (card-games-red-suit): Add a dark-theme variant (card-games-hint): Give light/dark variants (#207a3f on light, green3 bold on dark); green3 was 2.16:1 on white, now 5.36:1. (card-games-gap): Give light/dark variants (#595959 light, #a6a6a6 dark); gray50 failed both themes, now about 7:1 light and 6:1 dark. The card border and faint panel divider are left unchanged -- the card face already contrasts the felt at 6.67:1, so card edges read regardless -- and the SVG board's lack of an accessible name is covered by the text/UNICODE rendering, the intended accessible alternative. Assisted-by: Claude:claude-opus-4-8 --- card-games-core.el | 12 +++++++++--- card-games-svg.el | 26 ++++++++++++++++++++------ 2 files changed, 29 insertions(+), 9 deletions(-) diff --git a/card-games-core.el b/card-games-core.el index 6d77b39..d7ebb15 100644 --- a/card-games-core.el +++ b/card-games-core.el @@ -254,16 +254,22 @@ With no seed the order is unpredictable (system `random')." ;;;; Shared faces -(defface card-games-red-suit '((t :foreground "red3")) +(defface card-games-red-suit + '((((background dark)) :foreground "#ff7961") + (t :foreground "red3")) "Face for red-suited cards." :group 'card-games) (defface card-games-cursor '((t :inverse-video t)) "Face for the cell or card under the cursor." :group 'card-games) -(defface card-games-gap '((t :foreground "gray50")) +(defface card-games-gap + '((((background dark)) :foreground "#a6a6a6") + (t :foreground "#595959")) "Face for an empty slot." :group 'card-games) -(defface card-games-hint '((t :foreground "green3" :weight bold)) +(defface card-games-hint + '((((background dark)) :foreground "green3" :weight bold) + (t :foreground "#207a3f" :weight bold)) "Face for a valid move target (a fillable gap)." :group 'card-games) (defun card-games-color (face attribute fallback) diff --git a/card-games-svg.el b/card-games-svg.el index eac63bd..eed5abe 100644 --- a/card-games-svg.el +++ b/card-games-svg.el @@ -138,7 +138,7 @@ hearts red." (defvar card-games-svg-red-color "#c0392b" "Colour for red suits.") (defvar card-games-svg-black-color "#2c3e50" "Colour for black suits.") -(defvar card-games-svg-club-color "#1a8a3c" "Clubs colour in a four-colour deck.") +(defvar card-games-svg-club-color "#166534" "Clubs colour in a four-colour deck.") (defvar card-games-svg-diamond-color "#3b3fb0" "Diamonds colour in a four-colour deck.") (defvar card-games-svg-joker-color "#8e44ad" "Colour for the Joker.") (defvar card-games-svg-face-color "#fdfdfb" "Card face fill.") @@ -147,7 +147,7 @@ hearts red." (defvar card-games-svg-back-color "#27496d" "Card back fill.") (defvar card-games-svg-back-trim "#9fb3cf" "Card back inner trim/dots.") (defvar card-games-svg-highlight-color "#f1c40f" "Cursor/selection highlight.") -(defvar card-games-svg-gap-color "#95a5a6" "Empty-slot outline colour.") +(defvar card-games-svg-gap-color "#cbd5e1" "Empty-slot outline colour.") (defun card-games-svg--highlight () "Resolve the cursor/selection ring colour. @@ -170,7 +170,7 @@ each redraw. Customize `card-games-svg-highlight-color' to change it." ((card-games-red-suit-p suit) "#fbeceb") (t "#eef2f6"))) -(defvar card-games-svg-hint-color "#27ae60" "Colour ringing a valid move target.") +(defvar card-games-svg-hint-color "#7cf59a" "Colour ringing a valid move target.") (defun card-games-svg--hint () "Resolve the valid-move hint colour (theme-aware)." @@ -406,15 +406,29 @@ HIGHLIGHT draws a glowing cursor ring around the card." (down (card-games-svg--draw-back svg x y w h r)) (t (card-games-svg--draw-face svg x y w h r rank suit))) (when hint + ;; Haloed dashed ring: a dark backing reads on the light card faces and + ;; the bright ring reads on the (green) felt -- one colour cannot do + ;; both. Dashed (vs the solid cursor ring) keeps it distinct by shape, + ;; not colour alone. + (svg-rectangle svg (- x 3) (- y 3) (+ w 6) (+ h 6) :rx (+ r 2) + :fill "none" :stroke "#101010" :stroke-opacity 0.55 + :stroke-width 4 :stroke-dasharray "3,3") (svg-rectangle svg (- x 2) (- y 2) (+ w 4) (+ h 4) :rx (+ r 1) :fill "none" :stroke (card-games-svg--hint) :stroke-width 2 :stroke-dasharray "3,3")) (when highlight (let ((hl (card-games-svg--highlight))) - (svg-rectangle svg (- x 4) (- y 4) (+ w 8) (+ h 8) :rx (+ r 3) - :fill "none" :stroke hl :stroke-opacity 0.45 :stroke-width 6) + ;; Haloed ring so the cursor reads on both the near-white card faces + ;; (dark edges) and the dark felt (bright ring): no single colour + ;; meets 3:1 on both, so pair a bright ring with dark edges. + (svg-rectangle svg (- x 5) (- y 5) (+ w 10) (+ h 10) :rx (+ r 4) + :fill "none" :stroke "#101010" :stroke-opacity 0.6 + :stroke-width 6) (svg-rectangle svg (- x 3) (- y 3) (+ w 6) (+ h 6) :rx (+ r 2) - :fill "none" :stroke hl :stroke-width 2.5))))) + :fill "none" :stroke hl :stroke-width 3.5) + (svg-rectangle svg (- x 1) (- y 1) (+ w 2) (+ h 2) :rx (+ r 1) + :fill "none" :stroke "#101010" :stroke-opacity 0.55 + :stroke-width 1.5))))) (defun card-games-svg--draw-spec (svg x y spec highlight &optional hint) "Draw SPEC onto SVG at X, Y, with HIGHLIGHT and optional HINT ring.