a11y: Color Contrast - Namespace Filter

[rak-phillip]

Insufficient color contrast for standard text

Instances

Foreground color: #3D98D3
Background color: #FFFFFF
Contrast ratio: 3.16:1
Header Area

• All Namespaces (selected option in dropdown)

Foreground color: #FFFFFF
Background color: #3D98D3
Contrast ratio: 3.16:1
Header Area

• All Namespaces, Only User Namespaces, Only System Namespaces, Only Namespaced Resources, Only Cluster Resources(on hover and keyboard focus)

Foreground color: #FFFFFF
Background color: #297DB4
Contrast ratio: 4.48:1
Header Area

• Starred, Cluster, Workloads, Apps, Service Discovery and so on navigation links (in selected state)

Header Area
Foreground Text Color: #B6B6C2
Background Text Color: #FFFFFF
Ratio: 2.00:1

• No matching options (available after user type data in input field)

Foreground: #3D98D3
Background: #F2F2F2
Contrast Ratio: 2.82:1
Header Area

• Close interactive image (on hover - which gets available after selecting option from Project: Default, Project: System and Not in a Project sections)

Actual result

• The standard text with background/foreground color combinations having an insufficient contrast ratio making it difficult for people with low vision and color blindness to read standard text elements.

• The informative image present in the dropdown has an insufficient color contrast ratio with their background
  making it difficult for low vision users to discern meaningful graphics that have insufficient contrast.

Expected result

• The contrast ratio between foreground text and background for the standard text should be sufficient.

Recommendation

On all pages, ensure that each foreground/background color combination presents a contrast ratio of at least 4.5:1 for standard text.

Screenshots

Light

Dark