Tag Info

Darker color scheme are often used effectively in software that focuses heavily on visual content. For example Adobe Lightroom, Adobe After Effects, Microsoft Expression Blend, and Kaxaml are are interfaces that have a dark color theme. This allows the interface to fade into the background and let the content come alive Why is it not widely used? I guess it ...

At minimum you should choose colour combinations that pass the WCAG 2.0's requirements for colour contrast (Criteria 1.4.3 - and Id recommend at the AA level). The example colours you have shown above won't pass by a long measure. It doesn't mean all your colours have to be solid dark tones, but your text should be a somewhat darker than #e7e7e7 and ...

There is of course an awful lot of research on color and color perception. Most relevant to your purpose is perhaps the work Cynthia Brewer did on ColorBrewer. You can find the resulting tool at http://colorbrewer2.org/ It was originally designed to help choose color for maps but it can also be used for statistical graphs (it's built in Hadley Wickham's ...

If you make your background colors light enough then the text can all be black... Also, I made the numbering a darker version of the background color. The light gray numbering doesn't really work contrast-wise on anything but white. But dark red looks good on light red, for example.

why this color scheme is not widely used? Good question without an obvious answer. You could claim all sorts of trends are involved, but I think it would be a brave move to accept any one reason for why we tend to go with dark on light. I think your best bet is to develop the scheme that best suits your site's purpose and its users. For a quick ...

Please consider what you may be doing to visually impaired users when you design a subtle UI, so that you can do it well. I was on a customer site doing ethnographic reserch when the company happened to be implementing a new software product. The produc was all soft greys with a few accent colours. It looked very nice. During the course of the day, I had a ...

CheckMyColours.com uses the Web Content Accessibility Guidelines (WCAG 2.0) contrast tests. The validity of the tests is something to bring up with WCAG rather than checkmycolours.com. I am unaware of the WCAG providing the research supporting their contrast ratio standards. However, my experience with those standards is that they are fairly lax. I've ...

If you convert the color to another colorspace, e.g. YIQ, YUV or better yet CIE-L*ab, CIE-L*CH, then instead of RGB's Red Green and Blue channels you end up with three different channels, where one is the intensity. In YIQ, YUV the Y channel approximates the intensity and in Lab and LCH the L channel does this. You can then easily reduce the intensity ...

The W3C has explicit guidelines for web content accessability, including contrast. You can compare color values to their ratio and tell the user if their color choices are likely inaccessible/unreadable. The visual presentation of text and images of text has a contrast ratio of at least 4.5:1 Note there are exceptions and some good guidance in the full ...

Folllow the W3C standards See the earlier answer I gave discussing this There are a variety of tools available that can help you test the colour combinations you are using. You could use white (or the predominant background colour of your interface) as the background, and then choose (foreground) colours to represent shading, then choose text colours that ...

For text legibility, gray-scale contrast is more important than color contrast. Use either white or black text to achieve maximum gray-scale contrast for whatever the background color happens to be. Using black or white text will also avoid confusion on whether the foreground or the background color is the color code the user should be attending to. To ...

The main reason a light-on-dark user interface can break down is when the text becomes glaringly bright compared to the dark background. This is one fundamental reason white text on a black background can be hard to read for long periods of time. Applications like Adobe Lightroom use a light gray on dark gray colour scheme and this seems to greatly reduce ...

Dark on light vs light on dark themes can have multiple affects, such as: Bringing attention to an application vs bringing attention to the application's contents People focus on brighter areas - darker background brings attention to the content, while lighter background bring attention to the window itself vs the desktop. Imagine if the box around ...

The rationale on high contrast is just that - high contrast. People with weak eyesight can more easily distinguish between elements and read the text if there is a well-designed black and white theme. Usually this also comes with the option to enlarge text and elements. Sites with low contrast can be difficult to read for people with low vision. Some ...

The simple solution is to simply look at the numerical value of the colour and decide on some threshold above which it will be black and below which it will be white. For example (with all number given in hexadecimal): If the button colour is #4E5523, add each colour component to get an overall value. In this case it would be #4E + #55 + #23 = #C6. If ...

Yes, bright ambient light reduces contrast, so going with a black and white display will be the best you can do. Increasing font size and weight may also help. Hue differences also tend to wash out in bright light so your color codes are probably performing poorly anyway. Tinted sunglasses probably don’t help either. If the color codes are very important, ...

With HSB, you generally reduce B to get a darker version of a given color, and possibly increase S as you go if the color looks too dull. This works for most colors except yellow (it ends up as an ugly muddy color), but only because there's no such thing as "dark yellow." I don't know why you'd get silverish unless your starting color is white, but it's ...

Take a look at this from W3 Than I use always this simple tool to find quickly a good combination between foreground and background color. Hope it help.

Maureen Stone of StoneSoup Consulting has created an "optimal color palette" for charts. It has 8 different colors, and they've been tuned for contrast, differentiation, perceptibility, and color blindness. She provides them in two different sets: one for large blocks of color (like area and bar charts) and one for small points or lines of color (scatter or ...

If said tablet is an iPad, there is an accessibility setting that toggles the display into a high contrast mode. It's not black and white, but it might let you test out a high contrast solution without having to make any changes right away. If you do decide to go with a high contrast solution, looking for screenshots of older monochrome applications can ...

I wouldn't discount the possibility that both Windows and MacOS default to a "light" scheme and people tend to want their applications to all be consistent. I use a dark theme on Windows and too often run into applications that can't handle it (they hard-wire colors or, worse, hard-wire some of them), so if this were just a casual preference and not a real ...

The definition is very clear: Level AA: For Level AA conformance, the Web page satisfies all the Level A and Level AA Success Criteria, or a Level AA conforming alternate version is provided. Level AAA: For Level AAA conformance, the Web page satisfies all the Level A, Level AA and Level AAA Success Criteria, or a Level AAA conforming alternate version is ...

To answer your comment above. The background and foreground colours pass or fail on a specific algorithm, which is different for AA and AAA. An overview is given below: AA = Contrast ratio of at least 4.5:1 between background and foreground. 3:1 for large text (over 18 point or 14 point bold) AAA = Contrast ratio of at least 7:1 between background and ...

I think cheap monitors are akin to IE6. We shouldn't have to worry about it, but there's such a large market share, we inevitably end up having to. I was a UI designer at a gig where they were transitioning away from a pale green background on page elements site-wide as we began a redesign of the site piece by piece. I kept getting flagged for forgetting ...

I would simply use white for dark backgrounds (e.g. your lines 6, 10(?) and 12) and black for light backgrounds (the other ones), with the precise limit between the twice open for discussion. I once tried to use a color as much away on the color wheel as possible, but it showed that either black or white were still better. (This assumes that switching the ...

Which is more important, the 55x55 number or the bar graph behind it? Right now they are competing equally so neither is winning and you're ending up with mud. De-emphasize one or the other. In addition, perhaps you don't need them overlapping. The bar graph could be a lot thinner and perhaps under the text: 34 x 93894 ======--------

change text size Yeah, because some time users have quite large screens and the default text size is comparatively small or some of users have weak eyesight, So users using Ctrl + Scroll to enlarge the text size. I think Accessibility Options achieve good usability practices in the above context. Accessibility Options Font Size Options Visual Style ...

I don't think you can. Every computer, every computer screen and every user has its own interpretation of color. So a certain combination of background and foreground color may look nice on one screen and terrible on another screen. Or it may look nice to one person but terrible to another user. If you allow the user to freely choose any color, some users ...

Yes, the high contrast works very well, the problem is that many interfaces are poorly designed and the high contrast is just too little help to overcome the design flaws and sometimes works against the user. A typical problem is the font used for menus and texts, is very common that the font used is not really good for screen and that it was designed for ...