Contrast Issues #9787

New Issue

adam · 2025-12-29T21:22:39+01:00

adam commented

2025-12-29 21:22:39 +01:00

Originally created by @andrewgormley on GitHub (Jun 3, 2024).

NetBox version

v4.0.3

Feature type

Change to existing functionality

Proposed functionality

Fix low contrast issues across the app that were found using Google Lighthouse and WAVE

Format:
(Location) Issue [Theme, Occurrences]

(Navigation) Low contrast for side navigation sub-menu sub-headers [dark, global]
(Dashboard) Module headers low contrast text [both, single]
(Dashboard) Body copy low contrast on NetBox news [dark, single]
(Footer) date and version text low contrast [dark, global]
(Header) secondary text low contrast [dark, global]
(Tables) Low contrast on pagination controls below tables [dark, multiple]
(Tables) low contrast on some table headers [dark, multiple]
(Tables) low contrast on table empty state text [dark, multiple]
(List page) low contrast on buttons [both, multiple]
(Toast) low contrast for warning toast [light, multiple]
(Racks) low contrast labels [both, multiple]
(Racks) low contrast download svg button [dark, multiple]
(Object) low contrast on object title sub items eg. created 2020-10-10 [dark, multiple]
(Breadcrumbs) low contrast on dark mode [dark, multiple]
(Buttons) focus state on buttons is missing focus ring causing contrast and CVD issue [both, global]
(Misc)Low contrast on dark tabular menu text [dark, multiple]
(Misc)Low contrast on placeholder module placeholder text [dark, multiple]
(Misc)Low contrast on form error text [both, multiple]
(Misc)Low contrast on cancel button [dark, multiple]
(Misc)Low contrast on create combo button [dark, multiple]
(Misc)Low contrast in-line hyperlink [light, single]

Use case

An accessibility audit revealed many contrast issues with the current application. The above changes will address those low contrast issues, fixing these issues will ensure that users with Colour Vision Deficiency (CVD) will come across far less issues.

Database changes

No response

External dependencies

No response

### Tasks

Originally created by @andrewgormley on GitHub (Jun 3, 2024). ### NetBox version v4.0.3 ### Feature type Change to existing functionality ### Proposed functionality Fix low contrast issues across the app that were found using Google Lighthouse and WAVE Format: (Location) Issue [Theme, Occurrences] - [ ] (Navigation) Low contrast for side navigation sub-menu sub-headers [dark, global] - [ ] (Dashboard) Module headers low contrast text [both, single] - [ ] (Dashboard) Body copy low contrast on NetBox news [dark, single] - [ ] (Footer) date and version text low contrast [dark, global] - [ ] (Header) secondary text low contrast [dark, global] - [ ] (Tables) Low contrast on pagination controls below tables [dark, multiple] - [ ] (Tables) low contrast on some table headers [dark, multiple] - [ ] (Tables) low contrast on table empty state text [dark, multiple] - [ ] (List page) low contrast on buttons [both, multiple] - [ ] (Toast) low contrast for warning toast [light, multiple] - [ ] (Racks) low contrast labels [both, multiple] - [ ] (Racks) low contrast download svg button [dark, multiple] - [ ] (Object) low contrast on object title sub items eg. created 2020-10-10 [dark, multiple] - [ ] (Breadcrumbs) low contrast on dark mode [dark, multiple] - [ ] (Buttons) focus state on buttons is missing focus ring causing contrast and CVD issue [both, global] - [ ] (Misc)Low contrast on dark tabular menu text [dark, multiple] - [ ] (Misc)Low contrast on placeholder module placeholder text [dark, multiple] - [ ] (Misc)Low contrast on form error text [both, multiple] - [ ] (Misc)Low contrast on cancel button [dark, multiple] - [ ] (Misc)Low contrast on create combo button [dark, multiple] - [ ] (Misc)Low contrast in-line hyperlink [light, single] ### Use case An accessibility audit revealed many contrast issues with the current application. The above changes will address those low contrast issues, fixing these issues will ensure that users with Colour Vision Deficiency (CVD) will come across far less issues. ### Database changes _No response_ ### External dependencies _No response_ ```[tasklist] ### Tasks ```

adam added the status: accepted type: feature topic: UI/UX labels 2025-12-29 21:22:39 +01:00

adam closed this issue

2025-12-29 21:22:39 +01:00

adam commented

2025-12-29 21:22:40 +01:00

@bobbwest commented on GitHub (Jun 11, 2024):

Also highlighted/selected text in dark mode, although this is slightly better in v4.0.5.

@bobbwest commented on GitHub (Jun 11, 2024): Also highlighted/selected text in dark mode, although this is slightly better in v4.0.5.

adam commented

2025-12-29 21:22:40 +01:00

@jeremystretch commented on GitHub (Jun 18, 2024):

Closing this as the tasks above have been broken out into #16647, #16648, #16649, #16650, and #16651.

@jeremystretch commented on GitHub (Jun 18, 2024): Closing this as the tasks above have been broken out into #16647, #16648, #16649, #16650, and #16651.

Sign in to join this conversation.

Branches Tags

main

update-changelog-comments-docs

feature-removal-issue-type

20911-dropdown

20239-plugin-menu-classes-mutable-state

21097-graphql-id-lookups

feature

fix_module_substitution

20923-dcim-templates

20044-elevation-stuck-lightmode

feature-ip-prefix-link

v4.5-beta1-release

20068-import-moduletype-attrs

20766-fix-german-translation-code-literals

20378-del-script

7604-filter-modifiers-v3

circuit-swap

12318-case-insensitive-uniqueness

20637-improve-device-q-filter

20660-script-load

19724-graphql

20614-update-ruff

14884-script

02496-max-page

19720-macaddress-interface-generic-relation

19408-circuit-terminations-export-templates

20203-openapi-check

fix-19669-api-image-download

7604-filter-modifiers

19275-fixes-interface-bulk-edit

fix-17794-get_field_value_return_list

11507-show-aggregate-and-rir-on-api

9583-add_column_specific_search_field_to_tables

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: starred/netbox#9787