Accessibility trick - displaying colors when html/css colors are disabled

[barro...@gmail.com]

For any that use Windows high contrast inverse system color theme and have your browser use the system theme you lose html/css color display capability for backgrounds, borders, etc unless your play with custom browser style sheets (last I saw FF seemed to had dropped that feature).  ( Yes, there's browser plugin's and add on's but I got tired of them after they would get disabled cause of browser updates or the browser decides they have become insecure-- it became too much effort to keep them functinal after awhile)

For those familiar with svg's, they will display colors regardless of browser onerrides and can be used as inline elements with div's an paragraphs (<p> elements) as horizontal bars and bullet points.  With div's and relative and absolute positioning, svg's can be used as background color for a div layered under a div of text (or in the same div layered under <p> elements).  Svg's also can displat normal raster images (jpg, png) and a way around background image disabling that accessibilty themes can have along with negating background colors.  Simple svg's are small in code size and can be used as their own tiddler (see the images the TW core uses) or their code can be easily inserted into tiddlers along with html or wikitext in a tiddler's text field.  I often code simple svg's inside tiddler while adding normal content to a tiddler.

A good example of the issue and why I figured out about using svg's is when web pages show the color ranges or palettes they will often use background colors for div's to show the color instead of using a graphic and my browser shows no colors.  So I create svg's with <rect> elements with color fills to duplicate the background colored div's.

[TonyM]

Thanks for sharing this with the community.

Tony