Skip to content

Resolve #2971: Improve table header text contrast for accessibility #2972

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.

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
wants to merge 1 commit into
base: master
Choose a base branch
from

Conversation

sahar-saadatmandi-corelab
Copy link
Contributor

Fixes #2971

Proposed Changes

  • Added the text-dark class to <th> elements to improve the contrast and accessibility of table headers.
  • Replaced the text-muted class with text-dark on <a> elements to enhance link visibility and readability.

@tabuna
Copy link
Member

tabuna commented Mar 26, 2025

Thank you, this is really interesting! However, it seems to introduce a new issue. When sorting was active, the column was highlighted with a darker font, but now everything is dark, making it difficult to tell which column is being sorted. How about using opacity to improve visibility? What do you think?

It would be great to simplify our SCSS theme and rely more on Bootstrap, where we could just increase the minimum contrast variable—but that’s beyond the scope of this PR.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Development

Successfully merging this pull request may close these issues.

Accessibility Issue: Insufficient Contrast in Table Header Text
2 participants