SVG icons not visible in WHCM

localgovdrupal / localgov_base

The base theme for LocalGov Drupal websites.

9 stars 15 forks source link

SVG icons not visible in WHCM #112

Open danchamp opened 3 years ago

danchamp commented 3 years ago

SVG fill and stroke properties are not over-ridden by Window High Contrast Mode, and most localgov_base SVGs have near-black fill and stroke, so aren't visible.

Can target WHCM with a media query:

@media screen and (-ms-high-contrast: active)

waako commented 1 year ago

We need to ensure we are using the force-colors media query also, as -ms-high-contrast is being retired.

Adrian Roseli has an article about WHCM and system colours, with some specific examples around SVG. Sarah Higley's quick tips for WHCM are a good base also.

waako commented 11 months ago

Actually, it would be much more sensible to provide a default fill: currentColor, and only resort to media queries where necessary.

For example, the Adult Health & social care contact info section icons, screenshots where fill: currentColor added to .service-landing-page__contact-icon {:

Default with the fill set:
Windows Hight Contrast mode, icons now visible:

For reference, Contact Info section icons currently in Windows High Contrast mode:

waako commented 11 months ago

Need to check where in the theme this could be applied to have a safe but effective knock-on effect