WCAG Color Contrast Checker (AA / AAA)

Chequeá contraste texto/background contra WCAG 2.1 AA y AAA - preview en vivo

🔒 100% en el browser🆓 Gratis para siempre⚡ Sin sign-up
Nota: La interfaz de la herramienta de abajo por ahora solo está en inglés. Estamos traduciéndolas una a una. Ver esta herramienta en inglés →
The quick brown fox jumps over the lazy dog - 0123456789
14.33:1
Contrast ratio · Normal text
AA (normal ≥ 4.5)PASS
AA large (≥ 3)PASS
AAA (normal ≥ 7)PASS
AAA large (≥ 4.5)PASS

Uses the WCAG 2.1 sRGB relative-luminance formula. “Large text” is 24px (18pt) regular or 18.66px (14pt) bold.

Cómo funciona

  1. 1
    Pick foreground y background

    Type HEX o usá los color pickers. Alpha se soporta y se blendea sobre el background.

  2. 2
    Leé el ratio

    El ratio exacto aparece con badges AA / AAA pass/fail para texto normal y large.

  3. 3
    Ajustá hasta que pase

    Los sliders ajustan lightness en pasos chicos para encontrar el shade que pasa más cercano.

Sobre WCAG Color Contrast Checker (AA / AAA)

WCAG color contrast checker gratis. Pick colores de foreground y background y ve el ratio de contraste exacto (por WCAG 2.1 relative luminance) más badges de pass/fail para AA, AA Large, AAA y AAA Large. Preview en vivo de texto real con los colores exactos. Corre entero en tu browser. WCAG Color Contrast Checker (AA / AAA) en 712 Tools corre entero dentro de tu browser con APIs nativas de JavaScript - ningún server ve tus datos. Eso significa resultados al instante, privacidad total y sin límites de upload.

Ya sea para una sesión de debug, una comprobación rápida o un incidente en producción, esta herramienta es gratis y sin límite de usos. Sin watermarks, sin sign-up y sin ads dentro de la herramienta.

Preguntas frecuentes

¿Qué ratios pide WCAG?

AA pide 4.5:1 para texto normal y 3:1 para large. AAA pide 7:1 para normal y 4.5:1 para large. 'Large' es 18pt (24px) regular o 14pt (18.66px) bold.

¿Qué fórmula de luminancia usa?

La fórmula sRGB relative-luminance de WCAG 2.1 - la misma que webaim.org y axe. Los resultados matchean al cuarto decimal.

¿Y APCA?

APCA (el algoritmo propuesto para WCAG 3) no está incluido aún - sigue en draft. Esta tool queda en la fórmula de WCAG 2.1 actual que citan auditores y abogados.

Leer más

5 min de lectura

The WCAG color contrast checklist every designer should bookmark

AA vs AAA, the math behind the ratios, why gray-on-gray fails on retina screens, and the two-line HTML that makes a color contrast test run in seconds.

Herramientas relacionadas

Color Converter

Convierte entre HEX, RGB, HSL y CMYK con preview en vivo

Palette Generator

Genera paletas de color armoniosas desde un color base

CSS Gradient

Diseña gradients CSS linear, radial y conic con preview en vivo

Box Shadow

Diseña box-shadows CSS multi-layer con preview en vivo

Glassmorphism

Diseñá cards CSS de frosted-glass con preview en vivo y código copy-ready

Physics Editor

Editor de hitbox de sprites gratis online - auto-traceá collision polygons y exportá para Phaser, Matter.js, Rapier o cualquier engine 2D