Explosion Tools

Verificador de Contraste de Color

Verifica ratios de contraste de color WCAG para cumplimiento de accesibilidad. Gratis, sin registro, funciona en tu navegador.

Large Text (24px)

Normal text (16px) — The quick brown fox jumps over the lazy dog.

Small text (14px) — Pack my box with five dozen liquor jugs.

14.63:1

Contrast Ratio

✓AA Normal Text

Requires 4.5:1

✓AA Large Text

Requires 3:1

✓AAA Normal Text

Requires 7:1

✓AAA Large Text

Requires 4.5:1

Contrast ratios are calculated using the WCAG 2.1 relative luminance formula. All processing happens in your browser.

Acerca de Verificador de Contraste de Color

Este verificador de contraste de color calcula el ratio de luminancia entre un color de primer plano y uno de fondo, e informa si la combinacion cumple los requisitos WCAG 2.1 AA y AAA. Usalo para verificar que los colores de tu texto sean legibles para personas con baja vision o daltonismo. La herramienta tambien sugiere el color aprobado mas cercano cuando tu combinacion actual no pasa.

Preguntas frecuentes

Que es un ratio de contraste de color?
Un ratio de contraste mide la diferencia de luminancia entre dos colores. Va de 1:1 (sin contraste, mismo color) a 21:1 (maximo contraste, negro sobre blanco). Las directrices WCAG exigen ratios minimos para la legibilidad del texto.
Que ratio de contraste se requiere para cumplimiento WCAG?
WCAG AA requiere 4.5:1 para texto normal y 3:1 para texto grande (18pt+ o 14pt+ en negrita). WCAG AAA requiere 7:1 para texto normal y 4.5:1 para texto grande.
Que se considera texto grande?
El texto grande se define como 18pt (24px) o mas para peso regular, o 14pt (18.66px) o mas para texto en negrita. El texto grande tiene requisitos de contraste mas bajos porque es mas facil de leer.
Como corrijo un contraste que no aprueba?
Si tus colores no pasan las verificaciones de contraste, intenta oscurecer el color mas oscuro o aclarar el color mas claro. La herramienta sugiere automaticamente el color aprobado mas cercano.

Herramientas relacionadas

Hex to RGB Converter

Convert hex color codes to RGB, HSL, and more

Image Color Picker

Upload an image and click to extract color codes

RGB to HSL Converter

Convert RGB color values to HSL format

HSL to Hex Converter

Convert HSL color values to HEX format

CSS Gradient Generator

Create beautiful CSS gradients with a visual editor and copy the code

Color Mixer

Mix two colors together at any ratio. See the blended result with hex, RGB, and HSL values plus a full gradient preview.