Skip to content

fix: improve contrast for accessibility #30

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
pganesh-apphelix wants to merge 1 commit into
base: main
Choose a base branch
from
Open

fix: improve contrast for accessibility #30

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
33 changes: 17 additions & 16 deletions games/static/css/flashcards.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@
}

.flashcards-title {
color: var(--primary-500, #00262B);
color: #111827;
Copy link

Copilot AI Mar 20, 2026

Choose a reason for hiding this comment

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

These rules replace themeable var(--primary-500, ...) color tokens with hard-coded hex values. Since the rest of the file still relies on CSS variables with fallbacks (e.g., var(--white, ...), var(--light-200, ...)), this makes it harder for the host platform/theme to override colors. Consider keeping var(...) usage (or defining a local custom property) and only changing the fallback to the higher-contrast value.

Suggested change
color: #111827;
color: var(--gray-900, #111827);

Copilot uses AI. Check for mistakes.
font-size: 24px;
font-weight: 700;
line-height: 32px;
Expand All @@ -51,7 +51,7 @@
}

.flashcards-start-title {
color: var(--primary-500, #00262B);
color: #111827;
text-align: center;
font-family: Inter;
font-size: 20px;
Expand All @@ -66,8 +66,8 @@
justify-content: center;
gap: 8px;
align-items: center;
background: var(--primary-500, #00262B);
color: var(--white, #FFFFFF);
background: #1D4ED8;
color: #fff;
font-size: 18px;
font-weight: 500;
border: none;
Expand All @@ -76,7 +76,7 @@
}

.flashcards-start-button:hover:not(:disabled) {
background: var(--primary-600, #001A1D);
background: #2563EB;
}

.flashcards-start-button:disabled {
Expand Down Expand Up @@ -128,8 +128,8 @@
display: flex;
flex-direction: column;
border-radius: 8px;
border: 2px solid var(--Light-300, #F2F0EF);
background: #fff;
border: 2px solid #374151;
background: #F9FAFB;
transition: opacity 0.3s ease-in-out;
overflow: hidden;
cursor: pointer;
Expand Down Expand Up @@ -158,7 +158,7 @@
}

.flashcard-text {
color: var(--primary-500, #00262B);
color: #111827;
font-size: 18px;
font-weight: 400;
line-height: 28px;
Expand Down Expand Up @@ -203,14 +203,14 @@
align-items: center;
border: none;
border-radius: 50%;
background: var(--light-300, #F2F0EF);
background: #F9FAFB;
cursor: pointer;
transition: all 0.2s ease-in-out;
}

.flashcard-left-button:hover:not(:disabled),
.flashcard-right-button:hover:not(:disabled) {
background: var(--light-400, #E1DDDB);
background: #1D4ED8;
transform: scale(1.03);
}
Comment on lines 211 to 215
Copy link

Copilot AI Mar 20, 2026

Choose a reason for hiding this comment

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

The hover state for the flashcard navigation buttons sets a dark blue background, but the arrow SVGs in games/static/html/flashcards.html use a hard-coded fill="#00262B", so the icon color does not change on hover. This results in insufficient contrast (and a regression from the prior light hover background). Consider styling the SVG/path fill on hover (and ideally :focus-visible) or switching the SVG to fill="currentColor" and setting the button color accordingly.

Copilot uses AI. Check for mistakes.

Expand Down Expand Up @@ -240,7 +240,7 @@
}

.flashcard-navigation-text {
color: var(--primary-500, #00262B);
color: #111827;
text-align: center;
font-size: 20px;
font-weight: 500;
Expand Down Expand Up @@ -269,15 +269,15 @@
}

.flashcard-help-icon svg {
color: var(--primary-500, #00262B);
color: #1D4ED8;
}
Comment on lines 271 to 273
Copy link

Copilot AI Mar 20, 2026

Choose a reason for hiding this comment

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

.flashcard-help-icon svg { color: ... } will not affect the help icon as currently authored: the <path> in games/static/html/flashcards.html has an explicit fill attribute. To actually change the icon color, target fill via CSS (e.g., svg path) or update the SVG markup to use fill="currentColor" and control it via color.

Copilot uses AI. Check for mistakes.

.help-popover {
position: absolute;
bottom: calc(100% + 12px);
right: 0;
border-radius: 4px;
background: var(--Core-Elm, #00262B);
background: #1D4ED8;
color: #fff;
padding: 4px 8px;
min-width: 200px;
Expand All @@ -295,7 +295,7 @@
}

.help-popover-content {
color: var(--extras-white, #FFF);
color: #fff;
text-align: center;
font-size: 14px;
font-style: normal;
Expand All @@ -311,5 +311,6 @@
height: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 8px solid var(--primary-500, #00262B);
}
border-top: 8px solid #1D4ED8;
}

52 changes: 26 additions & 26 deletions games/static/css/matching.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@
}

.matching-start-title {
color: var(--primary-500, #00262B);
color: #111827;
Copy link

Copilot AI Mar 20, 2026

Choose a reason for hiding this comment

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

These text colors were changed from themeable var(--primary-500, ...) tokens to hard-coded hex values. Since this stylesheet still uses CSS variables with fallbacks elsewhere, this reduces theming/override flexibility. Consider retaining var(...) (or introducing a local custom property) and updating only the fallback to the desired higher-contrast color.

Suggested change
color: #111827;
color: var(--primary-500, #111827);

Copilot uses AI. Check for mistakes.
text-align: center;
font-family: Inter;
font-size: 20px;
Expand Down Expand Up @@ -68,7 +68,7 @@
margin: 0; /* normalize margins to rely on flex gap */
}
.matching-end-title {
color: var(--primary-500, #00262B);
color: #111827;
text-align: center;
font-size: 32px;
font-style: normal;
Expand All @@ -88,7 +88,7 @@
}

.matching-new-end-title {
color: var(--primary-500, #00262B);
color: #111827;
text-align: center;
font-variant-numeric: lining-nums proportional-nums;
font-size: 88px;
Expand All @@ -99,7 +99,7 @@
}

.matching-new-end-subtitle {
color: var(--primary-500, #00262B);
color: #111827;
text-align: center;
font-size: 28px;
font-style: normal;
Expand All @@ -108,7 +108,7 @@
}

.matching-new-prev-best {
color: var(--primary-500, #00262B);
color: #111827;
font-size: 18px;
font-style: normal;
font-weight: 600;
Expand All @@ -123,7 +123,7 @@
}

.matching-prev-best-subtitle, .matching-non-timer-subtitle {
color: var(--primary-500, #00262B);
color: #111827;
text-align: center;
font-size: 22px;
font-style: normal;
Expand All @@ -132,7 +132,7 @@
line-height: 28px;
}
.matching-prev-best-subtitle span {
color: var(--primary-500, #00262B);
color: #111827;
font-size: 22px;
font-style: normal;
font-weight: 700;
Expand All @@ -146,7 +146,7 @@
gap: 10px;
border-radius: 8px;
background: rgba(251, 245, 208);
color: var(--extras-black, #000);
color: #111827;
text-align: center;
font-size: 22px;
font-style: normal;
Expand All @@ -159,8 +159,8 @@
justify-content: center;
gap: 8px;
align-items: center;
background: var(--primary-500, #00262B);
color: var(--white, #FFFFFF);
background: #1D4ED8;
color: #fff;
font-size: 18px;
font-weight: 500;
border: none;
Expand All @@ -169,11 +169,11 @@
}

.matching-end-button:hover:not(:disabled) {
background: var(--primary-600, #001A1D);
background: #2563EB;
}

.matching-start-button:hover:not(:disabled) {
background: var(--primary-600, #001A1D);
background: #2563EB;
}

.matching-start-button:disabled {
Expand Down Expand Up @@ -211,7 +211,7 @@
}

.matching-title {
color: var(--primary-500, #00262B);
color: #111827;
font-size: 22px;
font-weight: 700;
margin: 0;
Expand All @@ -226,7 +226,7 @@
}

.matching-timer {
color: var(--primary-500, #00262B);
color: #111827;
font-size: 28px;
font-weight: 500;
letter-spacing: -1.96px;
Expand Down Expand Up @@ -267,7 +267,7 @@
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: var(--Primary-500, #00262B);
color: #111827;
text-align: center;
font-variant-numeric: lining-nums tabular-nums;
font-family: Inter;
Expand All @@ -287,7 +287,7 @@
display: flex;
align-items: center;
justify-content: center;
color: var(--primary-500, #00262B);
color: #111827;
cursor: pointer;
transition: color 0.2s ease;
}
Expand Down Expand Up @@ -324,34 +324,34 @@
padding: 16px;
overflow: auto;
border-radius: 8px;
border: 2px solid var(--light-300, #F2F0EF);
background: var(--white, #FFFFFF);
border: 2px solid #374151;
background: #F9FAFB;
cursor: pointer;
transition: all 0.2s ease;
text-align: center;
}
Comment on lines 324 to 332
Copy link

Copilot AI Mar 20, 2026

Choose a reason for hiding this comment

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

.matching-box is styled as an interactive control (cursor + hover states), but in games/static/html/matching.html it is a clickable <div> (not keyboard focusable by default). For accessibility, consider switching it to a <button> or adding tabindex="0" + appropriate ARIA/keyboard handlers, and add a visible :focus-visible style to match the hover/selected states.

Copilot uses AI. Check for mistakes.

.matching-box:hover {
border-color: var(--light-500, #E1DDDB);
background: var(--light-100, #FAFAFA);
border-color: #1D4ED8;
background: #E0E7EF;
}

.matching-box.selected {
border-color: var(--primary-500, #00262B);
background: var(--light-200, #F8F8F8);
border-color: #1D4ED8;
background: #DBEAFE;
}

.matching-box.matched {
border-color: var(--success-500, #0D7D4D);
background: var(--success-100, #F2FAF7);
border-color: #059669;
background: #D1FAE5;
opacity: 0.6;
pointer-events: none;
}

.matching-box.incorrect {
animation: shake 0.4s ease;
border-color: var(--danger-700, #AB0D02);
background: var(--danger-100, #FCF1F4);
border-color: #DC2626;
background: #FEE2E2;
}

@keyframes shake {
Expand Down
Loading