Skip to content

Commit 9b0b764

Browse files
authored
fix(themes): correct highcontrast text color to #ffffff for WCAG comp… (JhaSourav07#1207)
## Description Fixes JhaSourav07#1200 The `highcontrast` theme in `lib/svg/themes.ts` had its text color set to `#888888` (medium gray) on a background of `#0a0a0a` (near-black). This produced a contrast ratio of only ~3.5:1 — below the WCAG AA minimum of 4.5:1 and completely contradicting the purpose of a theme named `highcontrast`. Changed text color to `#ffffff` (white), achieving a contrast ratio of ~21:1, which passes WCAG AAA — the highest accessibility standard. ## Pillar - [ ] 🎨 Pillar 1 — New Theme Design - [ ] 📐 Pillar 2 — Geometric SVG Improvement - [ ] 🕐 Pillar 3 — Timezone Logic Optimization - [x] 🛠️ Other (Bug fix, refactoring, docs) ## Visual Preview | Before ❌ (~3.5:1 contrast ratio) | After ✅ (~21:1 contrast ratio) | |---|---| | <img width="1198" height="841" alt="image" src="https://github.com/user-attachments/assets/613f6bbd-3a50-46ed-93bc-2f94cabd34dd" /> | <img width="1201" height="841" alt="image" src="https://github.com/user-attachments/assets/39ac4164-85fa-4d62-973a-e2e68f522730" /> | ## Changes Made - `lib/svg/themes.ts` — changed `highcontrast` text from `888888` to `ffffff` - `THEMES.md` — updated theme gallery table to reflect new text color - `README.md` — updated theme presets table to reflect new text color ## Checklist before requesting a review: - [x] I have read the `CONTRIBUTING.md` file. - [x] I have tested these changes locally (`localhost:3000/api/streak?user=jhasourav07&theme=highcontrast`). - [x] I have run `npm run format` and `npm run lint` locally and resolved all errors. - [x] My commits follow the Conventional Commits format (`fix(themes): ...`). - [x] I have updated `README.md` as I modified an existing theme. - [x] I have starred the repo. - [x] I have made sure that I have only one commit to merge in this PR. - [x] The SVG output matches the CommitPulse "premium quality" aesthetic standard.
2 parents c4eaf25 + 5f1715c commit 9b0b764

3 files changed

Lines changed: 3 additions & 3 deletions

File tree

README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -192,7 +192,7 @@ URL Parameter > Theme Default > System Fallback
192192
| `light` | Clean & minimal | `ffffff` | `0969da` | `24292f` |
193193
| `gruvbox` | retro warm dark | `282828` | `fe8019` | `ebdbb2` |
194194
| `random` | Surprise theme on reload | _varies_ | _varies_ | _varies_ |
195-
| `highcontrast` | Accessibility high contrast | `0a0a0a` | `ff4500` | `888888` |
195+
| `highcontrast` | Accessibility high contrast | `0a0a0a` | `ff4500` | `ffffff` |
196196

197197
> **`auto` uses CSS `@media (prefers-color-scheme)`** inside the SVG so the badge switches between the `light` and `dark` palettes based on the viewer's OS setting — no JavaScript required. This is ideal for GitHub profile READMEs where visitors may use either mode.
198198

THEMES.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ https://commitpulse.vercel.app/api/badge?username=YOUR_USERNAME&theme=<slug>
2525
| nord | `#2e3440` | `#d8dee9` | `#88c0d0` |
2626
| synthwave | `#0d0221` | `#f8f8f2` | `#ff2d78` |
2727
| gruvbox | `#282828` | `#ebdbb2` | `#fe8019` |
28-
| highcontrast | `#0a0a0a` | `#888888` | `#ff4500` |
28+
| highcontrast | `#0a0a0a` | `#ffffff` | `#ff4500` |
2929

3030
---
3131

lib/svg/themes.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ export const themes: Record<string, BadgeTheme> = {
2424
synthwave: makeTheme('0d0221', 'f8f8f2', 'ff2d78'),
2525
gruvbox: makeTheme('282828', 'ebdbb2', 'fe8019'),
2626
aurora_cyberpunk: makeTheme('090B13', 'EAF2FF', '9D5CFF'),
27-
highcontrast: makeTheme('0a0a0a', '888888', 'ff4500'),
27+
highcontrast: makeTheme('0a0a0a', 'ffffff', 'ff4500'),
2828
catppuccin_latte: makeTheme('eff1f5', '4c4f69', '1e66f5'),
2929
solarized_light: makeTheme('fdf6e3', '586e75', '268bd2'),
3030
gruvbox_light: makeTheme('fbf1c7', '3c3836', 'd65d0e'),

0 commit comments

Comments
 (0)