{"id":14855,"date":"2022-09-01T01:00:00","date_gmt":"2022-08-31T23:00:00","guid":{"rendered":"https:\/\/graphiste.com\/blog\/?p=14855"},"modified":"2025-08-19T17:15:33","modified_gmt":"2025-08-19T15:15:33","slug":"web-design-guide-mode-sombre","status":"publish","type":"post","link":"https:\/\/graphiste.com\/blog\/web-design-guide-mode-sombre\/","title":{"rendered":"Web design\u00a0: le guide du mode sombre"},"content":{"rendered":"

Limitant la fatigue oculaire et offrant plus de confort dans les environnements peu lumineux, le mode sombre est d\u00e9j\u00e0 utilis\u00e9 par les designers des sites et applications les plus connues. <\/strong>Google Maps, Twitter ou encore Pinterest le proposent \u00e0 leurs utilisateurs.<\/p>\n

Pourquoi et comment l\u2019utiliser ?<\/strong> Les r\u00e9ponses sont dans cet article, qui vous fera peut-\u00eatre passer du c\u00f4t\u00e9 obscur de la force !<\/p>\n

 <\/p>\n

Pourquoi proposer un mode sombre \u00e0 vos utilisateurs ?<\/h2>\n

\"dark<\/p>\n

1. Pour l’image<\/h3>\n

Souvent associ\u00e9 au pouvoir, \u00e0 l\u2019\u00e9l\u00e9gance et au prestige, le noir<\/a> (ou le gris fonc\u00e9, nous y reviendrons) peut \u00eatre une couleur adapt\u00e9e pour les entreprises dont les secteurs d’activit\u00e9 sont le sport ou le luxe. Les services de streaming et les consoles de jeux optent \u00e9galement pour des interfaces de ce type pour matcher avec l\u2019ambiance tamis\u00e9e de votre salon.<\/p>\n

2. Pour des pages avec peu de texte<\/h3>\n

Le texte noir sur fond blanc ayant une meilleure lisibilit\u00e9, il est conseill\u00e9 de mettre les grands blocs de texte sous ce format. Pour des pages plus l\u00e9g\u00e8res textuellement, le mode sombre<\/a> peut en revanche \u00eatre appropri\u00e9.<\/p>\n

3. Pour soulager les yeux<\/h3>\n

\"\"<\/p>\n

Une interface sombre peut r\u00e9duire la fatigue oculaire, et d’autant plus pour les applications et les sites Web ayant vocation \u00e0 \u00eatre utilis\u00e9s pour une longue dur\u00e9e ou la nuit.<\/p>\n

Le pourquoi \u00e9tant r\u00e9gl\u00e9, passons au comment ! De nombreuses techniques et conseils existent si vous souhaitez passer votre site ou application en mode sombre.<\/p>\n

 <\/p>\n

Pr\u00e9f\u00e9rez le gris fonc\u00e9<\/h2>\n

\"\"
\nUn design en mode sombre n\u2019a pas \u00e0 \u00eatre d’un blanc immacul\u00e9 sur un noir des plus profonds. Ce contraste \u00e9lev\u00e9 risque m\u00eame d\u2019\u00eatre douloureux \u00e0 regarder<\/strong>. Privil\u00e9giez plut\u00f4t le gris<\/a> fonc\u00e9, qui r\u00e9duit la fatigue oculaire et le contraste entre le texte et votre fond. Cette nuance permet d\u2019offrir un panel de couleurs, mises en avant et en profondeur, et plus faciles \u00e0 voir que sur un noir pur.<\/p>\n

Material design recommande #121212<\/em> comme fond de template en mode sombre.<\/strong> Nul doute qu’il vous offrira tous les avantages ci-dessus cit\u00e9s tout en laissant une impression de noir \u00e0 un \u0153il non averti !<\/p>\n

 <\/p>\n

Choisissez vos couleurs primaire et secondaire<\/h2>\n

\"dark<\/p>\n

Pour votre couleur primaire<\/a>, optez pour une couleur claire avec assez de saturation pour ressortir quelle que soit la situation. En revanche, elle ne doit pas \u00eatre trop satur\u00e9e pour \u00e9viter qu\u2019elle ne \u00ab vibre \u00bb sur fond sombre.<\/p>\n

Cette couleur sera utilis\u00e9e pour vos fonds, vos bordures et votre texte. Assurez-vous donc que la lisibilit\u00e9 soit optimale !<\/p>\n

En ce qui concerne la couleur secondaire, deux choix s\u2019offrent \u00e0 vous : une teinte plus discr\u00e8te<\/strong> qui met en valeur votre couleur primaire ou un ton tout aussi clair. <\/strong>Le deuxi\u00e8me choix est cependant exclu si votre interface a un besoin important de prioriser certains \u00e9l\u00e9ments.<\/p>\n

 <\/p>\n

Calibrez vos blancs<\/h2>\n

\"calibre<\/p>\n

La couleur de base pour un mode sombre est le blanc pur (#FFFFFF)<\/em> mais cette teinte aurait tendance \u00e0 \u00ab vibrer \u00bb sur un fond fonc\u00e9. Google Material Design<\/strong> recommande d\u2019utiliser un blanc l\u00e9g\u00e8rement plus fonc\u00e9 :<\/p>\n