Skip to content

Conversation

@veerababu1729
Copy link

Fixes #4853

Description

This PR implements the High Contrast Mode feature requested in issue #4853, which is a follow-up to the dark mode project.

How This Fixes Issue #4853

The issue requested:

  1. Design: High contrast versions of Openverse light and dark mode designs
  2. Design: User interface control for the high contrast option
  3. Implementation: Color variables and root-element class context for high contrast
  4. Implementation: Controls for high-contrast variations

This implementation provides:

  • High contrast CSS variables for both light and dark modes with enhanced contrast ratios (WCAG 1.4.6 compliant - 7:1 ratio)
  • Automatic detection of OS-level prefers-contrast: more media query
  • A new "Contrast" dropdown in the footer with options: Normal, High, System
  • Feature flag high_contrast_ui_toggle for controlled rollout

Files Changed

File Changes
src/styles/tailwind.css +250 lines of high contrast CSS variables
src/composables/use-high-contrast.ts New composable (similar to use-dark-mode.ts)
src/components/VContrastSelect/VContrastSelect.vue New UI dropdown component
src/stores/ui.ts Added ContrastMode type, state, and actions
feat/feature-flags.json Added high_contrast_ui_toggle flag
shared/types/cookies.ts Added contrastMode to cookie state
i18n/data/en.json5 Added translation keys
src/components/VFooter/VFooter.vue Integrated VContrastSelect
src/app.vue Applied contrast CSS class to body
src/error.vue Applied contrast CSS class to body

Testing Instructions

  1. Enable the feature flag high_contrast_ui_toggle
  2. Navigate to any page and scroll to the footer
  3. Use the new "Contrast" dropdown to switch between Normal/High/System
  4. Verify enhanced contrast is applied (stronger borders, pure black/white text)
  5. Test with OS high contrast mode enabled (Settings → Accessibility → High Contrast)

Checklist

  • My pull request has a descriptive title
  • My pull request targets the main branch
  • My commit messages follow the conventional commits format
  • I have tested my changes locally
  • I have added/updated tests as needed

- Add high contrast CSS variables for light and dark modes
- Add prefers-contrast media query support for OS-level detection
- Create use-high-contrast composable for contrast mode management
- Add VContrastSelect component for user control
- Add high_contrast_ui_toggle feature flag
- Add contrast mode translations
- Integrate into VFooter, app.vue, and error.vue
@veerababu1729 veerababu1729 requested a review from a team as a code owner December 17, 2025 13:40
@openverse-bot openverse-bot added 🧱 stack: documentation Related to Sphinx documentation 🧱 stack: frontend Related to the Nuxt frontend 🟨 priority: medium Not blocking but should be addressed soon 🌟 goal: addition Addition of new feature 🕹 aspect: interface Concerns end-users' experience with the software ♿️ aspect: a11y Concerns related to the project's accessibility labels Dec 17, 2025
@openverse-bot openverse-bot moved this to 👀 Needs Review in Openverse PRs Dec 17, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

♿️ aspect: a11y Concerns related to the project's accessibility 🕹 aspect: interface Concerns end-users' experience with the software 🌟 goal: addition Addition of new feature 🟨 priority: medium Not blocking but should be addressed soon 🧱 stack: documentation Related to Sphinx documentation 🧱 stack: frontend Related to the Nuxt frontend

Projects

Status: 👀 Needs Review

Development

Successfully merging this pull request may close these issues.

High contrast mode

2 participants