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.
Related
Let's say a component allows the choice of picking between 20 colors. Should these swatches have labels on them? It seems a little pointless to me since there's no standard for color names besides (probably) meaningless gibberish like #d1ed7e. However, I'm wondering if anybody has an argument for their inclusion.
For color choices on a product selection, say a blouse or shoes, then color names might be important.
And there is a standard for color names. It's in the CSS documentation.
https://www.w3.org/TR/css-color-3/#html4
https://www.w3.org/TR/css-color-3/#svg-color
Those CSS color names might not match a company's name for a color, like "Dusty Sunset", which could be a shirt color or a paint color.
RGB values can also be very useful. What you might think of gibberish, #d1ed7e, might mean a lot to me if I'm a designer or coder.
Visually displaying the color name along with the swatch can also be helpful for some users. You don't necessarily have to "hide" the color name for just screen reader users.
Here's an example from a shoe website.
The current color displays as "Navy" and if I hover with the mouse over the other color, it shows "Tan". Tooltips are not the best way to do this since they're generally not displayed on mobile devices and tooltips often only work with a mouse hover and not keyboard focus, but it gives you an idea of showing color names.
If I'm in a design system and I want to choose a color, I probably want the exact RGB or HSV values so displaying the color code would be helpful.
One of the rules of WCAG says that information shouldn't be conveyed only by their color.
The color of an object, whatever it is, is always an information. It can be more or less important depending on the object and user taste, but it's always a property that the user must know about.
As a consequence of this, definitely, yes, colors have to be labelled in some way, and not left alone without labels.
For sure I want to choose the color, and at worst I don't matter at all and pick one at random. So at worst it anyway never hurts.
It's not because I'm blind that I'm not interested or don't matter at all about colors. For clothing, it stays important. I don't want to wear pink and green together, right ?
I might make a gift to a sighted friend. And what about color blind people ? They will certainly find useful to see "red" and "green" explicitly written, instead of apparently seeing two identical options.
Even normal sighted people are sometimes surprised because the color of what they receive don't match exactly what they saw on the screen. Maybe the brightness wasn't optimal, or he/she ordered during the night, or under artificial light ? I'm pretty sure that a name may help in this case, too.
As explained in the previous answer, the kind of label you should show depends on the kind of users using your site.
However, I don't agree with using CSS names.
For daily life objects sold in a shop, use the same name as it is officially called in your article catalog, it's probably better than using CSS names. If you can stick to quite generic color names, it's probably even better than a possibily brand-specific vocabulary. Example: is "blue marine" or simply "marine" more widely understood than "navy" ? (I'm not native english speaker, so maybe it's a wrong example, but I think you get still the idea).
If I look at all CSS names, really, there are colors I don't know about at all. Jaws has also a quite big list of colors mapped to RGB values, but many don't make much sense either for a lambda user.
For development stuff, RGB code can be very useful, but remember that it doesn't make sense for most people or in other contexts
To wrap up, yes, label your colors, and if possible with names that are widely understood
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.
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.
If so, how do you (if you guys are around) handle the issue? I just heard a story today about a Japanese smoke alarm for deaf people that uses the smell of wasabe to wake them, so I got curious.
If you're really curious, look at
http://www.webexhibits.org/causesofcolor/2A.html
Very few colorblind people are monochromatic (totally colorblind). Most colorblindness falls into the category protanopia or deuteranopia, which can see yellows and blues and browns. So syntax coloring can get set to those. Most of them have a hard time seeing light green, which looks orange, etc.
I am colorblind, red-green deficiencies (protanopes and deutanopes). I have never had any trouble with syntax highlighting, that I have noticed anyway. :)
Most syntax highlighting is configurable.
Certainly nobody should deliberately make life harder on colorblind people, but they've been managing to work around such issues for their whole lives. I've seen some cut and paste into non-color highlighting text editors. I've also seen that they tend to be more familiar with how to configure color highlighting that most people.
In vi, I use
:syn off
when someone discovers a truly horrid highlighting scheme.
If you want to get a feel for how color schemes might appear to the color blind, http://colorschemedesigner.com/ simulates several different colorblind models of perception.
I am mildly colorblind, with blue deficiencies.
This often means that blue or purple colored text is nearly indistinguishable from black text (it is dark grey).
When I get frustrated, I occasionally use Notepad++, a notepad software that supports syntactical highlighting because it allows for creating custom color schemes for highlighting, which is quite handy. It also has support built in for a myriad of languages already.
As a previous poster noted, more often problems arise in graphic design when trying to match colors. (eyedropper FTW!)
I am a colorblind female - i have a rare version where i have trouble seeing pastel blues, greens, and reds. You would assume that i see yellows very well, but that is not the case.
Pastels wash out to brown and grey, All bold colors typically look like pastel versions of themselves.
So my world is mostly browns and greys with pops of color.
Case in point - on this page i see some blue text to the right, black text, some brown boxes, and a stripe of a babysh&# brown color at the top - not very appealing to my eye.
If you are wanting to make accomodations for color deficiency or colorblindness:
I work in IT so when i type i typically use a lot of color or high contrast that confuses other people - but it just serves to slightly highlight things for myself so i don't lose my place
I would appreciate it if programmers enable a high-contrast version, a dark mode, and if they let you choose a blue-yellow syntax as well as green-red.
The consequence of colour blindness would be different for text on a screen rather than other situations.
That is, someone could tweak the UI to match colours as needed. The implicit meaning of the text is still there: comments are comment, keywords are still keywords etc.
It's not like having to decode a traffic light in a very short time, or being told to "cut the red wire" as a bomb disposal expert
I'm colorblind (only very mild) and I don't have any trouble at all with this. Generally the default colors in IDEs contrast enough that they are quite clearly different. The thing to remember that in most cases colorblindness is really a lack of sensitivity to color so bold high contract colors often be distinguished.
The biggest problem doing development having colorblindness is when I need to do some work with artwork and images - I just need to be extra careful that colors do actually match (I use photoshop or whatever to confirm).
Many editors allow you to set properties of the text other than color for syntax highlighting. You could change the weight of the font, underline, italicize, etc. Obviously you won't have nearly as many choices as with using color, but it would allow some differentiation.
Do CSS colors render differently on different monitors? Most importantly, will tools like Digital Color Meter (on OS X, an eye dropper, if you will) give me a different hexcode depending on the monitor or graphics card?
In short: Yes and No.
The exact color values are always the same. The exact rendering, however, varies.
For one, there is color depth: With color depths of 8, 15 or 16 bit an approximation of the specified color has to be used. Sometimes even with dithering.
The monitor itself might have very different color rendering, depending on its settings. Can be seen very easily if you have two monitors side-by-side. They'll never show the exact same colors.
The color profile affects the color rendering too. Most people don't calibrate their monitors, though.
No. A colour always remains the same. However, physically realising a colour may depend on the display, the materials used to display, the lighting, and almost an infinite array of things.
The eye dropper tool will always inform the correct colour. Since displays differ, the colour (visually) will differ among them. However, in theory the colours are the same everywhere. If you select a red colour with the eye dropper and draw an image and share it, it will be rendered as red by the graphics adapter in all systems (unless they are very buggy!). If the display lacks the red components, or the red component is faulty, the colour displayed will not be red. Programmatically, the colour is still red.
When developing for the web, or doing graphics work, always check with a couple of different displays to make sure that you indeed selected the colour that you wanted, as displays differ.
You shouldn't get different hex values based on monitor, but you will get different final results depending on OS, monitor, graphics set, and settings.
The computer is in control of the color numbers, so the numbers will not change no matter what monitor or graphics adapter you have.
The monitors will look different though. There are many reasons for this; even two of the same model monitor might not look identical, especially if the settings have been changed. Most of the time they will be similar enough that nobody will complain. There are calibration systems you can purchase to bring them closer to a standard appearance.
The colors,independently of language used to display them, usually render differently from monitor to monitor, this is due to different technology that allows a different color space (profile) to be shown.
You will never be able to have the exact same colors on all of the monitors, in fact on CRT and LCD monitors colors show differently most of the time.
I don't know DCM so I guess you'll have to try but it would be much better if you try to look for a palette that is best shown on most of monitors, maybe trying to look at it on a CRT and LCD of different producers.
PCs and Macs will indeed render colours somewhat differently, though not necessarily because of the monitor.
For example, a Mac will render the colour #FEFEFE in the browser whereas a PC will render it white, as though it were #FFF.