4 ms·

black-on-white is easier - lots of brightness makes the iris contract, giving me sharper vision during the day and when looking at a bright screen. At night, I

black-on-white is easier - lots of brightness makes the iris contract, giving me sharper vision during the day and when looking at a bright screen. At night, I try to keep my lights on and not sit in a dark room with a screen or else my eyes get fatigue very quickly.

Timon3 3y ago
Understood, thank you! I've mostly focused on dark mode for my stuff, but your experience is a very good reason to spend equal time on light and dark mode. I'd hate for someone not to be able to use whatever I build simply due to "bad design" for that person. One last question if you don't mind - is a light mode with good foreground/background contrast enough for you to see well, even if there are elements with bright colors (e.g. here the orange top bar)? Or is it easier to clearly see everything with fewer colors (and thus higher contrast)?
- Zondartul 3y ago
  It should be fine to use colors for elements on the light theme, as far as accessibility is concerned. Colored text is not a very good idea, but everything else is up to your artistic vision. On the topic of the theme and colors, I think the trick for keeping elements distinct despite low contrast, is to have fewer "levels" of elements. Modern "flat" designs keep very low contrast between the actual page background and any organization elements (containers, panels etc) and only give high contrast to the "main" elements, such as the primary text content and whatever element is currently selected. For example, on a page with a "download" button it's a good idea to give that one button a high contrast scheme, instead of all buttons on the page. Contrast can be done between light and dark, between gray and color, or between color and a different color. Another thought I had about light/dark theme, is that dark theme is often modeled after a colorful console terminal, where technicolor colors are used to draw attention to different types of messages, or as blinking LEDs on a device front panel, so that gives extremely high contrast between the (basically invisible) bg and the object. Light mode, otoh, is often modeled after a book or a newspaper, or some other physical medium, where there is one basic color for text and the background does the heavy lifting - bright for bulk text, colored for special notices or announements, pale for uninteresting stuff, etc.
  - Timon3 3y ago
    Thank you very much for replying and sharing your thoughts! :)
    - lagniappe 3y ago
      All I ask is that you consider the os/browser preference settings for light/dark.
      - Timon3 3y ago
        I do! I use the OS/browser preference as a default and add an additional toggle with persistence. @vueuse/core has a really nice implementation for Vue3 projects: https://vueuse.org/core/useColorMode/ https://vueuse.org/core/useColorMode/

Timon3 3y ago

Understood, thank you! I've mostly focused on dark mode for my stuff, but your experience is a very good reason to spend equal time on light and dark mode. I'd hate for someone not to be able to use whatever I build simply due to "bad design" for that person. One last question if you don't mind - is a light mode with good foreground/background contrast enough for you to see well, even if there are elements with bright colors (e.g. here the orange top bar)? Or is it easier to clearly see everything with fewer colors (and thus higher contrast)?

Zondartul 3y ago
It should be fine to use colors for elements on the light theme, as far as accessibility is concerned. Colored text is not a very good idea, but everything else is up to your artistic vision. On the topic of the theme and colors, I think the trick for keeping elements distinct despite low contrast, is to have fewer "levels" of elements. Modern "flat" designs keep very low contrast between the actual page background and any organization elements (containers, panels etc) and only give high contrast to the "main" elements, such as the primary text content and whatever element is currently selected. For example, on a page with a "download" button it's a good idea to give that one button a high contrast scheme, instead of all buttons on the page. Contrast can be done between light and dark, between gray and color, or between color and a different color. Another thought I had about light/dark theme, is that dark theme is often modeled after a colorful console terminal, where technicolor colors are used to draw attention to different types of messages, or as blinking LEDs on a device front panel, so that gives extremely high contrast between the (basically invisible) bg and the object. Light mode, otoh, is often modeled after a book or a newspaper, or some other physical medium, where there is one basic color for text and the background does the heavy lifting - bright for bulk text, colored for special notices or announements, pale for uninteresting stuff, etc.
- Timon3 3y ago
  Thank you very much for replying and sharing your thoughts! :)
  - lagniappe 3y ago
    All I ask is that you consider the os/browser preference settings for light/dark.
    - Timon3 3y ago
      I do! I use the OS/browser preference as a default and add an additional toggle with persistence. @vueuse/core has a really nice implementation for Vue3 projects: https://vueuse.org/core/useColorMode/ https://vueuse.org/core/useColorMode/