Contraste de colores: por qué un 4,5 redondeado puede fallar
Compare contrastes sRGB sin redondear y distinga la comprobación de dos colores de la accesibilidad de toda una interfaz.
Método
El contraste expresa la diferencia de luminancia relativa entre el texto y su fondo real. Compruebe los colores pintados dentro de la etiqueta. Un texto pálido sobre un fondo claro puede resultar ilegible aunque el panel que lo rodea sea oscuro.
Para colores sRGB opacos, normalice y linealice los canales rojo, verde y azul antes de calcular la luminancia relativa. Divida la luminancia más clara más 0,05 entre la más oscura más 0,05. Negro sobre blanco produce 21:1; dos colores iguales producen 1:1.
El gris RGB 119,119,119 sobre blanco da aproximadamente 4,478089:1; RGB 118,118,118 da 4,542225:1. Ambos pueden mostrarse como 4,5 al redondear a una cifra decimal. Sin embargo, solo el segundo alcanza el umbral AA de 4,5:1 para texto normal. Decida con el valor sin redondear.
Ver datos
- RGB 119,119,119
- 4.478089 :1 4.478089… < 4.5
- RGB 118,118,118
- 4.542225 :1 4.542224… > 4.5
Ejemplo resuelto
El gris RGB 119,119,119 sobre blanco da aproximadamente 4,478089:1; RGB 118,118,118 da 4,542225:1. Ambos pueden mostrarse como 4,5 al redondear a una cifra decimal. Sin embargo, solo el segundo alcanza el umbral AA de 4,5:1 para texto normal. Decida con el valor sin redondear.
El texto grande que cumple la definición de tamaño y grosor tiene un umbral AA de 3:1. Una etiqueta ancha no convierte su texto en grande. Para texto normal, el umbral AAA es 7:1. Identifique la categoría aplicable antes de interpretar el resultado.
L = 0.2126 R + 0.7152 G + 0.0722 B (linear sRGB)
contrast = (lighter L + 0.05) / (darker L + 0.05)
RGB(119,119,119) on white ≈ 4.478089 : 1
RGB(118,118,118) on white ≈ 4.542225 : 1
Un par de colores no certifica una página completa. Revise estados de puntero, foco, error y desactivación, ambos temas, transparencias, degradados e imágenes. Compruebe también tamaño de texto, teclado e indicadores no textuales. Use etiquetas claras para que el color no sea el único portador del significado.
Ver datos
- RGB 119,119,119
- #777777
- RGB 255,255,255
- #FFFFFF
- Resultado
- 4.478089 : 1
Comprobaciones y límites
Un par de colores no certifica una página completa. Revise estados de puntero, foco, error y desactivación, ambos temas, transparencias, degradados e imágenes. Compruebe también tamaño de texto, teclado e indicadores no textuales. Use etiquetas claras para que el color no sea el único portador del significado.