Cuadrícula de contraste

Coloca toda tu paleta en una tabla de auditoría N×N — ratios WCAG y Lc APCA para cada par primer plano × fondo, decidido de un vistazo.

Cada celda muestra el ratio WCAG y el APCA Lc


Ag1.0Lc0	Ag4.2Lc+35	Ag3.8Lc+31	Ag5.2Lc+42	Ag8.4Lc+62	Ag1.2Lc0	Ag17.4Lc+104
Ag4.2Lc-33	Ag1.0Lc0	Ag1.1Lc0	Ag1.3Lc0	Ag2.0Lc+25	Ag5.0Lc-34	Ag4.2Lc+67
Ag3.8Lc-29	Ag1.1Lc0	Ag1.0Lc0	Ag1.4Lc+10	Ag2.2Lc+30	Ag4.6Lc-30	Ag4.6Lc+72
Ag5.2Lc-40	Ag1.3Lc0	Ag1.4Lc-11	Ag1.0Lc0	Ag1.6Lc+18	Ag6.3Lc-41	Ag3.3Lc+60
Ag8.4Lc-61	Ag2.0Lc-27	Ag2.2Lc-32	Ag1.6Lc-20	Ag1.0Lc0	Ag10.2Lc-62	Ag2.1Lc+40

Aprobado WCAG AA para cuerpo de texto Solo AA para texto grande Fallido

Filas = color de texto (primer plano), columnas = fondo. Cada celda muestra el par real de primer plano sobre fondo con dos métricas de accesibilidad: ratio WCAG (AA cuerpo ≥ 4.5, AA grande ≥ 3.0) y APCA Lc (75+ para texto de cuerpo, 60+ para texto grande).

Cómo auditar una paleta completa: añadir, leer, decidir.

Todos los colores candidatos en una matriz N×N: accesibilidad para cada par de primer plano × fondo a la vez.

01
Añadir colores
Importa colores de marca, colores semánticos y neutros (hasta 10). Las filas son primeros planos, las columnas son fondos.
02
Leer la tabla
Cada celda muestra la relación WCAG y el Lc de APCA. Los puntos se iluminan: el texto de cuerpo requiere Lc 75+, el texto grande 60+.
03
Decidir
Registra los pares de botones y los pares de cuerpo en tu especificación de diseño; elimina las combinaciones que fallan antes de su lanzamiento.

Preguntas frecuentes sobre la cuadrícula de contraste

Tres preguntas frecuentes en auditorías de matriz completa.

¿Por qué no revisar los pares uno por uno en la herramienta de contraste?: 5 colores forman 30 pares dirigidos; las revisiones uno por uno pueden pasar por alto elementos. La cuadrícula muestra todo a la vez y revela relaciones reflejadas.
WCAG o APCA — ¿cuál cuenta?: WCAG 2.1 es lo que las regulaciones mencionan hoy; APCA es el candidato de WCAG 3 y lee con mayor precisión el texto en modo oscuro y de bajo contraste. Cumplir con WCAG, juzgar con APCA.
¿Por qué las columnas de negro y blanco siempre están presentes?: El texto negro o blanco es el respaldo universal; el rendimiento de un color frente a ambos es la base para definir colores semánticos.

Después de la auditoría

Incorpora los pares que pasan a tu paleta y especificación semántica.

Comprobador de Contraste

Validación de contraste WCAG 2.1 entre cualquier color de primer plano y fondo.

Simulador de Daltonismo

Simula 8 tipos de deficiencia de visión de color para auditar la accesibilidad.

Paletas científicas seguras para daltónicos

Los estándares de facto de las publicaciones académicas: Okabe-Ito (recomendado por Nature Methods), la serie Paul Tol, la paleta de la revista Nature NPG y el Viridis perceptualmente uniforme. Cada muestra incluye una calificación de contraste APCA, y un simulador de visión de color de 8 tipos debajo verifica cada paleta en vivo.

Paleta Semántica para Interfaz

Introduce un color de marca, obtén primario / secundario / éxito / advertencia / peligro — exportado como configuración Tailwind y variables CSS.

fg ↓ / bg →

Ag1.0Lc0

Ag4.2Lc+35

Ag3.8Lc+31

Ag5.2Lc+42

Ag8.4Lc+62

Ag1.2Lc0

Ag17.4Lc+104

Ag4.2Lc-33

Ag1.0Lc0

Ag1.1Lc0

Ag1.3Lc0

Ag2.0Lc+25

Ag5.0Lc-34

Ag4.2Lc+67

Ag3.8Lc-29

Ag1.1Lc0

Ag1.0Lc0

Ag1.4Lc+10

Ag2.2Lc+30

Ag4.6Lc-30

Ag4.6Lc+72

Ag5.2Lc-40

Ag1.3Lc0

Ag1.4Lc-11

Ag1.0Lc0

Ag1.6Lc+18

Ag6.3Lc-41

Ag3.3Lc+60

Ag8.4Lc-61

Ag2.0Lc-27

Ag2.2Lc-32

Ag1.6Lc-20

Ag1.0Lc0

Ag10.2Lc-62

Ag2.1Lc+40

Cómo auditar una paleta completa: añadir, leer, decidir.

Todos los colores candidatos en una matriz N×N: accesibilidad para cada par de primer plano × fondo a la vez.

Añadir colores

Importa colores de marca, colores semánticos y neutros (hasta 10). Las filas son primeros planos, las columnas son fondos.

Leer la tabla

Cada celda muestra la relación WCAG y el Lc de APCA. Los puntos se iluminan: el texto de cuerpo requiere Lc 75+, el texto grande 60+.

Decidir

Registra los pares de botones y los pares de cuerpo en tu especificación de diseño; elimina las combinaciones que fallan antes de su lanzamiento.

Preguntas frecuentes sobre la cuadrícula de contraste

Tres preguntas frecuentes en auditorías de matriz completa.

¿Por qué no revisar los pares uno por uno en la herramienta de contraste?

5 colores forman 30 pares dirigidos; las revisiones uno por uno pueden pasar por alto elementos. La cuadrícula muestra todo a la vez y revela relaciones reflejadas.

WCAG o APCA — ¿cuál cuenta?

WCAG 2.1 es lo que las regulaciones mencionan hoy; APCA es el candidato de WCAG 3 y lee con mayor precisión el texto en modo oscuro y de bajo contraste. Cumplir con WCAG, juzgar con APCA.

¿Por qué las columnas de negro y blanco siempre están presentes?

El texto negro o blanco es el respaldo universal; el rendimiento de un color frente a ambos es la base para definir colores semánticos.