Tag Info

Hot answers tagged

31

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 ...


20

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 ...


13

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 ...


13

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 ...


10

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.


9

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 ...


9

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 ...


8

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 ...


8

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 ...


8

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 ...


7

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 ...


7

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 ...


6

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 ...


6

In the 74 times cited study Readability Of Websites With Various Foreground/Background Color Combinations, Font Types And Word Styles there is limited to no evidence that black text on White background is have higher redability than white text on black background: On can see that Times New Roman is equal, Courier New slightly faster and Arial slightly ...


6

Matching Brightness of Two Different Colors You can calculate the perceived gray-scale brightness of a color on a “typical” monitor with the following formula: Y = 0.2126 * (R/255)^2.2 + 0.7151 * (G/255)^2.2 + 0.0721 * (B/255)^2.2 So, for example, high saturation pure green (0, 255, 0) has a brightness of: Y = 0.2126 * (0/255)^2.2 + 0.7151 * ...


5

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 ...


4

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 ...


4

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 ...


4

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, ...


3

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 ...


3

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 ...


3

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 ...


3

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.


3

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 ...


3

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 ...


3

Short answer: Yes Long answer... There are many different kinds of visual disability. Some, for example cataracts and diabetic retinopathy, are greatly aided by increasing contrast. It doesn't help you because - well - you presumably have good vision. Imagine that you're staring at the screen through translucent plastic. Increasing contrast makes the edge ...


3

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 ...


3

As Web Content Accessibility Guidelines (WCAG2.0) claimed level AA requires a contrast ratio of 4.5:1 for normal text and 3:1 for large text. Level AAA requires a contrast ratio of 7:1 for normal text and 4.5:1 for large text. You can use contract color checker at WebAIM


2

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 ...


2

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 ...



Only top voted, non community-wiki answers of a minimum length are eligible