Web graphics

Graphics in web browsers tend to be rather user-unfriendly once you try to use accessibility features, including useful graphics, such as diagrams. json.org, for instance:


Figure 1: GIF, defaults


Figure 2: GIF, with system colours


Figure 3: GIF, with colour overriding

But it can be more or less solved by using SVG with currentColor, as mentioned in the Web design checklist note:


Figure 4: SVG, defaults


Figure 5: SVG, with system colours


Figure 6: SVG, with colour overriding

Here is the used SVG itself:

Sorry, your browser does not support SVG.

Figure 7: The used SVG

It was obtained by quickly redrawing the diagram, and replacing #000000 with currentColor (there's also a mistake in it, but it's not important for the illustration, and I'm lazy to fix it).

It's still broken with system colours; probably another Firefox bug. But other than that, it works well with both dark-on-light and light-on-dark themes, and can be colourised. Though monochrome leads to best results with available technologies: opacity can be varied there, so one can move freely between arbitrary foreground and background, while additional colours add not just hue and saturation, but also lightness.

Another usable approach is to draw light borders around dark elements, and dark borders around light elements: it may not look good, but helps to distinguish what's on a picture. And just filling the background is an easy one, though has its drawbacks as well.