62

Dark on light vs light on dark themes can have multiple effects, 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 ...


51

No, it would seem not, as W3C states 1.4.3 Contrast (Minimum): The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following: Large Text: Large-scale text and images of large-scale text have a contrast ratio of at least 3:1; Incidental: Text or images of text that are part of an inactive user ...


38

In short, NO, they do not have enough contrast. According to Web Content Accessibility Guidelines (WCAG) they mostly do not have enough contrast. Only 1 out of 8 tests gets a pass. But the dark blue text on light gray background mostly passes. But there are other factors In essence, we should be comparing icons to whole words, not individual letters. So ...


33

Yes there is a formula. I wrote an article on high contrast colours recently that charts the variation of black or white (actually off-white #f0f0f0 and off-black #101010) as the foreground colour with the highest contrast ratio, for ranges of background colours. There is also an interactive SVG version with tooltips of the contrast ratios The contrast ...


32

A good example to consider would be the iBooks app in iOS which allows users to enable the dark theme automatically depending on the light sensor detection. However as PS86 rightly pointed out, don't build this automatically into the system but enable the user to set as a desired parameter. To quote this article, the iBooks app enables this by an option ...


24

Do more research. Asking one person will only get you that person's preference - Ask lots more people and look for patterns in the results. The RNIB (UK organisation for blind and partially sighted people) recommends yellow text on a black background but this may not sit well with your particular users. Not only do you have to think about contrast but you ...


21

I would say it has to do with the following reasons : Contrast : Studies have shown that black or dark backgrounds provide the easiest contrast and can allow users to read discrete information quickly without having to make an effort to discern details when in a dark environment (which is often the environment in cars) Darkness adaptive : Another reason is ...


18

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


16

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


14

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


12

Some of the most important things are going to be high contrast, large text and dark on light design. Some good examples of high contrast designs are here on Web Design Guru Blog. They have some nice color examples but remember to keep it minimalist. Keep your text large to keep it readable and force yourself to cut out as much text as possible. Keep the ...


11

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


10

Suffering from cataracts myself, I can assure you from myself, as well as others, that white or very light text on black is much more efficient for us. The research is there as well if you research low vision disorders. It all had to do with the amount of bright white light. There are some screens on some programs where there is so much white, all we see is ...


10

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 * (255/...


10

Think of high contrast text and using more than just color. There are a lot of accessibility guidelines out there. I'll mention two examples that I have come across in projects before. Check the attached links for extra guidelines. High contrast text Check the Web Content Accessibility Guidelines for a lot of useful information on this topic, including ...


9

More Contrast Generally Better There are no general standards for capping contrast for either day or night displays. Generally, the higher the contrast, the easier the reading in both cases (Parker & Schaff, 1998; Zuffi, Brambilla, Beretta, & Scala, 2007). Thus, your UI can have two independent dimensions: day versus night, and low versus high ...


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

This peculiar effect that appears with direct-sunlight is solarisation. It's also what happens to "old" plasma TVs if you see them from an angle. Solarized, a sixteen color palette, has been scientifically designed and tested "in a variety of lighting conditions" to achieve, among other properties, selective contrast: Solarized reduces brightness ...


7

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


7

As others have mentioned, this is very much a safety issue and very much worth asking! Fortunately, user experience in vehicles has a long history of study and standardization. SAE International, formerly the Society of Automotive Engineers, has published a number of standards and papers related to this issue. Here are some that may be relevant: http://...


7

color brewer is designed for maps but it will give you colours that are optimised to be as differentiable as possible. It has a maximum of 12 colour classes


7

Well, either you follow the rules or you don't. You have to choose if the trade off of "nice look" vs "accessible" is of value for you. Personally, I always think objective data is usually better than subjectivity, so I try to go with what objective data says. But again: it's a decision you have to make. As for your specific color choice, while it looks ...


6

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


6

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


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

Encouraged to post this as an answer instead of a comment, I'd suggest looking at: https://github.com/SlexAxton/css-colorguard It is a tool that uses the CIEDE200 algorithm to detect color collisions and seems to incorporate a number of variables and not just contrast to detect collisions. They most likely did not design this algorithm to take care of the ...


6

Yes, it's a good idea to dynamically change the theming of the application based on lighting. Also remember to add: the ability for the user to turn off dynamically changing the theme based on lighting The ability to change theme regardless of the current lighting ambience Sometimes users prefer having dark theme during the day and vice versa


6

Your device is not stock Android. That theme will be something that is set by your device manufacturer and not by Marshmallow/Google. I agree that the colours are very pale and would be difficult so see in daylight. I am sure there is going to be a way to update/install a different, darker theme. This is why people like the idea of going with Google ...


5

These are valid for any website, especially on mobile devices and even more so outdoors: high contrast dark text on light background sufficiently BIG font size for the actual content don't be afraid of negative space. give your content some room. prefer readability over pretty looks make it fast or at least not unnecessarily slow think about position of the ...


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