{"id":4649,"date":"2022-06-23T10:26:41","date_gmt":"2022-06-23T08:26:41","guid":{"rendered":"https:\/\/www.omatech.com\/blog\/?p=4649"},"modified":"2022-06-23T16:24:58","modified_gmt":"2022-06-23T14:24:58","slug":"ventajas-del-diseno-web-con-modo-oscuro","status":"publish","type":"post","link":"https:\/\/www.omatech.com\/blog\/2022\/06\/23\/ventajas-del-diseno-web-con-modo-oscuro\/","title":{"rendered":"Ventajas del dise\u00f1o web con &#8216;modo oscuro&#8217;"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_82_2 counter-hierarchy ez-toc-counter ez-toc-transparent ez-toc-container-direction\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Tabla de contenidos<\/p>\n<label for=\"ez-toc-cssicon-toggle-item-6a4534f19c043\" class=\"ez-toc-cssicon-toggle-label\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/label><input type=\"checkbox\"  id=\"ez-toc-cssicon-toggle-item-6a4534f19c043\"  aria-label=\"Alternar\" \/><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.omatech.com\/blog\/2022\/06\/23\/ventajas-del-diseno-web-con-modo-oscuro\/#%C2%BFQue_es_el_modo_oscuro\" >\u00bfQu\u00e9 es el modo oscuro?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.omatech.com\/blog\/2022\/06\/23\/ventajas-del-diseno-web-con-modo-oscuro\/#%C2%BFComo_funciona_el_modo_oscuro_en_diseno_web\" >\u00bfC\u00f3mo funciona el modo oscuro en dise\u00f1o web?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.omatech.com\/blog\/2022\/06\/23\/ventajas-del-diseno-web-con-modo-oscuro\/#Origenes_del_modo_oscuro\" >Or\u00edgenes del modo oscuro<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.omatech.com\/blog\/2022\/06\/23\/ventajas-del-diseno-web-con-modo-oscuro\/#Modo_oscuro_%C2%BFuna_moda_o_una_opcion_de_diseno_consolidada\" >Modo oscuro: \u00bfuna moda o una opci\u00f3n de dise\u00f1o consolidada?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/www.omatech.com\/blog\/2022\/06\/23\/ventajas-del-diseno-web-con-modo-oscuro\/#Beneficios_del_modo_oscuro_en_el_diseno_web\" >Beneficios del modo oscuro en el dise\u00f1o web<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/www.omatech.com\/blog\/2022\/06\/23\/ventajas-del-diseno-web-con-modo-oscuro\/#Modo_oscuro_para_reducir_la_fatiga_ocular\" >Modo oscuro para reducir la fatiga ocular<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/www.omatech.com\/blog\/2022\/06\/23\/ventajas-del-diseno-web-con-modo-oscuro\/#Mas_vida_de_la_bateria\" >M\u00e1s vida de la bater\u00eda<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/www.omatech.com\/blog\/2022\/06\/23\/ventajas-del-diseno-web-con-modo-oscuro\/#Identidad_visual_del_%E2%80%98dark_mode\" >Identidad visual del &#8216;dark mode&#8217;<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/www.omatech.com\/blog\/2022\/06\/23\/ventajas-del-diseno-web-con-modo-oscuro\/#Destacar_contenidos_de_la_web\" >Destacar contenidos de la web<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/www.omatech.com\/blog\/2022\/06\/23\/ventajas-del-diseno-web-con-modo-oscuro\/#Desventajas_del_modo_oscuro\" >Desventajas del modo oscuro<\/a><\/li><\/ul><\/nav><\/div>\n<figure id=\"attachment_4652\" aria-describedby=\"caption-attachment-4652\" style=\"width: 754px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/www.omatech.com\/blog\/wp-content\/uploads\/2022\/06\/barcelona-noche.jpg\"><img decoding=\"async\" class=\"wp-image-4652\" title=\"El Eixample de Barcelona, de noche y a vista de p\u00e1jaro, recuerda a un dise\u00f1o de modo oscuro\" src=\"https:\/\/www.omatech.com\/blog\/wp-content\/uploads\/2022\/06\/barcelona-noche-300x197.jpg\" alt=\"El Eixample de Barcelona, de noche y a vista de p\u00e1jaro, recuerda a un dise\u00f1o de modo oscuro\" width=\"754\" height=\"495\" srcset=\"https:\/\/www.omatech.com\/blog\/wp-content\/uploads\/2022\/06\/barcelona-noche-300x197.jpg 300w, https:\/\/www.omatech.com\/blog\/wp-content\/uploads\/2022\/06\/barcelona-noche-1024x671.jpg 1024w, https:\/\/www.omatech.com\/blog\/wp-content\/uploads\/2022\/06\/barcelona-noche-1536x1007.jpg 1536w\" sizes=\"(max-width: 754px) 100vw, 754px\" \/><\/a><figcaption id=\"caption-attachment-4652\" class=\"wp-caption-text\">El Eixample de Barcelona, de noche y a vista de p\u00e1jaro, es un tramado que recuerda a un dise\u00f1o de modo oscuro. En el centro de la foto se aprecia la Sagrada Familia, de Antoni Gaud\u00ed.<\/figcaption><\/figure>\n<p>El <strong>modo oscuro<\/strong> est\u00e1 cada vez m\u00e1s presente en el <strong>dise\u00f1o web<\/strong> y de aplicaciones m\u00f3viles. \u00bfQu\u00e9 beneficios tiene el modo oscuro en dise\u00f1o web? \u00bfPor qu\u00e9 puede ser bueno el empleo del <strong><em>dark mode<\/em><\/strong> en webs y apps? En este post, analizamos lo que necesitas saber sobre este modo de dise\u00f1o.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"%C2%BFQue_es_el_modo_oscuro\"><\/span>\u00bfQu\u00e9 es el modo oscuro?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>El modo oscuro en dise\u00f1o web y de aplicaciones m\u00f3viles define los textos en colores claros (blancos o grises) sobre un fondo negro u oscuro. Se trata de una pauta de dise\u00f1o que puede presentarse al usuario por defecto, es decir, nada m\u00e1s abrir la web o la app. Asimismo, en muchos proyectos es una opci\u00f3n de dise\u00f1o que el usuario puede elegir. La utilidad percibida por el usuario es una mejor <strong>visibilidad<\/strong> y <strong>legibilidad<\/strong> cuando hay poca luz ambiental.<\/p>\n<p>En ingl\u00e9s, se utiliza el t\u00e9rmino <em>dark mode<\/em>. Otras expresiones para transmitir la misma idea son <em>black mode<\/em>, <em>dark theme<\/em>, <em>light-on-dark<\/em> y <em>night mode<\/em>.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"%C2%BFComo_funciona_el_modo_oscuro_en_diseno_web\"><\/span>\u00bfC\u00f3mo funciona el modo oscuro en dise\u00f1o web?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>El modo oscuro reduce la cantidad de luz emitida por la pantalla, al tiempo que mantiene los m\u00ednimos ratios de contraste de color necesarios para leer bien.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Origenes_del_modo_oscuro\"><\/span>Or\u00edgenes del modo oscuro<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>En los inicios de la inform\u00e1tica personal, las pantallas usaban lo que ahora llamamos <em>dark mode<\/em>. Ahora bien, para dar m\u00e1s atractivo al concepto comercial del ordenador personal y extender su uso m\u00e1s all\u00e1 de programadores y fans de la inform\u00e1tica, las <em>interfaces<\/em> se adaptaron para parecer textos sobre papel. El texto negro sobre fondo blanco era m\u00e1s atractivo para el gran p\u00fablico.<\/p>\n<p>La gente con cierta edad debe recordar el servicio de Teletexto de las televisiones de los a\u00f1os 80 y 90. Si quer\u00edas mirar c\u00f3mo hab\u00eda quedado tu equipo de f\u00fatbol o ver la previsi\u00f3n meteorol\u00f3gica, lo le\u00edas en la <em>tele<\/em> a trav\u00e9s de textos en cyan o amarillo sobre fondo negro.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Modo_oscuro_%C2%BFuna_moda_o_una_opcion_de_diseno_consolidada\"><\/span>Modo oscuro: \u00bfuna moda o una opci\u00f3n de dise\u00f1o consolidada?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Algunos sostienen que el <em>dark mode<\/em> est\u00e1 de moda. Sin embargo, quiz\u00e1s sea m\u00e1s preciso decir que las marcas y los desarrolladores web son cada vez m\u00e1s entusiastas de sus posibilidades. En fin, que el <em>dark mode<\/em> ha llegado para quedarse.<\/p>\n<p>Hoy podemos poner en modo oscuro los m\u00f3viles iPhone y Android, aunque puede haber apps que exijan ponerlas en <em>dark mode<\/em> de forma espec\u00edfica. En cuanto a sistemas operativos de ordenador, Windows 7 ya incorpor\u00f3 el denominado <em>night mode<\/em>. En los \u00faltimos a\u00f1os, hay m\u00e1s webs y apps que incorporan este dise\u00f1o por defecto.<\/p>\n<p><a href=\"https:\/\/www.omatech.com\/blog\/wp-content\/uploads\/2022\/06\/modo-oscuro.jpg\"><img decoding=\"async\" class=\"aligncenter wp-image-4654\" title=\"Icono del switch de modo oscuro y modo claro\" src=\"https:\/\/www.omatech.com\/blog\/wp-content\/uploads\/2022\/06\/modo-oscuro-300x300.jpg\" alt=\"Icono del switch de modo oscuro y modo claro\" width=\"510\" height=\"510\" srcset=\"https:\/\/www.omatech.com\/blog\/wp-content\/uploads\/2022\/06\/modo-oscuro-300x300.jpg 300w, https:\/\/www.omatech.com\/blog\/wp-content\/uploads\/2022\/06\/modo-oscuro-1024x1024.jpg 1024w, https:\/\/www.omatech.com\/blog\/wp-content\/uploads\/2022\/06\/modo-oscuro-150x150.jpg 150w, https:\/\/www.omatech.com\/blog\/wp-content\/uploads\/2022\/06\/modo-oscuro-1536x1536.jpg 1536w, https:\/\/www.omatech.com\/blog\/wp-content\/uploads\/2022\/06\/modo-oscuro-370x370.jpg 370w\" sizes=\"(max-width: 510px) 100vw, 510px\" \/><\/a><\/p>\n<p>Si esta opci\u00f3n\/pauta de dise\u00f1o se ha consolidado, ha sido gracias a tres grandes razones:<\/p>\n<ul>\n<li><strong>Pr\u00e1ctico<\/strong>. \u00bfQu\u00e9 hay m\u00e1s \u00fatil que permitir una mejor visibilidad en condiciones de poca luz? Lo pr\u00e1ctico es la quintaesencia de una buena <strong>experiencia de usuario<\/strong>.<\/li>\n<li><strong>Sostenible<\/strong>. Un dise\u00f1o basado en el modo oscuro es sostenible, al consumirse menos energ\u00eda.<\/li>\n<li><strong>Atractivo<\/strong>. El modo oscuro es atractivo <em>per se<\/em>. Asimismo, pede contribuir a una efectiva comunicaci\u00f3n visual de los valores de una marca.<\/li>\n<\/ul>\n<h2><span class=\"ez-toc-section\" id=\"Beneficios_del_modo_oscuro_en_el_diseno_web\"><\/span>Beneficios del modo oscuro en el dise\u00f1o web<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>El modo oscuro tiene un gran n\u00famero de ventajas desde el punto de vista del dise\u00f1o y de la diferenciaci\u00f3n de los proyectos web. El prop\u00f3sito del dise\u00f1o basado en el modo oscuro es ofrecer la mejor experiencia de usuario y potenciar la identidad visual de la marca.<\/p>\n<p>\u00bfQu\u00e9 beneficios tiene para el dise\u00f1o web y para la experiencia de usuario?<\/p>\n<ul>\n<li>Reducir la fatiga ocular<\/li>\n<li>Alargar la vida de la bater\u00eda<\/li>\n<li>Ayudar a diferenciar la identidad visual<\/li>\n<li>Destacar contenidos de la web<\/li>\n<\/ul>\n<h2><span class=\"ez-toc-section\" id=\"Modo_oscuro_para_reducir_la_fatiga_ocular\"><\/span>Modo oscuro para reducir la fatiga ocular<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>El modo oscuro disminuye la <strong>fatiga ocular<\/strong> en condiciones de poca luz. Es decir, mejoramos la <strong>ergonom\u00eda visual<\/strong>, la visibilidad y la legibilidad a trav\u00e9s del dise\u00f1o web.<\/p>\n<p>Tambi\u00e9n ayuda a la <strong>accesibilidad web<\/strong>, ya que se adapta a las personas con sensibilidad a la luz.<\/p>\n<p>Adem\u00e1s, evita el <em>efecto <strong>luz azul<\/strong><\/em> de las pantallas. Los expertos desaconsejan el uso de pantallas antes de dormir y, sobre todo, cuando la pantalla emite mucho brillo y se produce el fen\u00f3meno de la luz azul. El gran inconveniente de este tipo de luz es que el cerebro se confunde, porque la identifica con la luz solar. Por este motivo, se reduce la producci\u00f3n de melatonina, la hormona que le <em>dice<\/em> al organismo que hay que ir a dormir.<\/p>\n<blockquote><p>Con el dise\u00f1o en modo oscuro, una web o aplicaci\u00f3n se adapta a unas malas condiciones de luz. As\u00ed se facilita una buena experiencia de usuario de noche o en lugares oscuros<\/p><\/blockquote>\n<h2><span class=\"ez-toc-section\" id=\"Mas_vida_de_la_bateria\"><\/span>M\u00e1s vida de la bater\u00eda<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Con este dise\u00f1o, se alarga la <strong>duraci\u00f3n de la bater\u00eda<\/strong>. Si la pantalla es OLED o AMOLED, el modo oscuro facilita consumir menos energ\u00eda. Como resultado de esta mayor eficiencia energ\u00e9tica, la bater\u00eda del m\u00f3vil dura m\u00e1s. Por tanto, \u00a1el <em>dark mode<\/em> contribuye a que un sitio web o una app sean m\u00e1s sostenibles!<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Identidad_visual_del_%E2%80%98dark_mode\"><\/span>Identidad visual del &#8216;dark mode&#8217;<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>El modo oscuro es una poderosa herramienta de marketing y de <strong>identidad visual<\/strong>.<\/p>\n<p>Un dise\u00f1o basado en el modo oscuro tiene mucha fuerza. Adem\u00e1s, tiene la capacidad de transmitir valores positivos para cualquier marca.<\/p>\n<blockquote><p>\u00bfQu\u00e9 atributos podemos asociar al <em>dark mode<\/em>? Pues ser\u00edan unos ejemplos los siguientes: sofisticaci\u00f3n, elegancia, solidez, misterio y lujo<\/p><\/blockquote>\n<p>Es evidente que muchas marcas no deber\u00edan utilizar el <em>dark mode<\/em> como un patr\u00f3n de dise\u00f1o por defecto. La principal objeci\u00f3n es que los valores de una marca no concuerden con los valores que expresa el modo oscuro.<\/p>\n<p>En todo caso, como ya hemos dicho, el <em>dark mode<\/em> es tambi\u00e9n una configuraci\u00f3n de visualizaci\u00f3n que a\u00f1ade valor a la experiencia de uso de todo tipo de proyectos digitales. Los usuarios aprecian cada vez m\u00e1s tener la opci\u00f3n de cambiar la web o la app a modo oscuro para ver todo mejor cuando falte luz.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Destacar_contenidos_de_la_web\"><\/span>Destacar contenidos de la web<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>El fondo oscuro del <em>dark mode<\/em> ayuda a dirigir la mirada del usuario a los contenidos espec\u00edficos en color. En t\u00e9rminos de dise\u00f1o web, el modo oscuro tiene una enorme capacidad de poner el foco sobre determinados aspectos o contenidos del sitio web o aplicaci\u00f3n.<\/p>\n<p><a href=\"https:\/\/www.omatech.com\/blog\/wp-content\/uploads\/2022\/06\/netflix-modo-oscuro.jpg\"><img decoding=\"async\" class=\" wp-image-4651 aligncenter\" src=\"https:\/\/www.omatech.com\/blog\/wp-content\/uploads\/2022\/06\/netflix-modo-oscuro-300x225.jpg\" alt=\"\" width=\"637\" height=\"478\" srcset=\"https:\/\/www.omatech.com\/blog\/wp-content\/uploads\/2022\/06\/netflix-modo-oscuro-300x225.jpg 300w, https:\/\/www.omatech.com\/blog\/wp-content\/uploads\/2022\/06\/netflix-modo-oscuro-1024x769.jpg 1024w, https:\/\/www.omatech.com\/blog\/wp-content\/uploads\/2022\/06\/netflix-modo-oscuro-1536x1154.jpg 1536w, https:\/\/www.omatech.com\/blog\/wp-content\/uploads\/2022\/06\/netflix-modo-oscuro.jpg 1671w\" sizes=\"(max-width: 637px) 100vw, 637px\" \/><\/a><\/p>\n<p>Son buenos ejemplos las plataformas de <em>streaming<\/em> <strong>Spotify<\/strong> (canciones) y <strong>Netflix<\/strong> (contenidos audiovisuales), y la plataforma de distribuci\u00f3n online de videojuegos <strong>Steam<\/strong>. En estos tres referentes del ocio digital, este modo est\u00e1 por defecto. El prop\u00f3sito es que el usuario distinga enseguida, con facilidad, las diferentes opciones disponibles para su consumo inmediato. Es decir, se estimula el consumo y la compra por impulso. Spotify quiere que te fijes en las atractivas <em>covers<\/em>, un elemento gr\u00e1fico que ha ayudado a comercializar m\u00fasica desde los tiempos del vinilo. Y Netflix desea resaltar y poner en valor la amplia variedad de su cat\u00e1logo de pel\u00edculas, series, <em>realities<\/em> y documentales.<\/p>\n<blockquote><p>El prop\u00f3sito del modo oscuro por defecto en plataformas de ocio digital es que las <strong>im\u00e1genes en miniatura<\/strong> brillen y capten enseguida la atenci\u00f3n del usuario. El prop\u00f3sito final es llamar a la acci\u00f3n. Es decir, que escuches una canci\u00f3n, que compres un juego o que reproduzcas una pel\u00edcula<\/p><\/blockquote>\n<h2><a href=\"https:\/\/www.omatech.com\/blog\/wp-content\/uploads\/2022\/06\/dark-theme-streaming.jpg\"><img decoding=\"async\" class=\"aligncenter wp-image-4655\" title=\"El modo oscuro pone en contraste texto claro sobre un fondo oscuro\" src=\"https:\/\/www.omatech.com\/blog\/wp-content\/uploads\/2022\/06\/dark-theme-streaming-300x144.jpg\" alt=\"El modo oscuro pone en contraste texto claro sobre un fondo oscuro\" width=\"782\" height=\"375\" srcset=\"https:\/\/www.omatech.com\/blog\/wp-content\/uploads\/2022\/06\/dark-theme-streaming-300x144.jpg 300w, https:\/\/www.omatech.com\/blog\/wp-content\/uploads\/2022\/06\/dark-theme-streaming-1024x493.jpg 1024w, https:\/\/www.omatech.com\/blog\/wp-content\/uploads\/2022\/06\/dark-theme-streaming-1536x739.jpg 1536w\" sizes=\"(max-width: 782px) 100vw, 782px\" \/><\/a><\/h2>\n<h2><span class=\"ez-toc-section\" id=\"Desventajas_del_modo_oscuro\"><\/span>Desventajas del modo oscuro<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Como cualquier elecci\u00f3n de dise\u00f1o, el modo oscuro tiene algunos inconvenientes.<\/p>\n<ul>\n<li><strong>Efecto visual de menos espacio<\/strong>. El <em>dark mode<\/em> deja en fuera de juego una de las mejores buenas pr\u00e1cticas del dise\u00f1o gr\u00e1fico. En concreto, se trata de jugar con los blancos, para conseguir dise\u00f1os di\u00e1fanos. Cuando hay mucha claridad, el dise\u00f1o se ve espacioso y el contenido se ve y se lee con nitidez.<\/li>\n<li><strong>Menos conexi\u00f3n emocional<\/strong>. Los colores expresan emociones. De esta manera, los colores claros trasladan emociones positivas. Pues bien, con el modo oscuro la <em>paleta<\/em> de colores se reduce y los colores claros pierden protagonismo. Como resultado, no es tan fuerte la conexi\u00f3n emocional con el usuario del sitio web y con el consumidor de la marca.<\/li>\n<li><strong>Dif\u00edcil lectura de textos muy largos<\/strong>. Si tienes que leer textos muy largos, el modo oscuro tiene sus h\u00e1ndicaps. La explicaci\u00f3n es que tus pupilas se tienen que dilatar, lo que puede distorsionar y afectar la capacidad de los ojos para enfocar la pantalla.<\/li>\n<li><strong>Falta de costumbre de leer sobre fondo negro<\/strong>. Desde que hay papel, estamos acostumbrados a leer textos sobre fondos claros. Por ello, el modo oscuro podr\u00eda parecernos menos natural que un dise\u00f1o claro.<\/li>\n<li><strong>Mala opci\u00f3n si hay mucha luz natural<\/strong>. Se trata de una desventaja obvia. Si es bueno para sitios y momentos con poca luz, no puede ser bueno cuando hay mucha luz disponible.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>El modo oscuro puede mejorar el dise\u00f1o de webs y aplicaciones. Adem\u00e1s, es una opci\u00f3n de dise\u00f1o que facilita la visibilidad cuando falta luz. <\/p>\n","protected":false},"author":14,"featured_media":4652,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[10],"tags":[],"class_list":["post-4649","post","type-post","status-publish","format-standard","has-post-thumbnail","category-accessibilitat"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.9 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Ventajas del dise\u00f1o web con modo oscuro<\/title>\n<meta name=\"description\" content=\"El modo oscuro puede mejorar el dise\u00f1o de webs y aplicaciones. Adem\u00e1s, es una opci\u00f3n de dise\u00f1o que facilita la visibilidad cuando falta luz.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.omatech.com\/blog\/2022\/06\/23\/ventajas-del-diseno-web-con-modo-oscuro\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Ventajas del dise\u00f1o web con modo oscuro\" \/>\n<meta property=\"og:description\" content=\"El modo oscuro puede mejorar el dise\u00f1o de webs y aplicaciones. Adem\u00e1s, es una opci\u00f3n de dise\u00f1o que facilita la visibilidad cuando falta luz.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.omatech.com\/blog\/2022\/06\/23\/ventajas-del-diseno-web-con-modo-oscuro\/\" \/>\n<meta property=\"og:site_name\" content=\"El blog de Omatech\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Omatech\" \/>\n<meta property=\"article:published_time\" content=\"2022-06-23T08:26:41+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-06-23T14:24:58+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.omatech.com\/blog\/wp-content\/uploads\/2022\/06\/barcelona-noche.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"2362\" \/>\n\t<meta property=\"og:image:height\" content=\"1548\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Manel Torrej\u00f3n\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@omatech\" \/>\n<meta name=\"twitter:site\" content=\"@omatech\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Manel Torrej\u00f3n\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.omatech.com\\\/blog\\\/2022\\\/06\\\/23\\\/ventajas-del-diseno-web-con-modo-oscuro\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.omatech.com\\\/blog\\\/2022\\\/06\\\/23\\\/ventajas-del-diseno-web-con-modo-oscuro\\\/\"},\"author\":{\"name\":\"Manel Torrej\u00f3n\",\"@id\":\"https:\\\/\\\/www.omatech.com\\\/blog\\\/#\\\/schema\\\/person\\\/99206a7097a98e91305ee32d16c679fa\"},\"headline\":\"Ventajas del dise\u00f1o web con &#8216;modo oscuro&#8217;\",\"datePublished\":\"2022-06-23T08:26:41+00:00\",\"dateModified\":\"2022-06-23T14:24:58+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.omatech.com\\\/blog\\\/2022\\\/06\\\/23\\\/ventajas-del-diseno-web-con-modo-oscuro\\\/\"},\"wordCount\":1577,\"publisher\":{\"@id\":\"https:\\\/\\\/www.omatech.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.omatech.com\\\/blog\\\/2022\\\/06\\\/23\\\/ventajas-del-diseno-web-con-modo-oscuro\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.omatech.com\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/06\\\/barcelona-noche.jpg\",\"articleSection\":[\"Accesibilidad\"],\"inLanguage\":\"es\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.omatech.com\\\/blog\\\/2022\\\/06\\\/23\\\/ventajas-del-diseno-web-con-modo-oscuro\\\/\",\"url\":\"https:\\\/\\\/www.omatech.com\\\/blog\\\/2022\\\/06\\\/23\\\/ventajas-del-diseno-web-con-modo-oscuro\\\/\",\"name\":\"Ventajas del dise\u00f1o web con modo oscuro\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.omatech.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.omatech.com\\\/blog\\\/2022\\\/06\\\/23\\\/ventajas-del-diseno-web-con-modo-oscuro\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.omatech.com\\\/blog\\\/2022\\\/06\\\/23\\\/ventajas-del-diseno-web-con-modo-oscuro\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.omatech.com\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/06\\\/barcelona-noche.jpg\",\"datePublished\":\"2022-06-23T08:26:41+00:00\",\"dateModified\":\"2022-06-23T14:24:58+00:00\",\"description\":\"El modo oscuro puede mejorar el dise\u00f1o de webs y aplicaciones. Adem\u00e1s, es una opci\u00f3n de dise\u00f1o que facilita la visibilidad cuando falta luz.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.omatech.com\\\/blog\\\/2022\\\/06\\\/23\\\/ventajas-del-diseno-web-con-modo-oscuro\\\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.omatech.com\\\/blog\\\/2022\\\/06\\\/23\\\/ventajas-del-diseno-web-con-modo-oscuro\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/www.omatech.com\\\/blog\\\/2022\\\/06\\\/23\\\/ventajas-del-diseno-web-con-modo-oscuro\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.omatech.com\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/06\\\/barcelona-noche.jpg\",\"contentUrl\":\"https:\\\/\\\/www.omatech.com\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/06\\\/barcelona-noche.jpg\",\"width\":2362,\"height\":1548,\"caption\":\"Barcelona, de noche.\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.omatech.com\\\/blog\\\/2022\\\/06\\\/23\\\/ventajas-del-diseno-web-con-modo-oscuro\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.omatech.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Ventajas del dise\u00f1o web con &#8216;modo oscuro&#8217;\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.omatech.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.omatech.com\\\/blog\\\/\",\"name\":\"El blog de Omatech\",\"description\":\"Blog\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.omatech.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.omatech.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.omatech.com\\\/blog\\\/#organization\",\"name\":\"Omatech\",\"url\":\"https:\\\/\\\/www.omatech.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/www.omatech.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.omatech.com\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/05\\\/logo_omatech_blog.png\",\"contentUrl\":\"https:\\\/\\\/www.omatech.com\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/05\\\/logo_omatech_blog.png\",\"width\":156,\"height\":33,\"caption\":\"Omatech\"},\"image\":{\"@id\":\"https:\\\/\\\/www.omatech.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/Omatech\",\"https:\\\/\\\/x.com\\\/omatech\",\"https:\\\/\\\/www.instagram.com\\\/omatech\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.omatech.com\\\/blog\\\/#\\\/schema\\\/person\\\/99206a7097a98e91305ee32d16c679fa\",\"name\":\"Manel Torrej\u00f3n\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/958dd2c5f7ea22a87e7ed5122aa16e36a1c09bcb0f7c974c26706f97141036d6?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/958dd2c5f7ea22a87e7ed5122aa16e36a1c09bcb0f7c974c26706f97141036d6?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/958dd2c5f7ea22a87e7ed5122aa16e36a1c09bcb0f7c974c26706f97141036d6?s=96&d=mm&r=g\",\"caption\":\"Manel Torrej\u00f3n\"},\"url\":\"https:\\\/\\\/www.omatech.com\\\/blog\\\/author\\\/mtorrejon\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Ventajas del dise\u00f1o web con modo oscuro","description":"El modo oscuro puede mejorar el dise\u00f1o de webs y aplicaciones. Adem\u00e1s, es una opci\u00f3n de dise\u00f1o que facilita la visibilidad cuando falta luz.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.omatech.com\/blog\/2022\/06\/23\/ventajas-del-diseno-web-con-modo-oscuro\/","og_locale":"es_ES","og_type":"article","og_title":"Ventajas del dise\u00f1o web con modo oscuro","og_description":"El modo oscuro puede mejorar el dise\u00f1o de webs y aplicaciones. Adem\u00e1s, es una opci\u00f3n de dise\u00f1o que facilita la visibilidad cuando falta luz.","og_url":"https:\/\/www.omatech.com\/blog\/2022\/06\/23\/ventajas-del-diseno-web-con-modo-oscuro\/","og_site_name":"El blog de Omatech","article_publisher":"https:\/\/www.facebook.com\/Omatech","article_published_time":"2022-06-23T08:26:41+00:00","article_modified_time":"2022-06-23T14:24:58+00:00","og_image":[{"width":2362,"height":1548,"url":"https:\/\/www.omatech.com\/blog\/wp-content\/uploads\/2022\/06\/barcelona-noche.jpg","type":"image\/jpeg"}],"author":"Manel Torrej\u00f3n","twitter_card":"summary_large_image","twitter_creator":"@omatech","twitter_site":"@omatech","twitter_misc":{"Escrito por":"Manel Torrej\u00f3n","Tiempo de lectura":"7 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.omatech.com\/blog\/2022\/06\/23\/ventajas-del-diseno-web-con-modo-oscuro\/#article","isPartOf":{"@id":"https:\/\/www.omatech.com\/blog\/2022\/06\/23\/ventajas-del-diseno-web-con-modo-oscuro\/"},"author":{"name":"Manel Torrej\u00f3n","@id":"https:\/\/www.omatech.com\/blog\/#\/schema\/person\/99206a7097a98e91305ee32d16c679fa"},"headline":"Ventajas del dise\u00f1o web con &#8216;modo oscuro&#8217;","datePublished":"2022-06-23T08:26:41+00:00","dateModified":"2022-06-23T14:24:58+00:00","mainEntityOfPage":{"@id":"https:\/\/www.omatech.com\/blog\/2022\/06\/23\/ventajas-del-diseno-web-con-modo-oscuro\/"},"wordCount":1577,"publisher":{"@id":"https:\/\/www.omatech.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.omatech.com\/blog\/2022\/06\/23\/ventajas-del-diseno-web-con-modo-oscuro\/#primaryimage"},"thumbnailUrl":"https:\/\/www.omatech.com\/blog\/wp-content\/uploads\/2022\/06\/barcelona-noche.jpg","articleSection":["Accesibilidad"],"inLanguage":"es"},{"@type":"WebPage","@id":"https:\/\/www.omatech.com\/blog\/2022\/06\/23\/ventajas-del-diseno-web-con-modo-oscuro\/","url":"https:\/\/www.omatech.com\/blog\/2022\/06\/23\/ventajas-del-diseno-web-con-modo-oscuro\/","name":"Ventajas del dise\u00f1o web con modo oscuro","isPartOf":{"@id":"https:\/\/www.omatech.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.omatech.com\/blog\/2022\/06\/23\/ventajas-del-diseno-web-con-modo-oscuro\/#primaryimage"},"image":{"@id":"https:\/\/www.omatech.com\/blog\/2022\/06\/23\/ventajas-del-diseno-web-con-modo-oscuro\/#primaryimage"},"thumbnailUrl":"https:\/\/www.omatech.com\/blog\/wp-content\/uploads\/2022\/06\/barcelona-noche.jpg","datePublished":"2022-06-23T08:26:41+00:00","dateModified":"2022-06-23T14:24:58+00:00","description":"El modo oscuro puede mejorar el dise\u00f1o de webs y aplicaciones. Adem\u00e1s, es una opci\u00f3n de dise\u00f1o que facilita la visibilidad cuando falta luz.","breadcrumb":{"@id":"https:\/\/www.omatech.com\/blog\/2022\/06\/23\/ventajas-del-diseno-web-con-modo-oscuro\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.omatech.com\/blog\/2022\/06\/23\/ventajas-del-diseno-web-con-modo-oscuro\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.omatech.com\/blog\/2022\/06\/23\/ventajas-del-diseno-web-con-modo-oscuro\/#primaryimage","url":"https:\/\/www.omatech.com\/blog\/wp-content\/uploads\/2022\/06\/barcelona-noche.jpg","contentUrl":"https:\/\/www.omatech.com\/blog\/wp-content\/uploads\/2022\/06\/barcelona-noche.jpg","width":2362,"height":1548,"caption":"Barcelona, de noche."},{"@type":"BreadcrumbList","@id":"https:\/\/www.omatech.com\/blog\/2022\/06\/23\/ventajas-del-diseno-web-con-modo-oscuro\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.omatech.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Ventajas del dise\u00f1o web con &#8216;modo oscuro&#8217;"}]},{"@type":"WebSite","@id":"https:\/\/www.omatech.com\/blog\/#website","url":"https:\/\/www.omatech.com\/blog\/","name":"El blog de Omatech","description":"Blog","publisher":{"@id":"https:\/\/www.omatech.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.omatech.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Organization","@id":"https:\/\/www.omatech.com\/blog\/#organization","name":"Omatech","url":"https:\/\/www.omatech.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.omatech.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.omatech.com\/blog\/wp-content\/uploads\/2022\/05\/logo_omatech_blog.png","contentUrl":"https:\/\/www.omatech.com\/blog\/wp-content\/uploads\/2022\/05\/logo_omatech_blog.png","width":156,"height":33,"caption":"Omatech"},"image":{"@id":"https:\/\/www.omatech.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/Omatech","https:\/\/x.com\/omatech","https:\/\/www.instagram.com\/omatech\/"]},{"@type":"Person","@id":"https:\/\/www.omatech.com\/blog\/#\/schema\/person\/99206a7097a98e91305ee32d16c679fa","name":"Manel Torrej\u00f3n","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/secure.gravatar.com\/avatar\/958dd2c5f7ea22a87e7ed5122aa16e36a1c09bcb0f7c974c26706f97141036d6?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/958dd2c5f7ea22a87e7ed5122aa16e36a1c09bcb0f7c974c26706f97141036d6?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/958dd2c5f7ea22a87e7ed5122aa16e36a1c09bcb0f7c974c26706f97141036d6?s=96&d=mm&r=g","caption":"Manel Torrej\u00f3n"},"url":"https:\/\/www.omatech.com\/blog\/author\/mtorrejon\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.omatech.com\/blog\/wp-json\/wp\/v2\/posts\/4649","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.omatech.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.omatech.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.omatech.com\/blog\/wp-json\/wp\/v2\/users\/14"}],"replies":[{"embeddable":true,"href":"https:\/\/www.omatech.com\/blog\/wp-json\/wp\/v2\/comments?post=4649"}],"version-history":[{"count":14,"href":"https:\/\/www.omatech.com\/blog\/wp-json\/wp\/v2\/posts\/4649\/revisions"}],"predecessor-version":[{"id":4670,"href":"https:\/\/www.omatech.com\/blog\/wp-json\/wp\/v2\/posts\/4649\/revisions\/4670"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.omatech.com\/blog\/wp-json\/wp\/v2\/media\/4652"}],"wp:attachment":[{"href":"https:\/\/www.omatech.com\/blog\/wp-json\/wp\/v2\/media?parent=4649"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.omatech.com\/blog\/wp-json\/wp\/v2\/categories?post=4649"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.omatech.com\/blog\/wp-json\/wp\/v2\/tags?post=4649"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}