¿Qué es Contrast Finder?

Contrast-Finder es una herramienta que evalúa el contraste entre dos colores (fondo, primer plano) y comprueba si el contraste es aceptable. Cuando el contraste no es aceptable, el objetivo principal es sugerir alternativas de contraste de color válidas.

Contrast-Finder está diseñada para ser utilizada por diseñadores web, desarrolladores web o profesionales de la accesibilidad web para mejorar la facilidad de lectura de páginas HTML en sitios web.

Ayuda / ¿Cómo usar esta herramienta?

La interfaz de Contrast-Finder es un formulario con cinco campos obligatorios.

Color del texto
Color del fondo
Ratio mínimo
Color a editar
Dame

Color del texto / Primer plano

Este es el color del texto. Puedes rellenar este campo con palabras clave de color CSS, un valor hexadecimal, o un valor RGB. El valor proporcionado será previsualizado a la derecha del campo.

Palabras clave de color CSS

Por ejemplo: Black, Silver, YellowGreen, MediumPurple.
Los valores válidos se pueden encontrar en palabras clave de color CSS (desde CSS nivel 1 a CSS nivel 4).

Color con valores hexadecimales

Por ejemplo: #AABBCC. Los valores con formato #ABC también funcionan, el sistema completará el campo automáticamente con el valor #AABBCC. Este campo puede ser usado sin el carácter #, de modo que FFF o FFFFFF funcionarán sin problema.

Colores con valores RGB

Por ejemplo: rgb(255,255,255).
Se puede utilizar la sintáxis abreviada 255,255,255, que será interpretada como rgb(255,255,255).

Color del fondo

Este es el color del fondo.
Este campo funciona exactamente como el campo de color de texto.

Ratio mínimo

Hay tres posibles valores: 3, 4.5 y 7.

¿Cómo escoger un ratio? Dependerá de los siguientes elementos:

Nivel de accesibilidad deseado: AA o AAA.
Tamaño del texto.
¿El texto está en negrita?

Nivel AA

Dos elementos (tamaño y negrita) nos dan cuatro combinaciones:

Texto sin negrita + tamaño de texto < 24px: ratio = 4.5
Texto sin negrita + tamaño de texto > 24px: ratio = 3
Texto con negrita + tamaño de texto < 19px: ratio = 4.5
Texto con negrita + tamaño de texto > 19px: ratio = 3

Nivel AAA

Para el nivel AAA la lógica es la misma, pero el ratio se incrementa de la siguiente manera:

El ratio 4.5 se convierte en 7
El ratio 3 se convierte en 4.5

Entendiendo el tamaño de texto

El criterio de 19px puede ser entendido como equivalente a 14pt o 120% o 1.2em.
El criterio de 24px puede ser entendido como equivalente a 18pt o 150% o 1.5em.

Para una compresión exhaustiva de cómo interpretar el tamaño de texto, se debe leer la definición de texto de gran tamaño de la WCAG.

Todos los detalles sobre el ratio de contraste

Color a editar

Puede referirse tanto al color del texto como al color del fondo. Por defecto ese refiere al color del texto.

El color seleccionado será modificado hasta encontrar un color válido. El otro color no cambiará.

Dame / Los algoritmos

“Colores válidos y muy cercanos al color inicial”

Este es el algoritmo por defecto. Ofrece opciones de colores muy cercanas al color inicial. (La distancia de color es evaluada de forma matemática, que puede variar del punto de vista de un diseñador.)

Para algunas combinaciones de colores, el algoritmo no ofrece ningún resultado. En este caso, se recomienda usar el otro algoritmo.

“Un rango de colores válidos”

Este es el algoritmo alternativo, en caso de que el primero no ofrezca ningún resultado. Sin embargo, los colores ofrecidos pueden diferir (significativamente) del color inicial.

Comentarios del usuario

Si tienes problemas o preguntas sobre Contrast-Finder, por favor, contacta con nosotros:

Contribuye a Contrast-Finder

¡Todas las contribuciones son bienvenidas! Traducciones, correcciones, informes de errores, nuevas características…
Siéntete libre de jugar con el código fuente, o de opinar en el foro.