Ir directamente al contenido de esta página

codexexempla.org

Analizador de contraste de colores

Muestra y resultados

VALIS (siglas de Vast Active Living Intelligence System, ‘Vasto Sistema de Inteligencia Activa Viviente ’, nombre tomado de un film norteamericano): Perturbación del campo de la realidad por el que se forma un vórtice negentrópico autocontrolado y espontáneo que tiende progresivamente a subsumir e incorporar su propio ambiente como estructuras de información. Se caracteriza por contar un una cuasi conciencia, finalidad, inteligencia, desarrollo y coherencia armilar.

Resultados según los criterios de las WCAG 1.0

Para el color de fondo #FFFFFF y el color de fuente #000000, la diferencia de brillo es de 255 y la diferencia de color es de 765. El contraste es suficiente.

Resultados según los criterios de las WCAG 2.0

Para el color de fondo #FFFFFF y el color de fuente #000000, la relación de contraste es de 21:1. El contraste es suficiente para satisfacer el nivel AAA.

El analizador

El porqué y el cómo

Al detallar la prioridad 2.2 de las WCAG 1.0 (inglés), el W3C especifica lo siguiente:

Ensure that foreground and background color combinations provide sufficient contrast when viewed by someone having color deficits or when viewed on a black and white screen.

[Asegúrese de que las combinaciones de colores de primer plano y de segundo plano tienen contraste suficiente para personas que acceden con deficiencias para percibir el color o por medio de pantallas en blanco y negro.]

Para lograrlo, propone en su documento Techniques For Accessibility Evaluation And Repair Tools un algoritmo para analizar el contraste entre un color de fondo y un color de primer plano para un elemento (inglés).

El brillo de cada color se calcula por medio de esta fórmula:

        
    ((valor de canal rojo x299)+(valor de canal verde x587)+(valor de canal azul x114))/1000 
        

La diferencia de color se calcula por medio de esta otra:

        
    (máximo(valor de canal rojo 1, valor de canal rojo 2) - mínimo(valor de canal rojo 1, valor de canal rojo 2)) + (máximo(valor de canal verde 1, valor de canal verde 2) - mínimo (valor de canal verde 1, valor de canal verde 2)) + (máximo(valor de canal azul 1, valor de canal azul 2) - mínimo (valor de canal azul 1, valor de canal azul 2))
        

Básicamente, sí la diferencia de brillo entre un color de fondo y un color de primer plano es superior a 125 y su diferencia de color es superior a 500, un usuario con limitaciones físicas o tecnológicas para discriminar colores podrá acceder a los contenidos.

Por otra parte, en su reelaboración para las WCAG 2.0 (inglés) nos encontramos:

1.4.3 Contrast (Minimum): Text (and images of text) have a contrast ratio of at least 5:1, except if the text is pure decoration. Larger-scale text or images of text can have a contrast ratio of 3:1. (Level AA)

[1.4.3 Contraste (Mínimo): El texto (y el texto en imágen) debe tener al menos una relación de contraste de 5:1, excepto si el texto es puramente decorativo. El texto o el texto en imagen a mayor escala puede tener una relación de contraste de 3:1. (Nivel AA)]

1.4.5 Contrast (Enhanced): Text (and images of text) have a contrast ratio of at least 7:1, except if the text is pure decoration. Larger-scale text or images of text can have a contrast ratio of 5:1. (Level AAA)

[1.4.5 Contraste (Mejorado): El texto (y el texto en imágen) debe tener al menos una relación de contraste de 7:1, excepto si el texto es puramente decorativo. El texto o el texto en imagen a mayor escala puede tener una relación de contraste de 5:1. (Nivel AAA)]

Para juzgar si esta relación es suficiente, se necesitan dos fórmulas:

  1. La formula que calcula la luminosidad relativa de un color (inglés):

                    
        luminosidad relativa = 0.2126 * valor canal rojo + 0.7152 * valor canal verde + 0.0722 * valor canal azul 
                    

    donde el valor de cada canal se mide por la cantidad correspondiente de su color —rojo, verde o azul— en base de 8 bits dividido entre 255, y

    • si el resultado es menor o igual a 0.03928, ese valor se divide entre 12.92;
    • si el resultado es mayor que 0.03928, entonces se le suma 0.055, se divide el resultado entre 1.055, y el resultado se eleva a 2.4.
  2. La fórmula del contraste entre ambas luminosidades (inglés):

    
        (luminosidad del color más claro + 0.05) / (luminosidad del color más oscuro + 0.05) 
                    

El resultado final expresa una relación entre el 1:1 y el 1:21, de menor a mayor contraste respectivamente.

Por tanto, y aplicando estas fórmulas, he creado este analizador.

En los mismos documentos del W3C se explica que las fórmulas pueden variar en sucesivos ajustes. Programo esta página según los valores publicados en septiembre de 2007, cuando el último boceto de las WCAG 2.0 es el del 17 de mayo de 2007. Intentaré no perder la pista a las fórmulas, pero si alguien comprueba que están desactualizadas, agradecería un comentario.

Contacto

En virtud de la Ley Orgánica 15/1999 de Protección de Datos de Carácter Personal le informo de que los datos que proporcione no serán empleados para otro fin que el de responder a su mensaje. En especial, me comprometo a no cederlos a terceros ni a emplearlos para enviar información no solicitada.

Del blog de Digital Icon