Cómo usar el comprobador
- Elige un color de texto y un color de fondo, o pega sus códigos.
- Lee la relación de contraste y los cuatro resultados que hay debajo.
- Mira la vista previa. Muestra texto grande, texto normal y letra pequeña con tus colores.
- Cuando un nivel no pasa, el comprobador muestra el color de texto y el color de fondo más cercanos que sí pasan. Pulsa Usar para probar uno.
Intercambiar da la vuelta a los colores, por ejemplo para texto blanco en un botón de color. Los colores también quedan en la dirección de la página, así que puedes enviar el enlace a alguien.
Qué significan los números
La relación de contraste compara lo claros que son los dos colores, desde 1:1 (el mismo color) hasta 21:1 (negro sobre blanco). WCAG 2.2, las reglas a las que apuntan la mayoría de las leyes de accesibilidad, fija estos mínimos:
- AA, texto normal: 4,5:1. El nivel al que apuntar en webs, correos y publicaciones.
- AA, texto grande: 3:1. Para texto de al menos 24 px, o 18,66 px en negrita.
- AAA, texto normal: 7:1. El nivel más estricto, bueno para lecturas largas.
- AAA, texto grande: 4,5:1.
Los botones, los iconos y los bordes de los campos de formulario necesitan 3:1 frente a lo que tienen al lado. WCAG nunca redondea hacia arriba, así que 4,49:1 no pasa AA. El comprobador redondea hacia abajo por la misma razón.
Cómo se encuentra la sugerencia
El comprobador mantiene el tono y la intensidad de tu color y mueve solo su luminosidad, más oscuro o más claro, hasta que la relación pasa. Lo hace en OKLCH, donde un paso de luminosidad se ve igual para todos los colores, y elige el cambio más pequeño. Tu azul sigue siendo azul, un poco más profundo. Cuando ninguna luminosidad de ese tono llega al nivel, te lo dice, y la salida es cambiar el otro color.
En redes sociales
Una publicación suele verse de un vistazo, en un móvil pequeño y bajo el sol. Apunta a al menos 4,5:1 en cada línea de texto de una imagen, también en el titular grande. El texto sobre una foto tiene un fondo que cambia de letra en letra, así que ponlo sobre una parte tranquila de la foto o sobre una forma de color liso.
Úsalo en el editor de diseño de Postfjord
En el editor de diseño, añade los colores de tu marca una sola vez en Ajustes, Marca. Mezclar prueba otras combinaciones de tus propios colores y nunca pone texto sobre un color en el que cuesta leer. Aplicar marca conserva el color del texto que está justo sobre una foto, para que siga siendo fácil de leer. Comprueba aquí un par de colores antes de guardarlo en tu marca.
FAQ
¿Qué relación de contraste necesito?
4,5:1 para texto normal y 3:1 para texto grande cumplen WCAG 2.2 AA, el nivel que piden la mayoría de las leyes y guías. 7:1 cumple AAA.
¿Qué cuenta como texto grande?
Texto de al menos 18 puntos, unos 24 píxeles, o de al menos 14 puntos en negrita, unos 18,66 píxeles.
¿Por qué mi color se ve bien pero no pasa?
Tu pantalla, la luz de la habitación y tus ojos son distintos de los de quienes te leen. La relación es una medida que también sirve para personas con vista más débil, y para un móvil bajo el sol.
¿Sirve el comprobador para WCAG 3?
No. WCAG 3 sigue siendo un borrador y su nuevo método de contraste, APCA, puede cambiar. El comprobador usa WCAG 2.2, que es el estándar de hoy.
¿Guarda el comprobador mis colores?
No. Funciona en tu navegador. Los colores solo están en la dirección de la página y no se envía nada a Postfjord.