Background dark web wallpaper9/18/2023 ![]() Give users the option to turn it on or off The majority of your screen real estate should be dedicated to dark greys. This means that you should try to limit your colour pallet to only a few colours and try to use these colours as highlight and accent colours only. The purpose of a dark UI is to reduce eye strain by keeping the majority of the items on screen dark. The higher the elevation of the element, the lighter grey the background becomes. Elements that are elevated above the main background can use these slightly lighter greys to express depth in your designs. Picking a base shade of grey is your starting place, from there you can add a few more tones of grey that gradually increase in brightness. In fact, this may be impossible if you use cards, modals or drawers in your designs. When creating your interface you shouldn’t feel the need to stick to just one shade of grey for the backgrounds of your elements. If it meets accessibility requirements then you are good to go, but if it doesn’t meet accessibility consider reducing the saturation. The first thing you can do is check your existing colours contrast against your proposed background colour. As mentioned above there are some colours that can look great on light UIs but won’t meet accessibility on dark UIs. ![]() If you have an existing colour pallet that is used for a light interface and you are now adding a dark interface option you will need to revisit your colour pallet and potentially adjust it specifically for your dark UI. If you have very saturated colours in your brand pallet and want to ensure brand consistency you can use these saturated colours but they should be kept to a minimum throughout and substituted with a less saturated version of those colours when possible.Īdjust your colour pallet where necessary Less saturated colours are generally better f=all round in terms of legibility on dark backgrounds. However, on darker backgrounds highly saturated colours can cause eye strain and often don’t meet accessibility guidelines. This can help visually differentiate them from one another without adding overly bold text.Ĭolours that are very saturated can look very good on light UI interfaces as they have a good contrast ratio. An example of this would be using a slightly darker shade of white for input text on inputs that aren’t active or don’t have any content, then using a bright white for active inputs or inputs with content. Instead, consider using a slightly off white for elements that are not active or being interacted with. However, with dark backgrounds, light text can appear very bold already and using a bold font may look heavy-handed. When adding emphasis to dark text on a light background we generally use a heavier font-weight or size. Dark grey allows you to use black for shadows so you can keep a sense of depth and has a reduced contrast between itself and white text which will reduce eye strain. Instead, use a dark grey colour for your background, Googles material design guidelines recommend using the colour #121212. However, this has a very harsh contrast and can make text difficult to read and even painful on the eyes after a while. When picking a background colour and a text colour you may immediately go to pure black for your background and pure white for your text colour. There are a few things to keep in mind when creating an interface with a dark colour pallet that differ from interfaces with a light colour pallet. ![]() Some examples of sites and apps that utilise an always-on dark mode are apps to help you sleep, Netflix which is mainly used in the evenings and games where you want to create a moody atmosphere. Back before dark mode was a thing, sites that choose to have a dark UI did so either because their apps and sites were going to be used in dark environments or because they wanted to create a moody dramatic effect. It has been around for a long time, but only recently have sites and apps started implementing both a dark and light mode for their UI. ![]() ![]() Dark UI can help save battery life by reducing the amount of power used to show an interface, it can help reduce eye strain by adjusting to surrounding lighting conditions and can help facilitate the use of devices in dark environments.ĭark mode is not a new idea. Dark interfaces can be the only colour theme for a site or app or can be toggled on via customisable settings. Dark UI is a term used to refer to an interface that uses mostly dark backgrounds and elements to create a ‘dark’ colour scheme. ![]()
0 Comments
Leave a Reply.AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |