ContrastDuo — Verificador dual de contraste de color WCAG 2 y APCA
Colores
Admite hexadecimal, RGB, HSL, OKLCH y nombres CSS.
Color no reconocido. Pruebe hexadecimal (#ff6600), RGB (255 102 0) o HSL (120, 50%, 50%).
Ajustar en OKLCH
OKLCH permite modificar la luminosidad de un color sin cambiar su tono. Útil para encontrar una variante del mismo color que cumpla el contraste necesario.
Admite hexadecimal, RGB, HSL, OKLCH y nombres CSS.
Color no reconocido. Pruebe hexadecimal (#ff6600), RGB (255 102 0) o HSL (120, 50%, 50%).
Ajustar en OKLCH
OKLCH permite modificar la luminosidad de un color sin cambiar su tono. Útil para encontrar una variante del mismo color que cumpla el contraste necesario.
Resultados de contraste
WCAG 2
— : 1
- Texto normal AA (≥ 4.5:1)
- Texto normal AAA (≥ 7:1)
- Texto grande AA (≥ 3:1) · ≥ 24px normal o ≥ 18.5px negrita
- Texto grande AAA (≥ 4.5:1) · ≥ 24px normal o ≥ 18.5px negrita
- Componentes de interfaz (≥ 3:1)
WCAG 2 usa un ratio fijo que no considera la dirección del contraste, el peso ni el tamaño real de la fuente.
APCA
Lc —
- Lc ≥ 90 — Cuerpo de texto ≥ 16px normal Nivel preferido para lectura sostenida y bloques de texto extenso
- Lc ≥ 75 — Cuerpo de texto / Texto de interfaz ≥ 18px normal Nivel mínimo para bloques de texto y elementos de interfaz
- Lc ≥ 60 — Texto complementario ≥ 24px normal o ≥ 16px negrita Títulos, subtítulos, fragmentos breves
- Lc ≥ 45 — Encabezados grandes ≥ 32px medio · Iconos de contorno (trazo ≥ 4px) Encabezados de sección, iconos con detalle fino
- Lc ≥ 30 — Texto puntual Deshabilitado, copyright · Iconos sólidos (≥ 5.5px) Texto no destinado a lectura sostenida
- Lc ≥ 15 — Solo distinguible Divisores, bordes (≥ 5px) Elementos decorativos, separadores
Sobre estos niveles APCA
APCA mide el contraste perceptual real. Tiene en cuenta la polaridad (texto claro sobre fondo oscuro produce un resultado diferente que la combinación inversa) y se relaciona con el tamaño y peso de la fuente para determinar la legibilidad.
Los niveles Lc 90–45 están cubiertos por el modo simplificado del marco de conformidad ARC (APCA Readability Criterion). Los niveles Lc 30 y Lc 15 requieren el modo avanzado y cubren texto secundario y elementos no textuales. Las guías específicas de ARC para elementos no textuales están en desarrollo.
La distinción «mínimo» / «preferido» está definida oficialmente solo para cuerpo de texto (Lc 75 y Lc 90). Para otros usos, la pestaña Referencia APCA muestra los niveles mínimo (borde fino) y preferido (borde grueso) para cada combinación de tamaño y peso.