¿Por qué no deberíamos usar el color negro?

La accesibilidad de los colores puros y por que deberiamos tener cuidado de donde implementarlos.

by Laura Celis Ballesta Date: 12-05-2023 css

A día de hoy es cada vez más frecuente que las páginas cuenten con la opción de ponerlas en modo oscuro, o que directamente basen su estética en los colores negros o con mucho contraste, pero la gran mayoría de personas siguen utilizando colores puros para implementar este tipo de estilos a su web.

Con color puro nos referimos a aquellos que no poseen en su constitución ninguna mezcla de grises, es decir cuando están en su máxima saturación, como por ejemplo podría ser el blanco(#fff) o el negro(#000).
Según estudios recientes se ha descubierto que la diferencia de contraste entre estos pueden llegar a causar fatiga visual, y como diseñadores debemos intentar reducir al máximo posible estos daños.

Por mucho que estos colores generen mucho contraste entre ellos y visualmente podamos pensar que es correcto, el blanco tiene un 100% de nivel de brillo y el negro un 0% esta diferencia hace que los ojos tengan que trabajar más para adaptarse al contraste y después de largos periodos frente al ordenador puede generarnos tensión en los ojos y nos puede sobrestimular la vista.

Entonces, ¿Qué debemos hacer?

En vez de utilizar blanco sobre negro o al contrario, se recomienda utilizar variantes de colores que no lleguen al tono, es decir, en vez de utilizar el negro puro(#000) para el fondo podemos utilizar un tono de gris oscuro como por ejemplo (#121212), y en vez de usar el blanco puro(#fff) para el texto se puede utilizar un tono de gris claro(#ececec).

Black background example

Ya no solo debemos de tener cuidado con estos dos colores, utilizar tonos demasiado saturados encima de tonos demasiado oscuros también puede generar conflicto, por lo que siempre debemos de asegurarnos que los colores no queden demasiado "neon" o "fluorescentes".

Así lograremos que el contraste no sea demasiado excesivo y que el usuario pueda estar más tiempo enfrente de la pantalla.

Contraste equilibrado mejor que contraste alto

Obviamente sabemos que tener un alto contraste entre los colores de tu página hace que mejore la legibilidad y la accesibilidad, pero también hemos visto que tener un contraste demasiado excesivo al final puede ocasionar todos los problemas que con esto estamos intentando evitar.

Por lo que siempre debemos mantener el equilibrio entre los tonos y siempre que tengamos alguna duda podemos comprobarlo en algún corrector de contraste como Contrast Checker - WebAIM.

Espero que te haya resultado útil!

 
by Laura Celis Ballesta Date: 12-05-2023 css visitas : 1072  
 
 
 
 

Artículos relacionados

Nuevas unidades de ventana gráfica - CSS

'Intercop 2022' es un proyecto anunciado por Google, Microsoft, Apple y la fundación Mozzilla para que todos los navegadores ofrezcan la misma experiencia web. El proyecto tiene 15 áreas de enfoque…

Container queries: libera el poder de escribir media queries

El diseño web responsivo ha sido una práctica común durante años, permitiendo que los sitios se adapten y se vean bien en una variedad de dispositivos y tamaños de pantalla.…

Utilidades de los selectores :where y :is

Si aún no has oído hablar de estos selectores de pseudoclases, no te preocupes, aquí te explicamos el funcionamiento y dejamos varios usos que nos pueden ser muy útiles a…

Cómo centrar un Div con CSS - 10 formas diferentes

Para los desarrolladores web, a veces centrar un div parece uno de los trabajos más difíciles del mundo. Pues ya no. En este artículo, aprenderás 10 formas diferentes de centrar un…

Como hacer tu propio cursor personalizado para tu web

Cuando empecé a ojear webs distintas y originales para aprender de ellas, de las primeras cosas que me llamaron la atención fue que algunas de ellas tenían sus propios cursores,…

Explorando la API CSS Paint: Redondeo de formas parte 2

Vamos con la segunda parte de nuestro artícul sobre como manejar la API Paint para redondar bordes complejos   Control de los radios   En todos los ejemplos que hemos visto, siempre consideramos un…

Explorando la API de CSS Paint: Redondeo de formas parte 1

Añadir bordes a las formas complejas es un auténtico rollo (a veces), pero redondear las esquinas de las formas complejas es un suplicio jejeje. Por suerte, la API de pintura…

Las ventanas gráficas o viewports grandes, pequeñas y dinámicas

Recientemente se han introducido algunos cambios en materia de unidades de ventana gráfica o viewport. Las novedades -que forman parte de la especificación de valores y unidades CSS de nivel 4-…

Imágenes de fondo responsivas con relación de aspecto fijo o fluido

¿Cuál es la forma más fácil de escalar las imágenes de fondo en los diseños responsivos? Utilizamos una antigua técnica y la mejoramos para cambiar con fluidez la ratio de…

Comenzando con Bootstrap-Vue paso a paso

Hoy te mostraremos cómo usar BootstrapVue, describiremos el proceso de instalación y mostraremos la funcionalidad básica. El proyecto está basado en el framework CSS más popular del mundo - Bootstrap, para…

Bootstrap 5 beta2. ¿Qué ofrece?

Dado que el lanzamiento de Bootstrap 4 es de tres años, en este artículo vamos a presentar lo que es nuevo en el marco más popular del mundo para la…

Creación de un sencillo spinner-loader CSS

En el artículo de hoy mostraremos cómo animar un loader básico que gira cuando se define alguna acción predefinida, como cargar una imagen. Eso se puede utilizar en un sitio…

Clicky