Paletas de colores de alto contraste, con ratios comprobados

Paletas de colores de alto contraste

Paletas de alto contraste con ratios WCAG | We.Inc

Cinco paletas originales de alto contraste con cada par de texto y botón comprobado según WCAG 2.2, y un probador para ajustar los colores y copiar el CSS.

Una paleta de alto contraste es un conjunto de colores de marca en el que el texto se lee con facilidad sobre su fondo. WCAG 2.2 lo mide como un ratio de 1:1 a 21:1. El texto normal necesita al menos 4.5:1 para el nivel AA y 7:1 para AAA; el texto grande necesita 3:1 y 4.5:1. Las paletas de esta página detallan cada par.

Mínimos de contraste de WCAG 2.2

La mayoría de las webs de paletas muestran muestras bonitas una junto a otra, lo que no dice nada sobre si el texto colocado encima se puede leer. Cada paleta de esta página asigna una función a cada color (fondo, texto, texto secundario, acento, texto sobre el acento) y comprueba los pares que de verdad combinarías en una página.

Preguntas frecuentes

¿Qué ratio de contraste se considera alto contraste?

No existe una única línea oficial llamada alto contraste. El nivel AA de WCAG pide 4.5:1 para el texto normal y el nivel AAA pide 7:1, así que muchos diseñadores toman 7:1 para el texto principal como objetivo de alto contraste.

¿Qué tamaño se considera texto grande?

WCAG considera grande el texto de al menos 18 puntos, o 14 puntos en negrita. La explicación del W3C los sitúa en unos 24px y 18.5px en píxeles CSS.

¿Puedo redondear 4.47 a 4.5?

No. El W3C indica que el ratio no se redondea, así que un par con 4.499:1 no cumple 4.5:1. Por eso el probador trunca los valores.

¿Los botones y los iconos también necesitan contraste?

Sí. El criterio de conformidad 1.4.11 de WCAG 2.2 pide al menos 3:1 entre las partes de los controles y los gráficos con significado y los colores que los rodean.

¿Mi logotipo tiene que cumplirlo?

No. El texto que forma parte de un logotipo o nombre de marca no tiene requisito de contraste según 1.4.3. Todo lo demás de la página a su alrededor sí lo tiene.

Por qué cinco funciones y no cinco muestras

Adaptar una paleta a tu marca

Las cinco paletas y sus ratios

Los ratios se calculan con la fórmula de WCAG 2.2 y se muestran truncados a dos decimales.

Todos los pares comprobados de las cinco paletas

Usa una paleta en tu CSS

Tinta sobre papel como propiedades personalizadas de CSS

Nombra las variables por su función, no por su color, para que cambiar de paleta más adelante sea una edición por línea.

La fórmula de contraste en JavaScript

El mismo cálculo que ejecuta el probador, escrito a partir de la definición de luminancia relativa del W3C.

Probador de paletas

Elige una paleta y cambia cualquier color. Cada par se vuelve a comprobar mientras escribes.

Paleta de partida

Tinta sobre papel

Turno de noche

Libro del bosque

Azul puerto

Arcilla cálida

Fondo

Texto principal

Texto secundario

Texto sobre el acento

Contraste de cada par de esta paleta

{a} sobre {b}

Cumple

No cumple

No es un color hexadecimal

Horario de apertura

Abierto de martes a sábado, de 9 a 5. Se atiende sin cita antes del mediodía.

Cerrado los días festivos.

Reserva una visita

Copiar variables CSS

Copiado.

No se pudo copiar. Selecciona el código y cópialo a mano.

Los {n} pares alcanzan AA para texto normal.

{k} de {n} pares no llegan a 4.5:1 para texto normal.

Todo se calcula en tu navegador.

Empieza gratis · Sin tarjeta de crédito

Relacionado: Guías

Producto

Para quién es

Funciones

Recursos

Empresa

Mapa del sitio