legible

¿Se lee?

WCAG 2.2 y APCA para texto y fondo. Si la pareja suspende, aparece el tono más cercano que aprueba.

Los dos colores

Hex, rgb(), hsl(), oklch() o un nombre CSS.

Resultado

Ratio WCAG–

APCA Lc–

Criterios WCAG 2.2

  • AA texto normal
  • AA texto grande
  • AAA texto normal
  • AAA texto grande
  • Iconos y bordes (1.4.11)
  • AA con cualquier tipo de daltonismo

Ajuste mínimo

El color más parecido al tuyo que pasa, moviendo solo la luminosidad (en OKLCH, para no cambiar el tono).

Buscar por

Con visión típica

Para cualquier visión

Pasan con visión típica y con los cuatro tipos de daltonismo simulados a la vez.

Cómo lo ven otras personas

Simulación de los tipos de daltonismo más frecuentes (modelo de Machado, 2009), con el contraste que queda en cada caso. Útil sobre todo cuando la pareja depende del tono, como rojo y verde.

Por tamaño

Tus colores en los usos habituales de un texto. A la derecha, si ese tamaño llega a AA.

    Toda la paleta de golpe

    Pega tus colores, uno por línea o separados por comas (hasta 12), y verás todas las combinaciones.

    Medir con

    Filas: color del texto. Columnas: color del fondo. AA18 = solo pasa en texto grande. Con «cualquier visión», cada celda muestra el ratio más bajo entre la visión típica y los cuatro tipos de daltonismo.

    Cómo se calcula

    WCAG 2.2
    Ratio entre la luminancia relativa de los dos colores, de 1:1 a 21:1. Texto normal pide 4,5:1 (AA) o 7:1 (AAA); texto grande (24 px, o 18,66 px en negrita) pide 3:1 o 4,5:1.
    APCA
    El método candidato para WCAG 3. Tiene en cuenta la polaridad (claro sobre oscuro no es igual que al revés) y da un valor Lc: 90 es lo ideal para texto largo, 75 el mínimo para cuerpo de texto, 60 para texto de contenido, 45 para titulares y 30 para iconos.
    Transparencias
    Si el texto tiene transparencia, se mezcla con el fondo antes de calcular. Si el fondo la tiene, se supone sobre blanco.