Skip to content

🐛 Bug: Low Contrast on Arrows in "Go Back" and "Up Next" Buttons in Dark mode and responsiveness issue #1292

Open
@Karan-Palan

Description

@Karan-Palan

Describe the bug

  1. The arrows in the "Go Back" and "Up Next" buttons have insufficient contrast in the Dark mode, making them difficult to read against the button background. This affects usability and does not meet WCAG guidelines for accessibility.
  2. Inconsistent vertical stacking and alignment of text and arrows in 'Go Back' and 'Up Next' buttons across all screen sizes.

Steps To Reproduce

  1. Navigate to any page with "Go Back" and "Up Next" buttons
  2. Observe the color contrast of the arrows in the navigation buttons.
  3. Compare the arrow color with the background to verify readability issues.
  4. Halve the tab, check the text alignment in arrow buttons

Expected Behavior

  1. The arrow color should contrast clearly with the button background to ensure readability. It should meet WCAG contrast standards and be visible under normal viewing conditions.
  2. Ensure consistent vertical stacking and alignment of text and arrows in 'Go Back' and 'Up Next' buttons across all screen sizes.

Screenshots

  1. The color of the arrows
    image

  2. Responsiveness of text when the tab is full vs when the tab is halved
    Full tab:
    image
    Half tab:
    image

Device Information [optional]

- OS:Ubuntu 24
- Browser:Firefox
- version:LTS

Are you working on this issue?

Yes

Do you think this work might require an [Architectural Decision Record (ADR)]? (significant or noteworthy)

No

Metadata

Metadata

Assignees

Labels

Status: AcceptedIt's clear what the subject of the issue is about, and what the resolution should be.Status: In ProgressThis issue is being worked on, and has someone assigned.🐛 BugIndicates that the issue is a bug or defect.

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions