Calcule le ratio de contraste entre une couleur de texte et une couleur de fond, et vérifie s'il respecte les directives d'accessibilité WCAG 2.1. Le ratio va de 1:1 (aucun contraste) à 21:1 (noir sur blanc).
Choisissez la couleur du texte et la couleur du fond avec les sélecteurs. L'aperçu et le ratio se mettent à jour instantanément pendant que vous ajustez les couleurs.
El ratio de contraste mide cuánta diferencia de luz hay entre los dos colores. Se calcula en dos pasos:
• Luminancia relativa — a cada color se le calcula la luz que percibe el ojo con la fórmula WCAG: se pasa cada canal R, G y B a escala 0-1, se corrige la gamma (linealización) y se combinan ponderados 0.2126·R + 0.7152·G + 0.0722·B (el verde pesa más porque el ojo lo ve más brillante). El resultado va de 0 (negro) a 1 (blanco).
• Ratio — con la luminancia del color más claro (L1) y la del más oscuro (L2) se aplica (L1 + 0.05) / (L2 + 0.05). El +0.05 evita divisiones extremas. Es simétrico: da igual cuál sea el texto y cuál el fondo, el ratio es el mismo.
Chaque combinaison est évaluée selon quatre critères : AA normal (≥4.5:1), AA grand (≥3:1), AAA normal (≥7:1) et AAA grand (≥4.5:1). AA est le minimum recommandé ; AAA est le niveau le plus exigeant.
Los umbrales de arriba son para texto. Los elementos no textuales tienen su propia regla WCAG (criterio 1.4.11): bordes de campos, iconos, controles de formulario y las partes significativas de un gráfico necesitan un contraste de al menos 3:1 frente a lo que tienen al lado. Esta herramienta muestra las cuatro insignias de texto; para un icono o un borde, fíjate en que el ratio llegue a 3:1 aunque la insignia de «AA normal» falle.
On considère comme grand texte celui de 18pt ou plus (environ 24px), ou celui de 14pt ou plus (environ 18.67px) en gras. Le grand texte exige moins de contraste que le texte normal.
Debajo del ratio hay cuatro filas, una por criterio, con una insignia:
• PASS (verde, con un tic) — esa combinación cumple ese nivel.
• FAIL (rojo, con una cruz) — no lo cumple; hay que aumentar el contraste.
Como los umbrales son crecientes, si pasa AAA normal (7:1) pasa también todos los demás. Un texto que solo pasa «AA grande» (3:1) no es válido para texto normal.
Si una combinación falla:
• Oscurece el texto o aclara el fondo (o al revés): cuanto mayor sea la diferencia de luminancia, mayor el ratio.
• No te fíes solo del tono — dos colores vivos (rojo sobre verde) pueden tener un contraste bajísimo pese a «chocar». Lo que cuenta es la luz, no el color.
• El gris medio es traicionero: texto gris claro sobre blanco suele fallar; bájalo hacia negro.
• No uses solo el color para transmitir información (enlaces, errores): acompáñalo de subrayado, icono o texto.
• Ajusta los selectores hasta que la insignia que te interese pase a PASS.
Texte grand = 18pt+ (24px) ou 14pt+ (18.67px) gras