1:1 a 21:1 · AA · AAA
Comprobador de contraste
El negro sobre blanco tiene una relación de contraste WCAG de 21:1, la máxima posible, y el blanco sobre #0060fd tiene 5.13:1. Escribe un color de texto y un fondo para comprobar los tuyos.
- #000000 on #ffffff = 21.00:1
- #ffffff on #0060fd = 5.13:1
- #767676 on #ffffff = 4.54:1
- #777777 on #ffffff = 4.47:1
La relación y las cinco comprobaciones se actualizan mientras escribes. La relación se recorta a dos decimales, nunca se redondea hacia arriba, así que 4.499 se muestra como 4.49:1 y no supera la comprobación de 4.5:1.
Scanned by 
NortonTM Safe Web
De un vistazo
- Precio
- Sin coste
- Cuenta
- No hace falta
- Subida
- No aplica: escribes colores y nada se envía a ningún sitio
- Fórmula
- (luminancia más clara + 0.05) ÷ (luminancia más oscura + 0.05)
- Umbrales
- AA 4.5:1 texto normal y 3:1 texto grande; AAA 7:1 texto normal y 4.5:1 texto grande; 3:1 para elementos de interfaz
- Norma
- Definiciones de WCAG 2.2 de luminancia relativa y relación de contraste
Relaciones de contraste de pares conocidos
Estas filas las produjo el mismo código que el comprobador. Una marca de verificación significa que el par cumple el requisito; una cruz, que no lo cumple.
| Color del texto | Fondo | Relación | AA normal | AA grande | AAA normal | AAA grande | Elementos de interfaz |
|---|---|---|---|---|---|---|---|
| #000000 | #ffffff | 21.00:1 | ✓ | ✓ | ✓ | ✓ | ✓ |
| #ffffff | #0060fd | 5.13:1 | ✓ | ✓ | ✗ | ✓ | ✓ |
| #767676 | #ffffff | 4.54:1 | ✓ | ✓ | ✗ | ✓ | ✓ |
| #777777 | #ffffff | 4.47:1 | ✗ | ✓ | ✗ | ✗ | ✓ |
| #0060fd | #ffffff | 5.13:1 | ✓ | ✓ | ✗ | ✓ | ✓ |
| #ffffff | #ffffff | 1.00:1 | ✗ | ✗ | ✗ | ✗ | ✗ |
| Comprobación | Relación mínima |
|---|---|
| AA, texto normal | 4.5:1 |
| AA, texto grande | 3:1 |
| AAA, texto normal | 7:1 |
| AAA, texto grande | 4.5:1 |
| AA, elementos de interfaz y gráficos | 3:1 |
Cómo comprobar un par de colores
Escribe los dos colores
Escribe el color del texto y el del fondo en cualquier notación CSS, o usa los selectores. El botón de intercambio los cambia entre sí, lo que resulta útil para texto claro sobre fondo oscuro.
Lee la relación
La relación va de 1:1 (colores idénticos) a 21:1 (negro sobre blanco). La muestra bajo los campos enseña el par a 16 px y a 24 px, para que juzgues el resultado con tus propios ojos.
Mira las cinco comprobaciones
Cada recuadro indica Cumple o No cumple para un requisito WCAG: AA y AAA para texto normal, AA y AAA para texto grande, y AA para elementos de interfaz. Si el texto normal no cumple AA, la página sugiere el color de texto más cercano que sí cumple.
Cómo se calcula la relación de contraste
WCAG mide el contraste mediante la luminancia relativa, el brillo de un color de 0 (negro) a 1 (blanco). Cada canal de rojo, verde y azul se divide entre 255; un valor de hasta 0.04045 se divide entre 12.92, y un valor mayor se eleva a una potencia: (valor + 0.055) dividido entre 1.055, y luego elevado a 2.4. La luminancia es entonces 0.2126 por el rojo más 0.7152 por el verde más 0.0722 por el azul, lo que refleja con qué intensidad responde el ojo a cada uno. La relación de contraste es la luminancia más clara más 0.05, dividida entre la luminancia más oscura más 0.05.
WCAG 2 pide al menos 4.5:1 para texto normal y 3:1 para texto grande en el nivel AA, y 7:1 y 4.5:1 en el nivel AAA. El texto grande es de al menos 18 puntos, que son 24 píxeles CSS, o de al menos 14 puntos en negrita, unos 18.66 píxeles. El criterio de éxito 1.4.11 pide 3:1 para las partes de una interfaz y los gráficos que un lector necesita ver, como el borde de un campo o la línea de un gráfico. La relación se compara con cada umbral sin redondear. Si un color tiene transparencia, antes de medir se coloca un fondo transparente sobre blanco y un color de texto transparente sobre el fondo. Esta página implementa solo WCAG 2.x; no calcula APCA, que se plantea para una versión futura de las pautas.
Preguntas sobre el contraste
¿Qué relación de contraste exige WCAG para el texto?
En el nivel AA, el texto normal necesita al menos 4.5:1 y el texto grande al menos 3:1. En el nivel AAA las cifras son 7:1 para el texto normal y 4.5:1 para el texto grande. La relación se mide entre el color del texto y el color que tiene justo detrás.
¿Qué cuenta como texto grande?
WCAG define el texto grande como el de al menos 18 puntos, que son 24 píxeles CSS, o el de al menos 14 puntos en negrita, que son unos 18.66 píxeles CSS. Todo lo más pequeño cuenta como texto normal y necesita la relación más alta.
¿Cuál es el gris más claro que cumple AA sobre blanco?
#767676 sobre blanco tiene una relación de 4.54:1 y cumple la comprobación de 4.5:1 para texto normal. El siguiente gris más claro, #777777, obtiene 4.47:1 y no cumple. Para 7:1 (AAA), el gris más claro es #595959, que obtiene 7.00:1.
¿Por qué 4.49 no cumple si parece 4.5?
Las comprobaciones comparan la relación exacta con el umbral. Una relación de 4.499 está por debajo de 4.5, así que no cumple, y la página la muestra como 4.49:1 en lugar de redondearla hacia arriba. El rojo puro sobre blanco es un ejemplo real: 3.99:1 no cumple la comprobación de 4.5:1 para texto normal, aunque se acerque.
¿Qué contraste necesitan los iconos, los bordes y los campos de formulario?
El criterio de éxito 1.4.11 Contraste de elementos no textuales, añadido en WCAG 2.1, pide al menos 3:1 entre las partes de una interfaz o un gráfico que un lector necesita ver, como el borde de un campo, un anillo de foco o la línea de un gráfico, y los colores contiguos. Los controles deshabilitados y los gráficos puramente decorativos quedan exentos.
¿Una relación que cumple hace accesible una página?
No. El contraste es un requisito entre muchos. También importan el tamaño y el grosor de la fuente, el interlineado, que el color por sí solo no transmita significado, la visibilidad del foco, el texto sobre imágenes y degradados, y cómo ven una página las personas con distintos tipos de visión del color. Usa este resultado como un dato más y prueba la página con contenido real.