High contrast mode – image background

  • pixelshrink

    (@pixelshrink)


    1 month ago

    Hi, when an image is displayed with High contrast mode, the image background is set like this:

    @media screen {
      img {
        background: #808080 !important;
        background-color: #808080 !important;
    }
    }

    If the image is transparent, this can result in the contrast being less than if the image background was set to the standard colour of black. I was wondering what the rationale for this is, as I assume there must be a benefit?

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author Joe Dolson

    (@joedolson)

    1 month ago

    Any background is potentially a problem; if this isn’t set, the image background will end up as whatever the background color behind it is, which isn’t necessarily good, either. There is really no way of handling that in a predictable way.

    You can however add custom styles to handle this on a per-image basis to ensure your site works as needed. The high contrast mode adds the class .contrast to the body element, and you can add custom styles to address special situations.

    Thread Starter pixelshrink

    (@pixelshrink)

    1 month ago

    OK, thanks very much for that. So it’s better to have a different background colour so people can pick out that it’s an image?

    Plugin Author Joe Dolson

    (@joedolson)

    3 weeks, 6 days ago

    If I didn’t set a background color at all, then it would end up black, and there’d be about a 50/50 chance that the image would no longer be visible at all. Unfortunately, I don’t have an easy way to know which direction to go.

Viewing 3 replies - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.