a11y: Color Contrast - Primary Navigation

[rak-phillip]

Insufficient color contrast for standard text

Instances

Foreground color: #3D98D3
Background color: #FFFFFF
Contrast ratio: 3.16:1
Primary Navigation

• local
• vpat-testing-downstream
• Cluster Management
• Continuous Delivery
• Virtualization Management and so on

Foreground color: #FFFFFF
Background color: #297DB4
Contrast ratio: 4.48:1
Primary Navigation

• Home (In selected state)
• local, vpat-testing-downstream, Cluster Management, Continuous Delivery (On hover state) and so on

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.

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