I've been working on a few websites that have beautiful color palettes but do not provide high enough contrast between text and background for accessibility. I love to make sites usable for everyone, but as a designer, I feel bummed that so many awesome color combinations are totally off the table. Would providing an obvious way to toggle into a high contrast mode be an acceptable alternative?
Lots of users would benefit from a high-contrast color scheme, including many who don't regard themselves as disabled. You can certainly let yourself off-the-hook, legally speaking by providing a WCAG compliant color scheme alongside whatever awesome swatch you prefer. I would advise starting with the WCAG-compliant one first, and make it the default, so you always have that as a base to fall back on.
You could even use the forced-colors media query, although this is not yet standard. There are a few other related media queries offered by Microsoft, as mentioned here
https://blogs.windows.com/msedgedev/2020/09/17/styling-for-windows-high-contrast-with-new-standards-for-forced-colors/
But before you start working on a new color scheme, it will be more worth checking how your 'regular' site looks like with some of the system-level contrast mode settings enabled. These are available on most platforms, and there are a number of browser extensions which also manipulate color/contrast (each works slightly differently).
Please note that it's perfectly possible to make the UI unusable using system level "high contrast" features with 'extreme' settings. Mac OS's contrast slider can almost bleach out the entire screen if pushed to the edge! I can't help wondering who this is supposed to benefit.
WCAG does not require that content should be perceivable within the broad limits of every single high contrast gadget on the market, so in general, if these kinds of problem only occur when the gadget is enabled, they are not (strictly) WCAG violations.
However, given that the success criteria "Focus Visible", "Text Contrast" and "Non-Text Contrast" are already met, any contrast "failures" which only occur when High Contrast gadgets are enabled are usually best understood as possible violations of SC 1.3.1 Info and Relationships, because they do not "ensure that information and relationships that are implied by visual formatting are preserved when the presentation format changes". You might also have some violations of SC 1.4.1 Use of Color if any distinctions are made by color alone. (e.g. if all headings are the same font and size as body text, but in red).
Therefore the important thing is to try your content with some of the default schemes in (say) Windows High Contrast Mode. Check that everything is still distinguishable, especially including focus indicators and UI states (e.g. text labels, disabled controls, checkboxes and radiobuttons, thumbs on sliders and scrollbars, data views etc.). It will probably not be very beautiful, but that's not the point. Again, it's not a WCAG violation if you don't offer perfection in Windows High Contrast Mode, although you should probably mention any howlers in any Accessibility Conformance Report or VPAT.
As a small tip, I will mention that Windows High Contrast Mode will try to color-code UI borders to reflect certain states. (e.g. a button with a disabled attribute might be drawn with a green border). Therefore: Make sure your UI controls have borders of at least 1px. If you don't want a visible border in the regular scheme, use a transparent color. Similarly, make sure any non-decorative SVG content uses some kind of stroke to be distinguishable in Windows HCM.
That way, if someone enables HCM, the boundaries of content, and also the state of the controls will still be perceivable.
Related
I find it strange that the same color code (ex:#FEE9CC) results in different representations depending on the user's monitor. My computer is connected with two monitors, and I found this behavior. I guess there are some colors whose representations fluctuate. Then, what are the colors that always represent the same way? In other words,
how do I make sure that "brown" on my computer is actually brown on others'?
Here's the color that I used. It is shown as light brown on one monitor, and light pink on the other.
In short, you can't. Even if your users wouldn't fiddle with any of the hardware color settings on purpose, a vast majority of them is not going to have the correct color profiles for their monitor set up (and almost nobody besides designers is going to have a calibrated monitor anyway).
If you were doing print work (photo retouching, pre-press, …), this would be an important issue, and the tools you would be working with would provide extensive functionality for color management, previewing how colors look on another medium (proofing), and so on. Web browsers and file formats, on the other hand, simply were never designed for accurate rendition of colors.
Sort answer but You Can't.
You and your computer can use the right color codes for a correctly calibrated monitor but monitor don't 'send' feedback as to their roles and how they're bring presented.
This is not possible.
Monitors and graphics cards can be configured in many different ways. Some like "warmer" color tones, some like them "colder".
If I wanted I could set up my monitor to show only grays. If you choose red, it will be gray for me, if you choose green, it will be gray too.
I am using http://achecker.ca to validate my HTML/CSS and verify that I am WCAG 2.0 compliant. I'm quite happy with it for the most part but it is giving me an inappropriate error that is frustrating my efforts to get a clean validation. I was wondering if anyone had a suggestion for getting around that?
It's complaining about the contrast of some text I am displaying, saying that the background color and the text color are too similar. That's actually true - background-color is #f2eecf and text color is #f2f2f2 - but it isn't really relevant because I have a photograph appearing above the background color so there is actually good contrast between the photograph and the text color. Also, I've added a 1 pixel black text-shadow around the text to make it even clearer. Unfortunately, the tool doesn't seem to take the shadow or photograph into account. (It makes sense that it wouldn't know how to handle the photograph since it is not a uniform colour but I'm disappointed that the text shadow doesn't help.)
Is there something I can do to my HTML or CSS to help satisfy the tool? The website doesn't seem to have any way to contact the people operating the website or I would have asked there first.
Should I just ignore the "errors"? Or should I use a different tool? I'm just getting started with WCAG compliance checking - I realize now that I'm rather late getting into this - so maybe there are better tools to use. If so, I would appreciate any recommendation, especially for free tools.
I certainly want my pages to be WCAG compliant but I can't spare money for tools right now.
I have a photograph appearing above the background color
So your text has a transparent background color or it has a background-image? A code snippet would help.
I'm guessing you're getting this error: https://achecker.ca/checker/suggestion.php?id=301
If you look up "achecker.ca" on https://www.whois.net/, you get:
Administrative contact:
Name: Iris Neher
Email: ineher#ocad.ca
If you're using a decent accessibility checker, then you should not try to fake out the checker. I have not used achecker so I can't comment on how accurate it is. But if you post your code example, I might be able to tell if it's really a problem.
You can also try
http://www.brandwood.com/a11y/ - which specifically checks text on images.
https://chrome.google.com/webstore/detail/color-contrast-analyzer/dagdlcijhfbmgkjokkjicnnfimlebcll?hl=en - chrome plugin
Short Answer:
Best practices is that if you are going to composite text over an image, the image is in a container with that container having a background similar to the image.
Longer Answer:
There are a variety of reasons that an image will not load. A site doing things such as placing live text over an image needs to ensure that text remains readable regardless of the load state of the image.
Also keep in mind that a user must be able to zoom up the text in size without breaking the site, meaning keeping the text over the image or BG so it is still readable, etc.
Outlines & Shadows
As for outlines and shadows: while they may assist contrast, they should be used to enhance and not for the sole basis of contrast. In part because the rendering of these properties is far from consistent among different browsers.
Resources
WAVE Automated Checker
APCA Contrast — the new contrast method for WCAG 3
If you are familiar with color spaces (ICC profiles), you probably know, that there are "absolute units" of representing the color (XYZ, L*a*b*) and device-specific units (RGB, CMYK ...) which could mean any real color (unless it is specified using the ICC profile).
But on the web, we usually use RGB units (e.g. in CSS or when drawing onto a Canvas) without specifying any color profile. Is it somewhere defined, that the whole web uses the sRGB or some other color space?
Your question is a bit broad, and it's not possible to give a one sentence answer to it.
So let's go to the specs :
All RGB colors are specified in the sRGB color space (see [SRGB]). User agents may vary in the fidelity with which they represent these colors, but using sRGB provides a unambiguous and objectively measurable definition of what the color should be
So this tells that sRGB for CSS <color> is expected, with some variants.
What variants ?
Well e.g in Safari, the browser has access to the currently used monitor's color-profile, and it will use it to adapt the authored values to match the sRGB output, through this user-set color-profile.
Firefox has some flags to do the same.
Note that there is a feature request to add a color-profile CSS rule, in order to allow authors to define the color-profile to be used on the page. Note that this feature-request [has been dropped] in current specs, but may still appear in future versions.
This was for CSS <color>, but this is not the only place where colors are defined in a web page.
Most browser nowadays do read the color-profiles embedded in images, when displayed in an <img> element.
But since you tagged your question with canvas, one should note that this color-profile info is currently being dropped by the browser when it paints it on the canvas.
Once again, there is a pending feature request to add more options to the 2DContext. One of these options being the color-profile.
Currently, only Chrome is in the process of implementing it, so it's hard to tell what it will be exactly, if any.
Also, since we're at it, it should be noted that svg does have a <color-profile> element, and a #color-profile CSS rule, which also have been proposed for CSS specs, but got dropped in the final edition.
And there might probably also be a note about color-management in videos, but for this, I have no idea who does support it (IIRC it's quite rare, and only allowed in mp4 container).
The Microsoft and HP sets out the in the 1990's to define the colour space for the web as sRGB. Since then it seems to have stuck with but minor modification and clarification.
More can be found at W3C CSS3 color
Trying to make my app WCAG complaint. There are a few places where text is displayed on the screen but not meant to be read by users. One is when an offer is not eligible, we show the offer but lower the contrast to denote the offer can not be made. The other is we show case numbers at the bottom of the app. These are captured by users in screen shots when they report bugs, and used by support to track the issue, but not meant to be read by users.
Is there any way to denote that these fields are not meant to be read by the user and therefore do not need to meet WCAG contrast ratios?
Let me rephrase your question...
How to markup a purely decorative text in order to make it compliant with WCAG?
WCAG does not have the notion of purely decorative text, as it might be subject to abuse.
At less, you have to consider using aria-hidden in order for the text not to be read by screen readers.
The difficult part of that is : how might a visitor understand that a text is not intended to be read? Is the assumption that a non readable text, with poor contrast, is something you have to ignore is really helping readability? No.
That being said, if you just want to fool automated tools, you have many possibilities like playing with transparency, replacing HTML portion with img canvas after load, etc. But this won't help accessibility, nor readability.
You're trying to convey one information ("do not read that") using only color difference, which is clearly targeted by the G182 technique : Ensuring that additional visual cues are available when text color differences are used to convey information.
It is a better solution to find a matching color to preserve the minimum contrast ratio for a given color (easy way : try black or white).
I'm testing a new site, and I have a div with
background-color: #bbf6bb;
That seems innocuous enough to me. And yet, on my MacBook Pro, the color looks very different in Firefox 3.6 vs. Safari 4. In Safari, it's the color I'd expect from the hex value: a pale green. In Firefox, there's a definite bluish tint, making the color turquoise.
I'm aware of color inconsistencies that result from different treatment of images across browsers, but in pure CSS? Really? I'm guessing that Firefox trying to correct for my display in hopes of delivering better consistency with print, but I'd much rather have my site look the same hue to my users regardless of their choice of browser. Any ideas? Can someone confirm that Firefox is the culprit here?
[Update: This seems to have been a fluke. Specifically, it's a narrow issue with Firefox—see my answer below. I'm puzzled, but relieved.]
but I'd much rather have my site look the same hue to my users regardless of their choice of browser.
That's just the thing - without colour correction, it won't look the same to different users, because not every monitor has the exact same colour response.
I've isolated the issue! It's definitely a Firefox 3.6 bug (running on Mac OS 10.6). Seems to have something to do with having a large number of tabs open. If I create a new tab and go to the page, I get the slightly off colors (blue-green instead of just green). If I create a new window and go to the same page, the colors are accurate. And yes, this still occurs if I refresh both instances.
[Edit: Screenshot got misplaced, but I stand by this answer.]
color managent color profiles not only changes the images (that can save those) but also the rgb colors.
This has nothing to do with the browser, more with the user's monitor's colour correction. Every monitor has slight differences in how they show colours; additionally, the background lighting around the monitor plays a role, as well (warm daylight vs. usually colder inside lights etc. etc).
Sadly, there's nothing really you can do. You could embed a colour profile into your graphics, which is how design professionals do it when sending data to print, but that will provide halfway decent results only for the minuscule number of (graphic designers') monitors that has undergone colour calibration and is properly set up - and I think IE won't parse colour profiles at all.