search

openlibhums / hourglass

Hourglass press theme for OLH
GNU Affero General Public License v3.0
1 stars 1 forks source link

Text becomes unreadable as when it scrolls over images at higher zoom levels #242

Open StephDriver opened 7 months ago

StephDriver commented 7 months ago

Report Issue

Describe the inaccessible feature paralax means text ends up on top of an image when scrolling, such that contrast ratios are not maintained, including back text ending up on a black part of the image.

Which users are impacted? (delete as applicable)

  1. Everyone

Assistive software or customised computer setup this appears to be a higher zoom issue, where at lower zoom the two do not make contact.

To Reproduce Steps to reproduce:

  1. Go to 'homepage'
  2. have a zoom of 175% with a window width of 660px (this may occur at other settings too)
  3. Scroll down to the "our mission" section
  4. See error

Screenshots

image

Preferred Solution

Style the text background colour the same as the page background. When directly against the page background this will not make a difference, but then when it scrolls up over an image, it will carry that background colour with it.

Front-end Issues (only)

If the issue is front-end specific please add the following details:

Desktop (please complete the following information): Details from Chrome on MacOS, but also seen in Safari, depends on the zoom/window width such that the mission text is below the image, where at lower zoom / wider windows it appears to the right of the image.

StephDriver commented 1 week ago

There has been general discussion of this issue in regard to moving towards thinking about colours in pairs (background and foreground) so that text is always styled with both a background and foreground colour. And then when the background is the same as the page background nobody is any the wiser, but if the unexpected happens and it is not, the text remains readable.

There was further work between @joemull and myself on whether we could take this up a level and keep the styling consistent with the site branding by putting shapes behind text (same colour as background) rather than just rectangular background to the text as would happen by default. . Again if the text is against the page background there would be no visible change, but it would mean regardless of how it reflows or sizes it would look styled and be readable, where the first solution only makes it readable.

joemull commented 1 week ago

@StephDriver thanks for remembering this and noting it here. I think we have it in design meeting running notes but good to have it here.