corwin/card-game.el
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

Improve colour contrast to meet WCAG 2.1 AA

Browse source 
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
This commit is contained in:
Corwin Brust 2026-08-04 09:45:56 -05:00
parent 99cf31930b
commit ff7a9f6e49
2 changed files with 29 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

12
card-games-core.el
View file

@ -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)

26
card-games-svg.el
View file

@ -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.