---
id: 13-1
title: 13-1 Language Toggle Visibility Enhancement
status: Done
date: 2026-09-27
parent: 13
---

## Description

As a user on authentication pages I want to clearly see and interact with the language toggle So that I can easily switch between Arabic and English. - resources/views/components/language-toggle.blade.php. Full implementation history: docs/stories/story-13.1-language-toggle-visibility.md

## Acceptance Criteria

- [ ] AC1: Update Light Variant Text Color: Given the language toggle has a `light` variant for light backgrounds; When viewed on auth pages (white/cream background); Then the inactive language uses `text-primary` (Dark Forest Green #2D3624) instead of `text-body/70`
- [ ] AC2: Update Light Variant Hover State: Given the user hovers over an inactive language option; When the variant is `light`; Then the hover state uses:
- [ ] AC3: Update Light Variant Separator Color: Given the separator `|` between languages; When the variant is `light`; Then it uses `text-primary/50` instead of `text-body/30` for better visibility
- [ ] AC4: Dark Variant Unchanged: Given the language toggle has a `dark` variant for dark backgrounds (navigation bar); When viewed on the public navigation; Then the existing styling remains unchanged:
- [ ] AC5: Active State Unchanged: Given the currently active language; When displayed in either variant; Then it maintains the existing active styling:
- [ ] AC6: Contrast Compliance: Given accessibility requirements; When the light variant is used on Warm Cream background (#F4F1EA); Then the text contrast meets WCAG AA: