Comprobar o contraste de cores

Escolle a cor do texto e a do fondo para saber se o teu deseño é lexible e accesible. Dámosche a ratio de contraste, se cumpre os niveis AA e AAA das pautas WCAG e, se non chega, a cor de texto máis parecida que si cumpre.

Texto e fondo

Acepta HEX, rgb(), hsl(), oklch() ou nomes CSS. Se o texto é semitransparente, mestúrase co fondo.

Texto grande de exemplo

Este é un texto de tamaño normal. A accesibilidade web consiste en que calquera persoa, tamén con baixa visión ou daltonismo, poida ler e usar a túa páxina.

Botón

Ratio de contraste

Texto normal (4,5:1) AA
Texto normal (7:1) AAA
Texto grande (3:1) AA
Texto grande (4,5:1) AAA
Iconas e compoñentes (3:1) AA

Que é a ratio de contraste?

A ratio de contraste compara a luminancia relativa de dúas cores e vai de 1:1 (a mesma cor) a 21:1 (negro sobre branco). Defínena as pautas de accesibilidade WCAG 2 do W3C e é a referencia que usan as leis de accesibilidade (en España, o RD 1112/2018 e a norma EN 301 549) e ferramentas como Lighthouse.

Niveis AA e AAA

AA é o nivel esixido habitualmente: 4,5:1 para o texto normal e 3:1 para o texto grande (a partir de 24 px, ou 18,66 px en negra). AAA é o nivel reforzado: 7:1 e 4,5:1 respectivamente. As iconas, os bordos dos campos de formulario e outros compoñentes da interface precisan polo menos 3:1 fronte ás cores que os rodean.

Os logotipos e o texto puramente decorativo ou de elementos desactivados están exentos.

Como mellorar o contraste

Case sempre abonda con escurecer o texto (ou aclaralo sobre fondos escuros) sen cambiar de ton: por iso che propoñemos a mesma cor con outra luminosidade, calculada no espazo OKLCH para que o cambio sexa o máis pequeno posible. Evita o texto gris claro sobre branco e o texto sobre imaxes sen unha capa escura intermedia.