Hi, I am not a designer, however a part of me is a developer and that part of me calls for good coding practices, clean code, a polished architecture and a smooth UI, the last one being the hardest for me (and maybe for a lot of developers) but still I think is required that we think about it as much as we do with the coding part.
There are several ways of writing code, but let me assure you that for each one of them there could be at least 5 UI design/patterns, I know it’s a lot to digest, but today, we will focus in only one that has been gaining attention in the last years, let’s go Dark Mode.
Google within it’s Material Design Guidelines and many others have good explanation of what dark mode/theme is, but the focus now is to show how accessibility of your application or web can be improved or worsened with it.
Some people may have problems when trying to see digital content, eye strain, sight issues, dyslexia, and so on.
We have been teach that enabling a dark mode is better to avoid eye strain, it has been proved scientifically and it’s correct, so that means we go and go dark all the way?, If you want a short answer is NO, if you want to know why, and some tips, keep reading.
The big problem is not actually about dark or no dark, in fact our real nightmare is Total Contrast, this means we should avoid at all cost, going full black (#000000) or full white (#FFFFFF).
Facts:
- People that suffers from astigmatism suffers from halation effect which will make the text blurry for them and harder to read if the text is too bright in relation with the background.
- People can suffer from eye strain, vision fatigue and even headaches if they stare too long at content with a bright background.
- People with dyslexia can have a bad time reading text that has a total contrast (white over black or black over white) because they are usually sensitive to the brightness the high contrast colors provoke.
Taking these facts into account, we can now get to a conclusion, dark mode is not always the best option, but neither a fully “clear mode” is, as everything in life, we need to focus on having a balance between the light and dark colors, if you want to enable a dark mode on your web or app, try to choose dark gray tones for the background instead of pure black and don’t use fully white text, go for a lighter tone of the same gray palette. If you prefer using a standard clear theme, also avoid having a pure white background, select light gray or light colors and the text can be a darker version of the color or a dark gray instead of a complete black.
