Berechnet das Kontrastverhältnis zwischen einer Textfarbe und einer Hintergrundfarbe und prüft, ob es die Barrierefreiheitsrichtlinien WCAG 2.1 erfüllt. Das Verhältnis reicht von 1:1 (kein Kontrast) bis 21:1 (schwarz auf weiß).
Wähle die Textfarbe und die Hintergrundfarbe mit den Auswahlfeldern. Die Vorschau und das Verhältnis werden sofort aktualisiert, während du die Farben anpasst.
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.
Jede Kombination wird nach vier Kriterien bewertet: AA normal (≥4.5:1), AA groß (≥3:1), AAA normal (≥7:1) und AAA groß (≥4.5:1). AA ist das empfohlene Minimum; AAA ist die anspruchsvollste Stufe.
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.
Als großer Text gilt Text ab 18pt (etwa 24px) oder ab 14pt (etwa 18.67px) in Fettschrift. Großer Text erfordert weniger Kontrast als normaler Text.
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.
Großer Text = 18pt+ (24px) oder 14pt+ (18.67px) fett