I'm trying to improve a Lighthouse accessibility score and know how to address everything it's throwing at me except for one thing.
I have a colour contrast issue whereby I have used a Unicode ★ character for some ratings. It's coloured yellow (#FFD500), but contrast against white background fails AA. I cannot change the colour, but I have provided a text-based alternative (using off-screen positioning) for screen readers. So completely blind people using assistive tech are covered, but I really cannot think how to resolve the low contrast issue for sighted users. I thought to use aria-hidden="true" to stop Lighthouse from assessing it, didn't work.
I can't change colour, I can't change the size, I can't mask it in the report. I guess there's nothing I can do?
Note that I can change the unicode star for an image/svg. This will resolve the issue but for various boring reasons I won't go into, this approach caused other issues (and was what made me opt for unicode characters).
Stopping Lighthouse from assessing something doesn't make it compliant, and aria-hidden="true" hides content from screen readers, but color contrast is an issue for low-vision users, not blind users.
Technically, the color contrast ratio you've got (1.42:1) is too low for any size.
If you absolutely cannot adjust this color, then my recommendation would be to include a text-based alternative nearby, eg:
★ ★ ★ ★
4/5
#j-afarian has a nice idea with the text-based rating ("4/5") in addition to the stars, but if the stars are still yellow, it still fails WCAG 1.4.3. However, 1.4.3 only deals with text color contrast. Since you are using unicode, which is essentially text, it's fair game for 1.4.3.
But if you swap out the unicode for an svg or image, as you mentioned, there is no color contrast failure because it's no longer text. It will still be a problem for low vision users but is not a WCAG failure. That's kind of gaming the system and defeats the purpose of WCAG, but technically it's not a WCAG failure.
I would love to know the "various boring reasons" that caused the problem with svg/img. We can resolve those too.
If you can't change the (foreground) color of the unicode stars, can you change the background color?
<span style="color:yellow">★ ★
<!-- 4.55 color ratio with gray background -->
<span style="background-color:#717171">★ ★</span>
<!-- 8.00 color ratio with blue background -->
<span style="background-color:#0000FF">★ ★</span>
<!-- 4.51 color ratio with red background -->
<span style="background-color:#E50000">★ ★</span>
</span>
Related
I've been building a website under Ubuntu 17.10 and use Firefox and Chromium for testing. The two browsers show quite different colors (not only for images but all colors) and I always thought that it is Chromium which for some reason wrongly over-saturates them, so up until now I always chose colors that looked right in Firefox.
But I'm starting to get more and more complaints about the website's background being too purple - which it shouldn't be in my opinion as only the blue component of it's color (#eeeeff) is "elevated", but it has reached a point that more people are seeing it as purple than blue, what makes me confused.
This is the aforementioned color displayed in Firefox (left) and Chromium (right).
And this is how I see a website:
The difference is quite large (notice how even the favicon is different) and I'm asking you to tell me which one is the browser I should trust when choosing the colours of my websites and whether I could do something to avoid it being displayed so differently in different browsers.
(There are some users that see the overly saturated colors in Firefox too. So now which is the right one, really?)
Another option is to open chrome://flags/ and select the option sRGB on the Force color profile item.
By using this setting instead of disabling the Use hardware acceleration when available, you don't lose some nice features like the 3D view on Google Maps.
Solution found here: https://www.reddit.com/r/Fedora/comments/74h5yh/blue_shows_as_purple_in_chrome/
Using GPick as a Color Picker and calling a Website with Color Hexcode like
http://www.color-hex.com/color-palette/54430
I see, that Firefox renders the RGB Colors exactly, meaning GPick identifies the same Hex Code from CSS.
Whereas Chromium renders some kind of differnt color.
You can call
chrome://flags/#force-color-profile
and set the Color Profile in Chromium to sRGB, so the rendered Color from Chromium is identified the same as the HexCode with GPick.
If you disable 'Use hardware acceleration when available' in Chromium Settings and relaunch, Chromium displays colors correctly. When turned on, Chromium colors are off. I consider this as a workaround until Chromium color management issue with hardware acceleration is resolved.
With the other two colours being equal, your colour is right in the middle of "blue territory".
If you convert it to HSL and look on the hue line, you can see it is right in the middle of the "blue" frequency range.
Consequently, any hint of green or red is incorrect.
I want to inquire more about the problem discussed on this issue SVG Font Rendering Problems while rendering Text on a Path in Chrome and Safari
Following the example shown on http://jsfiddle.net/v6esx/4/
<path id='menu_path' d="M 80,40 Q 200,85 245,205" stroke="none" fill="black"/>
<text fill="white">
<textPath xlink:href="#menu_path">News Info Presse Musik</textPath>
</text>
On Firefox 26 (OSX) the text looks misaligned, more so if a zoom is applied. The issue is even more grave on Chrome 32 on Windows 7.
You can see some screenshots from the original question on:
http://imageshack.us/a/img18/3195/svgrendering.png
enter link description here http://imageshack.us/a/img18/3195/svgrendering.png
http://imageshack.us/a/img705/7334/svgrenderingwithpath.png
enter link description here http://imageshack.us/a/img705/7334/svgrenderingwithpath.png
As a D3.js developer, this impacts the look of some visualisations that use this technique. For instance you can notice this odd effect in http://bost.ocks.org/mike/uberdata/ specially on the "Downtown" and "Marina" labels
Screenshot 1 on windows 7 + chrome 32
Screenshot 2 on windows 7 + chrome 32
I want to bump this just to ask, does anybody knows a workaround, or are we just at the mercy of how each individual browser tries its best to render a text along a path?
To a certain degree you are dependent on the browser, but you can give the browser suggestions using the text-rendering property.
From the specs:
11.7.4 The ‘text-rendering’ property
The creator of SVG content might want to provide a hint to the implementation about what tradeoffs to make as it renders text. The ‘text-rendering’ property provides these hints.
auto
Indicates that the user agent shall make appropriate tradeoffs to balance speed, legibility and geometric precision, but with legibility given more importance than speed and geometric precision.
optimizeSpeed
Indicates that the user agent shall emphasize rendering speed over legibility and geometric precision. This option will sometimes cause the user agent to turn off text anti-aliasing.
optimizeLegibility
Indicates that the user agent shall emphasize legibility over rendering speed and geometric precision. The user agent will often choose whether to apply anti-aliasing techniques, built-in font hinting or both to produce the most legible text.
geometricPrecision
Indicates that the user agent shall emphasize geometric precision over legibility and rendering speed. This option will usually cause the user agent to suspend the use of hinting so that glyph outlines are drawn with comparable geometric precision to the rendering of path data.
For curved or transformed text, I think geometricPrecision results in the best outcomes. See live example.
I like the "zither strings" that Visual Studio 2013 displays, that help visually align the braces in try / using / while / etc. blocks of code. I also enjoy them aesthetically, as they appear in different visual representations of points along the electromagnetic spectrum:
But, are those colors "more than a pretty face"? In the screen shot above, I see, from left to right, gray, teal, midnight blue, grey, gray, grey, gray, purple, and grey again. Is this just to help differentiate one line from another? If so, why are several succeeding lines the same hue (as far as I can tell)?
Or, do the colors signify something, such as teal for classes, midnight blue for methods, purple for while, and gr[a,e]y for everything else?
These are part of the Productivity Power Tools for VS2013 (see here). Specifically they are part of the Structure Visualizer feature.
There does seem to be some meaning in the colours. I haven't been able to find a definitive list of colours, but I've noticed the following:
Grey for general blocks, like namespaces, try / catch blocks and using
blocks. The grey for namespaces seems to be a bit darker than other block types.
Teal for classes
Blue for methods
Green for conditional blocks (if / then, switch)
Purple for looping blocks (for, foreach)
You can turn the lines on and off in the Productivity Power Tools section of the Options dialog.
I've placed an image on top of a div. I'm trying to blend the image into the div (The div is a solid color). In Google Chrome, it looks great! The colors blend perfectly. In IE 7, however, the colors show a hard line even though they should be the same color! After some examination (a print screen put into paint.net to check the actual RGB values), IE 7 is actually lightning up my image.
The blend has to look seamless. Google Chrome was fine with this thus far. Any ideas why IE 7 wont display the color right?
The two browsers are using different rendering engines. There are minor differences between them in how they render graphics, particularly jpegs.
The differences are minor but unavoidable.
Most of the time it goes unnoticed; it only makes an appearance in cases like yours when you try to position it against an element with a solid background colour that is supposed to be the same.
You may be able to resolve the issue by using a different image format. Try saving the image as a PNG. PNGs tend to be rendered more accurately between the browsers than jpegs, so that might be enough to solve your problem.
If that doesn't solve your problem, you could try using PNGs alpha transparency feature to produce an image with a fade to transparent at the edge, and then overlap the background colour behind it. This will definitely give you a smooth transition, but is a bit more technical, so harder to achieve. It will also give you problems with older versions of IE (IE6 for sure, I think you'll be okay with IE7), as they had some major bugs with PNG transparency. (If this is an issue for you, there are work-arounds for this; google IEPNGFix for more)
I'm customizing a color picker's default showing colors which will be used as background colors. I'm wondering if there is a collection of the colors that are particularly useful in practical web design. Like nobody(hopefully) would use #f00 as a 100%-width page's background color while #fff is a universally usable one, there's DO'S and DONT's when it comes to picking background colors. So what are the candidates in your opinion?
I know this could be subjective, but generally I believe there IS a solid set of them.
[edit] : I kinda have an idea to customize the color picker in a logic way, first pick a buch of hues, them for each hue, start from the possible lightest of saturation to the possible heaviest. A bit demenstration:
gray [ #eee, #ccc, #ddd, .... ]
green [ ... .... ... .... ]
blue ....
yellow
brown [
As for a realistic answer, #fff won the race, right? Sometimes you'll see shades of gray, #eee, #eaeaea, and an occ. #000.
If you want to mix things up, I'd recommend checking out http://kuler.adobe.com/ to get an idea for what's popular, but perhaps slightly different. It's fun to experiment with the palettes up there.
I don't think there is a universal standard for picking up colors for your site. It entirely depends on the nature of the site and the kind of users that visit the site.
For eg: it would be nice to give a greenish color for a site that's theme is nature.
Here is a nice site in which you can choose color combinations and get a preview of that in a single click.
Color Scheme Designer
Never choose a color that will distract the user from seeing the actual contents of the site.
If you allow users to select the color then it would be nice to show them a preview of the site with the colors they have chosen.
Contrast is what really matters when choosing background/foreground colours, so they're likely to be very light, or very dark
so you'll need light and dark variants. i'd probably opt for:
light red, orange, yellow, green, blue, indigo, violet
and dark as above
maybe the same for some earthy type tones, browns, greys, etc.
If you like colours like I do, you might visit ColourLovers. They've got some great ways of choosing colours, and colour schemes. The website trends section might be interesting to you.
I personally like schemes where the lighter colour is not pure white. Pure white can be sometimes harsh when reading lots of text.
Creativity is BREAKING the rules.
It is possible that a seemingly bad color combination, if used in right proportions, can actually look good, so there is no such thing as a bad color combination, it also matters on the shades, difference in colors.
Believe it or not, i own a site (www.salvin.in) where user can change the background color to many different choices and it still manages to look good *ahem in most of the cases.
There are a few things that i suggest you to look into:
Color wheel
Color harmonies
Triads and Tetras
Mono chromes (with contrasting shades)
Complimentaries
I find that #000 messes up my eyes. After looking at mainly #FFF pages/applications, then switch to #000, then when I go back to anything else, it take a while for my eyes to adjust. I vote "no" to #000.