Why are Inverted Colors considered an accessibility feature?
Why is it that in most Operating Systems the "Inverted Colors" display setting is considered an accessibility feature? Both Windows and OS X include this option so it seems to be a recognized feature and not not a vendor specific quirk.
I understand that some users are color-blind. This could possibly justify the Black & White, or grey-scale modes for developers wanting to be assured that the experience is cohesive for everyone. What I don't understand is how or why does inverting the display color help someone with any specific, visual impairment or dysfunction.
As a programmer that wants to understand the need so that I can develop better, accessible software, what purpose does this feature serve to the end user who has some form of visual impairment?
I asked this question quite a while ago, however, it just dawned on me-- I think I am one of those individuals that this feature was designed for. I almost always try to keep the contrast reversed from the typical settings for my text displays. I hate white backgrounds with dark text! As a coder, all of my textual GUIs are black with green text. This isn't just a throwback to the old monochrome, green screen days. The pairing of the two colors is quite comfortable to my eyes. However, stairing at to much black-on-white actually hurts my eyes from some form of eye strain.
I mention this in an update because the color inversion feature is not useful.. it's annoying! As someone who needs a good feature like this, it's a shame that all implementations that I have ever seen are just a poor attempt at solving a problem. I would hope that Apple, Microsoft and others have done their research but I'm guessing that might not be the case. Color inversion just feels like slapping a band-aid on a bigger problem.
Developers, if you want to help people who need such a feature as to prevent eye-strain, find ways to change the text and page background and not necessarily the entire display.
@raybritton, I can see your point (and I wasn't even aware of the UX site-- slipped through my awareness cracks) but I think it could equally apply on Programmers. This knowledge could affect software design and patterns that should be followed for implementation. However, I wouldn't be upset if the general consensus was to move the question.
Since the post was moved I edited out the bit about Programmers.SE. To me (and the programmers mod who moved the post) this makes more sense on UX, since accessibility is more in our domain. It's relevant for programmers to know of course, but IMO whoever *asks*, it should be designers or HCI researchers who *answer*, hence the move.
Thanks Ben Brocka. I posted this question this morning and I haven't been able to get back to it yet.
Wow! Thank you all for such good answers and comments. I really didn't think this question was spark such a flurry of thought and information. This is why I like StackExchange.
I've posted an example that includes an experimental inverted mode that avoids shifting color hues, here: http://graphicdesign.stackexchange.com/questions/926/good-color-palette-usable-for-the-color-blind/67161#67161
Research generally suggests light on dark is harder to read in most cases but considering we're talking accessibility, you should know that results for those with normal vision don't necessarily hold true for those with various vision impairments.
I've heard higher contrast (the mode in Windows is called High Contrast mode I think) can be easier to read for those with impaired vision though; the white text seems to stand out more. I'm curious as to why that is psychologically; the actual contrast ratio should technically be the same between white on black vs black on white.
Note that it's recommended to increase font sizes and leading when inverting text colors:
When reversing colour out, eg white text on black, make sure you increase the leading, tracking and decrease your font-weight. This applies to all widths of Measure. White text on a black background is a higher contrast to the opposite, so the letterforms need to be wider apart, lighter in weight and have more space between the lines.
Also, a common reason for white on black (which this feature mostly produces) is for night reading; many e-readers offer a Night Mode with white on black. The black screen is less painful to read with low to no external light.
Another reason it might be common is simply because it's easy and relatively safe to to implement. Compare it to other obvious color effect options; if you tried to Sepia tone the whole screen (an effect I've seen to make reading easier on the eyes) you would reduce contrast significantly. Turning things black and white could eliminate color cues used to differentiate interface elements.
Simply inverting colors preserves the relative contrast between UI elements (so you won't have black text on grey backgrounds), so it's a "safe" effect at the least. And if it doesn't help, no harm done, just undo the effect.
While this research is interesting, it actually reminds me of the New Coke debacle in that people preferred New Coke _in small doses_, and Coke mistook that for preferred _period_. Black on white might be easier to read in a sample, but it can strain the eyes over a longer term (on computer screen at least).
Mark Boulton: "White text on a black background is a higher contrast to the opposite". Since contrast expresses the amount of difference (which can be measured accurately), how can white differ more from dark then dark from white? Unless we're discussing two types of 'dark'...
@IgorAsselbergs I suspect the problem is not quite as black and white as you are making out, and that it's more to do with the sensitivity of the eye to white when the surrounding area is dark - allowing they eye to be more rested and therefore able to pick out the brightness; as opposed to being 'saturated' (strained) by a harsh white background and picking out less exposed areas. Much like the ability to pick out stars in the night sky. In other words it's not down to a contrast calculated purely on RGB values, but more down to the way the eye works. Perceived contrast vs physical contrast.
You also need to think about the phsyics of the medium. A computer screen is emitting light. Light text on a dark background is perceived to have stronger contrast because, actually, it does, because the glow doesn't run "in" from outside the letterforms, but out of them. Also the screen is not, compared to paper or E-Ink, a constant image, but a "flickering" one (even at nowadays high rates). This tires the eyes. Less white = less flickering = less strain on the eyes.
I'm one of those vision-challenged people, and @RogerAttrill and Christian are spot-on WRT my experience. The bombardment from a background full of light-emitting white pixels makes the black text harder to read, particularly with extended usage. But I can read for hours on my Kindle (e-ink) with no problems; paper (real or simulated) is different. BTW, the Mac "solution" to this problem is completely useless to me; pixel inversion does too much collateral damage (like photos). On Windows I can define a color scheme. (I use my Mac for shorter periods of time; work machine is Windows.)
True color blindness, where someone cannot distinguish colors at all, is extremely rare. A far more common condition, which affects up to 10% of the male population, is red-green weakness. People suffering from it cannot easily distinguish red and green, and some hues may seem completely identical to them.
While there is no guarantee (there are different kinds and grades of red-green weakness), there is a good chance that UI elements a red-green weak person cannot see well will become more distinguishable when the colors are inverted.
"there is a good chance that UI elements a red-green weak person cannot see well will become more distinguishable when the colors are inverted." How can green-red be more distinguishable than red-green? Assuming the contrast stays the same...
@Igor Asselbergs: color inversion doesn't actually switch red and green - at least when I do it in IrfanView, red becomes cyan and green becomes magenta.
@Igor Asselbergs: in addition to Michael Borgwardt's comments, from my own experience: "full red" & "full green" are comparedly easy to tell apart, it's often mixed colors that make problems. One really bad for me on most monitors is #FFFF00 vs #00FF00 - OK side by side, but with some on-screen distance, it's guesswork. Invert shuffles them around wildly, so at worst it's other items that make problems.
"Wildly" shuffling colors is right. Invert pretty much invalidates any reference in your help files to the "red warning text" or "purple icon". If you have the luxury of defining a full palette and also an inverted version of it, consider "inverting" red text to light red, the white bg to black or dark gray, etc. For color vision deficiencies, you'd ideally have a separate setting for "replace red with magenta" (or with orange), or maybe to replace green. If not, you could have the inverted palette do both jobs--by inverting red to light magenta.
color:invertproperty is really just about increasing the contrast ratio of the text. It selects the inverse color of the background color. Contrast is the key to increasing the accessibility of the text.
There is a load of information on this over at W3.org
- To pass AA compliance you need a contrast-ratio of 4.5:1.
- To pass AAA compliance you need a contrast-ratio of 7:1
A contrast ratio of 3:1 is the minimum level recommended by [ISO-9241-3] and [ANSI-HFES-100-1988] for standard text and vision. The 4.5:1 ratio is used in this provision to account for the loss in contrast that results from moderately low visual acuity, congenital or acquired color deficiencies, or the loss of contrast sensitivity that typically accompanies aging.
Hues are perceived differently by users with color vision deficiencies (both congenital and acquired) resulting in different colors and relative luminance contrasts than for normally sighted users. Because of this, effective contrast and readability are different for this population. However, color deficiencies are so diverse that prescribing effective general use color pairs (for contrast) based on quantitative data is not feasible. Requiring good luminance contrast accommodates this by requiring contrast that is independent of color perception. Fortunately, most of the luminance contribution is from the mid and long wave receptors which largely overlap in their spectral responses. The result is that effective luminance contrast can generally be computed without regard to specific color deficiency, except for the use of predominantly long wavelength colors against darker colors (generally appearing black) for those who have protanopia. (We provide an advisory technique on avoiding red on black for that reason)
It's all slightly different when you start using text of +18pt though, but there is plenty of guidence out there around this. The great snook colour contrast checker is a useful site that allows you to input hex color values to see whether they pass the various W3C criteria.
Some more background on this feature: in Windows, the feature commonly called High Contrast mode is perhaps best thought of as "Use the user's preferred colors mode". In this mode, apps are supposed to use whichever colors the user has selected for text, background, window border, and other screen elements via the control panel.
This mode was completely customizable, and could be used with any of the preset color schemes (such as high contrast black-on-white or high contrast white-on-black, both of which had distinct colors for text elements vs background elements to ensure good contrast), or a user-defined theme. However, since the default color scheme when using the keyboard shortcut to activate this mode was the white-on-black scheme, the mode became associated with that color scheme - which looks very similar to inverse video - even though that's not it's specific goal.
While this feature was originally very flexible, it has one major problem in that it relies on all apps to implement support for it correctly in order for it to work consistently. Apps have to check whether the mode is enabled or not, and if enabled, obtain the system colors to use instead of their own theme or skin colors. What you typically find is that apps from Microsoft and other major vendors who are aware of this mode will actually do this work, but many smaller 3rd party apps will ignore the mode outright, as the developers may not be aware of the feature in the first place. This can lead to situations where some apps get 'inverted', others remain as-is, and some end up as a messy hybrid of inverted and non-inverted controls.
(Some apps even go a step or two further: if this flag is set, IE will stop displaying background images - this was back when background images were typically used just for displaying textured backgrounds which could interfere with reading the text on top, as in the days of Myspace. Later on, however, background images ended up being used for meaningful content - ie sprites and image replacement - so pages that use those techniques don't work so well in IE when this mode is enabled!)
To avoid many of these issues, other vendors (RIM, Apple, others) take a completely different approach: instead of having settings that every app must carefully check for and respect, they simply let apps draw as usual, and then invert the final screen image as it is going to the physical display. As far as the apps are concerned, the screen is still in 'normal' colors, it's only the user that sees the inverted (or gray scale, depending on settings) image. The feature lives entirely in the OS, no app support needed.
It's worth noting that systems that use this approach end up affecting everything on the screen: text and background are inverted, but so are colors in images and video, which may provide no benefit to the end-user and may instead render the image/video unusable!
Also of note is that "inverse video" is not high contrast; in fact, contrast is (mostly) preserved: low-contrast light-grey-on-white gets transformed to equally low-contrast dark-grey-on-black.
So, long story short: 'inverse video' mode is something of a compromise feature: the original "Use the user's preferred colors (which may or may not be contrasting colors) mode" mode is far more flexible and accessible in theory, but not well supported. Inverse video is less useful, but can be supported 100%.
It is really sad that such a large number of websites misuse background images. It goes against all the accessibility guidelines and results in those sites being very difficult to use (or even completely unusable) in high contrast mode. There is a reason why this CSS property is called "background-image" after all. If you are a web developer reading this, PLEASE just stick to the plain old good IMG tag for your content images instead of playing around with accessibility. PS Even the up/down vote arrows on this very site are invisible in high contrast mode :(
Using a white background is like staring at a lamp all day.
I've never understood the confusion people have about using dark backgrounds and lighter text. The only reason we ever used light backgrounds is because historically paper had to be light to show up dark inks. (But that practice is not ancient or severe enough to affect our evolution, so it is not more natural to us.) However, one additional feature I would welcome would be textured backgrounds. I think breaking up the surroundings of text is also easier on the eyes and may be more natural than bold detail of defined text.
In some point inverting colors is helpful. For me, working in the office with computers around all day long my eye could strain a lot because of the brightness of the display. such microsoft word excel, etc.
I prefer inverting colors when typing. When I finish typing I revert it back.
I prefer to invert color because it is less bright on the text not the entire background. Less brightness on the display less effect on the eyes and the skin (radiation) . that's the reason why apple add invert colors to sooth your eyes especially for those who are sensitive in brightness
I have visual impairment its more hard for me reading something with a dark color in a light background than something with a light color in a black background for me color inversion is really helpful the best color inversion that i seen in a OS was iOS color inversion and the worst was the Android color inversion in general Androids accessibility is really bad
i have to say that a native dark themealways is better than color inversion only problem is that too few developers are interested in put a dak skin in their applications right now i remember Sonys walkman music player
There is a partial explanation here:
WebAim's recommendation is to allow the user to choose foreground and background.
One of the reasons why some people prefer black background and white or orange text is to minimise eye strain, especially if you are looking at the screen for a long time, e.g. white backgrounds can be too bright for some people, as suggested here:
I'm a partially blind undergrad. Accessibility: The black background causes less eye fatigue than a typical white. Additionally, ads, photos, etc. are typically designed to visually POP and be seen and processed whether the reader is focused on them or not. Taking these images out of their native color scheme reduces that tremendously.
Meanwhile, I genuinely see yellow text on black background better. I don't know if this is psychological in that the constant pairing of this color scheme with other accessibility features has trained me to be more receptive, or if it's physiological.
However, the preinstalled inversion setting is like a crutch while you wait for an artificial leg. There are much better options out there.