Calcula o rácio de contraste entre uma cor de texto e uma cor de fundo, e verifica se cumpre as diretrizes de acessibilidade WCAG 2.1. O rácio vai de 1:1 (sem contraste) a 21:1 (preto sobre branco).
Escolhe a cor de texto e a cor de fundo com os seletores. A pré-visualização e o rácio atualizam-se ao instante enquanto ajustas as cores.
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.
Cada combinação é avaliada em quatro critérios: AA normal (≥4.5:1), AA grande (≥3:1), AAA normal (≥7:1) e AAA grande (≥4.5:1). AA é o mínimo recomendado; AAA é o nível mais exigente.
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.
Considera-se texto grande o de 18pt ou mais (uns 24px), ou o de 14pt ou mais (uns 18.67px) a negrito. O texto grande exige menos contraste do que o 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.
Texto grande = 18pt+ (24px) ou 14pt+ (18.67px) negrito