In light mode, when I hover over a word ( without selecting ), the entire background color of the paragraph turns light blue 👇.
but when I turn on dark mode (using dark reader extension) it is hard to find the hovered paragraph because of poor color contrast.
to make the background color of hovered text blue, I manually add this css code to the "dev tools" of dark reader
.ryNqvb:hover{
background-color: #007FFF;
}
and here's the resault:
but the equivalent english paragraph doesn't changes... I can't find the appropriate class or id to change the inputted text(english one)...
I wanna both paragraph becom blue 👇 what is the solution?
Related
I'm currently working on a navbar (with a dark red background color) where the subsequent submenus have a light grey background color.
I'm using Scss and have managed to get the focus to work with the code bellow:
%focus {
#include focus-style(map-get($colors, "muted"), $focus-offset);
}
The color muted is connected to list of globally defined colors (in this case #636466) and focus-offset pulls the outline in by -2px.
The problem that arises is that there isn't enough contrast between the "muted" outline and the dark red background on the main navbar. I'm wondering how I'd go about adding a white outline when focus is on the main navbar and the "muted" color when it's on the grey submenus?
I have a semi-transparent sidebar with some background filters, on a mostly dark background
When scrolling further down, the text gets on the white section and gets really hard to read
Is it possible to dynamically change the text color to be dark when the contrast between the text and anything under it is too low? If not through only Tailwind/normal CSS, then how?
Its not a perfect fix, but I had a similar issue and I was able to use Tailwind's Blend Modes:
https://tailwindcss.com/docs/mix-blend-mode
<div class="bg-gray-400 mix-blend-difference" />
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 dark theme
Can I keep my text colours unaffected irrespective of the theme of the users? Thanks in advance!
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.
Regarding color contrast:
In this example, do I need to be careful of the blue background even though there is no copy directly on top of it? I.e. do I only need to be concerned with background color when there is copy on top of it, and I could hide the element with the background color from screen readers without causing an issue?
And in this one, do I need to be careful of the contrast between the light blue background and the button or am I only concerned with the contrast between the copy and the button? (I know the image is blurry. It's just an example.)
Both examples are fine as they are.
There are two things that are applicable here.
The first is contrast between text and the background for that text - you must have a contrast ratio of 4.5:1 for normal text and 3:1 for large text / bold text to be WCAG AA compliant. In the first example it is essentially black on white so it will pass easily.
The second is for controls. Buttons, inputs etc. should have a contrast ratio with their background of 3:1 minimum, no matter what state they are in (so if your above button turned white with black text on hover it probably wouldn't pass). In your second example your button is black on light blue so it certainly passes this also.
Also worth noting is that text within controls (your button) has the same 4.5:1 contrast requirement. Yet again white on black passes easily so you are fine.
Just check the contrast (almost certainly fine) on the red button with white text, reds and oranges can be deceiving in their contrast ratios (but as it is quite a dark red I am 99% sure you are fine just by looking at it).
For clarity your blue background in the first one could be 1% darker than the white box and it would be fine as it is not an interactive control that it surrounds.
How can I set a "shading" for QCombobox icons?
I have a QComboxBox with text and icon entries. The icons are nation flags here. The combobox background color is white by default (on Windows). The problem is with the Japan flag, because just a red filled circle is displayed. In other words, I cannot distinguish the white flag color from the combobox background. My workaround is to overrule the combobox base color and set the RGB value to 3*250. Furthermore I don't think it's a good idea to draw a dark border in the original PNG image of the flag.
P.S.: What do you use as workaround for white on white? (I want to know if my workaround is the best solution...)