[BITV] 9.1.4.1/7.1 - The selected/active navigation item "Logging" in the left-side navigation has a contrast difference of less than 3:1 with the color of adjacent navigation items. (1)

[AndyScherzinger]

Additional emphasis such as bolding or underlining is also missing.

• Fix

Details

https://report.bitvtest.de/default-en/d63601ac-cb34-4645-8256-66bec78964a0.html#checkpoint-45ae33ca9f-v7-n1

[JuliaKirschenheuter]

Dear @michaelnissenbaum,

I've discussed possible implementations with our designers. After several reflections we came to conclusion that the best way would be to add a border with color --color-primary-element like:

It that would be be ok, should we take 1px or 2px as border width?

Another alternative would be to change background color, but designers saying they don't use such a dark color anywhere other than the primary button and on the borders.

Would a solution with border work? Thank you!

[michaelnissenbaum]

Hi @JuliaKirschenheuter . Using a border to highlight an active menu element is a good idea. I would lean towards a 2px border. However, it's important to ensure that the border has a minimum contrast ratio of 3:1 with the background. In the screenshot, we have contrasts below 3:1.

[JuliaKirschenheuter]

Thank you @michaelnissenbaum ,

I've spoken with designers again and there is final version:

Make text bolder and border around selected/active navigation item.

Could you please give us your opinion? Thanks a lot!

[michaelnissenbaum]

@JuliaKirschenheuter The solution looks good from my perspective.