Contraste de color para diseño de interfaz

Se estima que hay 285 millones de personas en el mundo con discapacidad visual. Este número incluye a personas desde personas legalmente ciegas hasta personas con visión inferior a 20/20.

Esta breve guía, escrita durante la creación de la aplicación Contrast MacOS, lo ayudará a alcanzar los estándares de accesibilidad descritos en WCAG 2.0, específicamente con el color de primer plano y de fondo cuando se trata de texto en pantallas digitales.

TL; DR

  • Error: el texto no tiene suficiente contraste con el fondo. Probablemente quieras oscurecerlo. Este es un puntaje de menos de 3.0.
  • AA grande: la cantidad de contraste aceptable más pequeña para tamaños de letra de 18px y mayores. Este es un puntaje de al menos 3.0.
  • AA: este es el punto ideal para tamaños de texto inferiores a ~ 18 puntos. Este es un puntaje de al menos 4.5.
  • AAA: este es un contraste mejorado con una puntuación de al menos 7.0. Piense más tiempo en los artículos que se leerán durante un período de tiempo significativo.

Los elementos decorativos o el texto que forma parte de un logotipo o marca no tienen requisitos mínimos de contraste.

Hay otros factores a tener en cuenta para cumplir totalmente con los estándares AA y AAA, pero esto le dará un buen comienzo.

Puntuación y proporción

Hay una ecuación proporcionada por las WCAG (Pautas de accesibilidad al contenido web) que determina estos dos valores.

  1. El marcador
  2. El radio

La ecuación genera un número entre 1 y 21, siendo 21 la mayor cantidad de contraste (piense en texto negro y fondo blanco) y 1 sin contraste, blanco sobre blanco.

La salida de contraste entre dos colores cualquiera caerá en algún lugar del espectro entre 1–21. De ahí es de donde se derivan los puntajes.

Técnicamente hay 5 puntajes.

  1. AAA
  2. AAA grande
  3. Automóvil club británico
  4. AA grande
  5. Fallar

AAA

AAA significa que su texto tiene una relación de contraste de al menos 7.0. Por ejemplo, texto 595959 en un fondo ffffff y viceversa.

Tenga en cuenta que para lograr una verdadera calificación AAA, la sección 1.4.8.1 del WCAG también establece que "el usuario puede seleccionar los colores de primer plano y de fondo".

Entonces, a menos que esté planeando crear esa funcionalidad en su sitio web o aplicación también, realmente no hay razón para disparar por más que AA, en mi humilde opinión. Por supuesto que hay advertencias. Su copia del cuerpo puede verse mejor y ser más legible si está alcanzando un puntaje AAA, así que tome este consejo con un grano de sal.

Este puntaje se deriva para personas con baja visión de 20/80. Este puntaje de agudeza visual a menudo no se puede corregir con anteojos, etc.

Nota al margen, 20/200 es legalmente ciego.

ISO 9241–3 Requisitos ergonómicos para el trabajo de oficina con terminales de pantalla visual (VDT) - Parte 3: Requisitos de pantalla visual. Enmienda 1

AAA grande

AAA Grande significa que su texto grande tiene una relación de contraste de 4.5 o superior, que es el mismo puntaje que AA, por lo que no verá AAA Grande como un puntaje visible en la aplicación.

El WCAG describe 14 puntos en negrita y 18 puntos como tamaños "grandes". Esto se traduce aproximadamente en 18.5px en negrita y 24px @ 1x. Esta es una aproximación ya que los tamaños de los formularios pueden variar mucho entre los tipos de letra.

Si nunca antes ha verificado sus puntajes de contraste, se sorprenderá de lo oscuro que necesita para golpear AA para tamaños pequeños. Le insto a que siga adelante: sus usuarios probablemente no lo agradecerán, pero disfrutarán de texto legible en sus diseños. Es justo lo que hay que hacer.

Automóvil club británico

AA significa que su texto tiene una relación de contraste de al menos 4.5 o superior. Por ejemplo, 757777 texto sobre un fondo ffffff y viceversa.

Existe evidencia empírica de que la agudeza visual de 20/40 se asocia con una pérdida de sensibilidad al contraste de aproximadamente 1.5, que es donde se deriva el puntaje 4.5.

Gittings, NS y Fozard, JL (1986). Cambios relacionados con la edad en la agudeza visual. Gerontología experimental, 21 (4–5), 423–433.
ANSI-HFES-100–1988. Estándar Nacional Americano para la Ingeniería de Factores Humanos de las Estaciones de Trabajo de Terminal de Pantalla Visual, Sección 6, pp. 17-20.

AA grande (AA +)

AA Grande significa que su texto tiene una relación de contraste de al menos 3.0. Por ejemplo, texto 949595 sobre un fondo ffffff.

Este es el nivel mínimo recomendado por ISO-9241–3 y ANSI-HFES-100–1988 para texto estándar y visión normal, que es donde WCAG obtuvo este puntaje.

Tomamos la decisión de abreviar Large a + en la aplicación para que cada puntaje sea similar en longitud de caracteres y no afecte el ancho fijo de la interfaz.

FALLAR

Fallar significa que su texto tiene una relación de contraste de 2.9 o inferior. Esto no se aplica a logotipos, texto en logotipos y otros elementos decorativos.

Muy a menudo, los puntajes fallidos pueden funcionar bien en el contexto de una revisión de diseño estático. Pero en el contexto del uso en el mundo real, estos puntajes fallidos pueden causar serios problemas para la usabilidad de su interfaz.

¿Qué pasa con las aplicaciones móviles y sus grandes pantallas de retina nítidas?

Hay un borrador de trabajo de las pautas de WCAG Mobile que dice ...

Los dispositivos móviles son más propensos que los dispositivos de escritorio / portátiles a usarse en entornos variados, incluidos los exteriores, donde es más probable el resplandor del sol u otras fuentes de iluminación intensa. Este escenario aumenta la importancia del uso de un buen contraste para todos los usuarios y puede agravar los desafíos que los usuarios con baja visión tienen para acceder a contenido con poco contraste en dispositivos móviles ".

Entonces, si bien es probable que sea más fácil ver texto más claro en pantallas de alta resolución en un entorno controlado, el caso de uso para dispositivos móviles es increíblemente impredecible, ya que corre el riesgo de ser súper ligero con texto. La luz solar directa, las habitaciones oscuras y más afectan significativamente la visualización en pantallas móviles.

Más que solo contraste

La accesibilidad es mucho más que solo contraste de color. Aquí hay algunos fragmentos de WCAG, por ejemplo:

1.4.8 Presentación visual: para la presentación visual de bloques de texto, hay un mecanismo disponible para lograr lo siguiente: (Nivel AAA) El usuario puede seleccionar los colores de primer plano y de fondo. El ancho no debe tener más de 80 caracteres o glifos (40 si CJK). El texto no está justificado (alineado con los márgenes izquierdo y derecho). El espaciado entre líneas (al inicio) es al menos espacio y medio dentro de los párrafos, y el espaciado entre párrafos es al menos 1.5 veces mayor que el espaciado entre líneas. Se puede cambiar el tamaño del texto sin tecnología de asistencia hasta un 200 por ciento de una manera que no requiera que el usuario se desplace horizontalmente para leer una línea de texto en una ventana de pantalla completa.

Puede ver que para alcanzar una calificación AAA, su aplicación o sitio debe permitir la selección de colores de primer plano y fondo por parte del usuario. Entonces, incluso si su contraste de color es AAA, eso no significa que todo su producto lo sea.

Si desea ver qué tan profundo es el agujero del conejo WCAG, tome la píldora roja.

Y si desea un súper tonto, una forma fácil de verificar su contraste de color, directamente desde la barra de menú de su Mac, descargue Contraste y comience a diseñar mejores interfaces. Incluso podría divertirse usándolo.

Además, este es el mejor verificador de contraste basado en la web que he encontrado si eres más una persona web.

Contraste utilizado en SketchContraste utilizado en Adobe XDContraste utilizado en IllustratorContraste utilizado con Figma

Esta guía se publicó originalmente en usecontrast.com/guide. El contraste fue diseñado por Matt D. Smith () y desarrollado por Sam Soffes.