Contrast Checker: comprueba el contraste de color según las WCAG

Puedes usar el Contrast Checker gratis y sin registrarte. La relación de contraste se calcula directamente en tu navegador; tus colores no se envían a ningún servidor.

La herramienta calcula primero la luminancia relativa (L) de ambos colores con la fórmula de las WCAG 2.x. Después divide la L del color más claro más 0.05 entre la L del más oscuro más 0.05. El resultado va de 1:1 (colores idénticos) a 21:1 (negro sobre blanco); el orden de los colores no importa. Cuanto mayor sea el valor, más fácil será leer el texto sobre el fondo.

Para el nivel AA, el texto normal necesita al menos 4.5:1 y el texto grande, 3:1. El nivel AAA, más estricto, exige 7:1 para texto normal y 4.5:1 para texto grande. Los componentes de interfaz y los elementos gráficos, como bordes de campos de entrada o iconos, necesitan 3:1. La mayoría de los requisitos legales hacen referencia al nivel AA; AAA es un nivel más estricto y voluntario.

Se considera texto grande a partir de 18pt (24px), o de 14pt (18.66px) si también está en negrita. Para el texto grande se exigen relaciones de contraste mínimas más bajas (3:1 en lugar de 4.5:1 para AA), porque las letras más grandes siguen siendo legibles con menos contraste.

Valores hexadecimales con o sin #, de tres o seis dígitos (#fff o #ffffff), rgb() y rgba(), así como valores simples como 34, 34, 34. También puedes elegir cualquier color con el selector. En rgba(), se ignora el valor alfa y la herramienta calcula con el color opaco. Si introduces un valor no válido, el campo se marca hasta que lo corrijas.

Si tu combinación no alcanza el nivel AA para texto normal (4.5:1), la herramienta te sugiere con un clic el color más cercano que sí lo cumple. Para ello, solo modifica la luminosidad del texto o del fondo, según cuál necesite menos cambios. Usa «Aplicar» para adoptar la sugerencia. Ejemplo: #777777 sobre #ffffff alcanza 4.48:1; la sugerencia #767676 alcanza 4.54:1.

Sí. El Contrast Checker incluye automáticamente los colores de primer plano y de fondo actuales en la URL. Si copias el enlace de la barra de direcciones, se abrirá la misma combinación. Los enlaces bajo la vista previa también te permiten enviar el color de primer plano al simulador de daltonismo o al generador de esquemas de color.

Leyes como la Ley Europea de Accesibilidad (EAA) y sus transposiciones nacionales, o la ADA en Estados Unidos, obligan a muchas webs y aplicaciones a cumplir unos requisitos mínimos de accesibilidad y suelen remitirse a las WCAG. Un contraste de texto suficiente es uno de los aspectos que se comprueban con más frecuencia. Esta herramienta no sustituye el asesoramiento jurídico, pero te ayuda a comprobar los valores técnicos de contraste de las WCAG.