Search code examples
cssbootstrap-4browseraccessibilitydarkmode

Accessibility issue with text color on dark theme with a light color texture (image) background

I'm on Bootstrap 4 and having a light colour .png image as background of navbar and body, while the footer area is in dark with off-white text colour. The default text colour is black, as the background image is light coloured.

The things get ugly when a user accesses the website on dark theme. The text colour on dark theme gets changed into light colour while the background image remains as light that leaves the text unreadable.

See below the text presentation in light and dark themes:

text on default (light) theme

text on default (light) theme

text on dark theme

text on dark theme

Can I keep my text colours unaffected irrespective of the theme of the users? Thanks in advance!

Solution

  • I got it fixed by simply using a transparent texture .png in place of a colour-filled texture .png image as background, with an adjustment in body {background:} colour.