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.
Related
I am trying to use CSS filters to create a "disabled" look for components I am working on. I am trying to make it so that everything is "washed out" a bit. I can create this effect by using opacity(0.75) for components which are on white background: then black becomes gray and all strong colors become a bit more white. But the issue is if the component is not on white background, then opacity does not work as I would like. So how could I use CSS filters to create this "wash out" look? Like to multiply with white color a bit all colors.
I tried contrast but it looks like everything goes to gray, not white (so black stays black much longer than with opacity, while other colors are already washed out).
Using a combination of Contrast and Brightness filters might give you what you need:
filter: contrast(30%) brightness(150%);
I'm currently coding a design mockup into HTMl and I'm trying to figure out the best way to achieve this look responsively. As you see, there's a purple line that stems from the hero CTA button in the bottom right corner. How would I go about changing the line color when it enters the new section; purple to white?
I thought about making two separate lines, but It's difficult to always have them line up right. I wonder if there's some sort of masking trick?
I added a red circle to show the interlacing I'm having issues with.
Screenshot
In short
I'm trying to get the text in my QLabel to paint as if it were over a black background, ignoring the real background colour.
In depth
I have a QLabel in a green coloured widget, the text is anti-aliased and white, the anti-aliasing softens the edges of the text by blending with the green background colour.
Hardware detects the exact green colour and uses it like a green screen to display some techno-wizardry without also drawing over my software overlay, it makes the background look black.
The anti-aliased text has a fuzzy green halo where it has slightly changed the green colour and hardware doesn't overwrite it.
I want the text to be draw as if it were over a black background
What I've tried
I have tried using a black opaque QGraphicsDropShadowEffect to be drawn under the text, thus giving the text a black background to draw on, this led to a bigger green halo around the text.
I have tried setting various QBrushes in the label's QPalette for the Qt::WindowText and Qt::Base ColorRoles.
I have re-implemented the paintEvent and I am trying to use style()->drawItemText(... ) to avoid re-implementing all the helpful alignment code.
I have tried intercepting the QStyleOpt parameter and setting its QPalette's background colour to black, however that didn't change anything, I still get fuzzy, greenish text.
I have tried various QBrush and QPen colours in the QPainter.
I'm really close using a QPainterPath in an overidden paintEvent function (in a class extending QLabel) where I paint a black path of the text behind the text, then I call QLabel::paintEvent and let it draw the text over the top. The issue here is that in some cases the path is clipped to smaller than the widgets rect() on the left hand side, scope for another question I think!
What I could try but haven't worked out yet
I could give the text a black outline as per this question however I'm using a QWidget not a QGraphicsView text item, and then the black outline would still probably blend with the green background.
Compromises I've already thought of and want to avoid
I could set the QLabel background to black, leaving large rectangles of black over the resulting overlay, unfortunately the labels are often much larger than the text being displayed.
I could stop the font being anti-aliased, this looks quite ugly and it stops all fonts being uniform across the product.
I implemented a button in TclTk with the text "Click". What I have to do is to write the text with different shades of green.
Is there anyway to make the text' color of a button to be green shaded?
The Tk button makes all of its text be a single colour (controlled by the -foreground option) as that's by far the most important use case for the large majority of users. Making the text vary in colour across its face is outside this use case, and so requires substantial trickery. The two ways I can think of are to use an image instead of a text label (when you can draw whatever you want on it, using the alpha channel to let the background show through) or to use a canvas widget to simulate a button.
Making an image (PNG, or GIF in 8.5 and before) is quite a lot easier.
In my web applicaton I have some div that contain labels, when I click on a label it's foreground become blue and background become white.how can I prevent that?
I would avoid disabling user select colours. I don't know about other people but I often select text on websites, not because I want to copy it but because I am struggling to read it and selecting text is by far the easiest way to change the colour of text against it's background. I even sometimes do it with black text on a white background.