Skip to content

Dark mode anchor contrast to low #15802

Closed
@alehaa

Description

@alehaa

Deployment Type

Self-hosted

NetBox Version

v4.0-beta1

Python Version

3.11

Steps to Reproduce

  1. Activate dark mode
  2. Navigate to Site list
  3. Inspect first columns site name with the browser debug toolbar
  4. Check text color and background color attributes
  5. Calculate contrast ratio.

Expected Behavior

According to WCAG 2.1 accessibility standard, a bare minimum contrast ratio of 3:1 is required, 4.5:1 would be better.

Observed Behavior

A ratio of 2.92:1 was calculated.

Responsible for the link color is the CSS variable --tblr-link-color-rgb. I found that the Tabler Demo uses slightly different colors. However, I can't find the cause why, as netbox.scss doesn't seem to change related Tabler variables.

Metadata

Metadata

Assignees

Labels

betaConcerns a bug/feature in a beta releaseseverity: lowDoes not significantly disrupt application functionality, or a workaround is availablestatus: acceptedThis issue has been accepted for implementationtopic: UI/UXUser interface or user experience related worktype: bugA confirmed report of unexpected behavior in the application

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions