Logotipo de XTools
XTools

Comprobador de contraste

Comprueba el contraste entre el texto y el fondo según WCAG AA y AAA
  • Los archivos no salen de tu dispositivo
  • Se ejecuta en el navegador
  • Gratis, sin registro ni marca de agua

Contrast ratio

4.54:1

Passes AA for all text

  • AANormal text

    4.5:1

    Pass

  • AALarge text

    3:1 · 24px+, or 18.66px+ bold

    Pass

  • AAANormal text

    7:1

    Fail

  • AAALarge text

    4.5:1 · 24px+, or 18.66px+ bold

    Pass

  • AAUI components & graphics

    3:1 · Icons, borders of inputs, focus rings

    Pass

APCA lightness contrast

Lc 71.6

OK for content text, not long body copy

From the WCAG 3 draft. Polarity aware: negative Lc means light text on a dark background.

Preview

Large heading

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

Body text is where low contrast hurts most: long paragraphs at small sizes tire the eyes quickly, especially on phones in sunlight.

The quick brown fox jumps over the lazy dog

Small print, captions and footnotes

ButtonButton

Nearest passing colors

AA · 4.5:1

Adjust textAlready passes
Adjust backgroundAlready passes

AAA · 7:1

Adjust text

#595959 · 7.00:1

Adjust backgroundNot reachable by changing lightness alone
Changes only lightness (in OKLCH), so the hue and feel of your color stay the same.
4.54:1 Passes AA for all text · #767676

Cómo usar Comprobador de contraste

Comprueba un par de color de texto y de fondo según WCAG 2 (AA y AAA para texto normal, texto grande y componentes de interfaz) y ve el contraste de luminosidad APCA del borrador de WCAG 3. Cuando un par no pasa, sugiere los colores más cercanos que sí pasan.

  1. 1

    Introduce el Color del texto y el Color de fondo como HEX, rgb(), hsl(), oklch() o un nombre de color, o haz clic en una muestra para abrir el selector de color.

  2. 2

    Lee la Relación de contraste y el resultado Aprobado o Reprobado de cada comprobación AA y AAA.

  3. 3

    Mira la Vista previa, escribe tu propio Texto de ejemplo y usa Intercambiar colores para probar al revés.

  4. 4

    En Colores más cercanos que pasan, haz clic en Aplicar en una sugerencia de Ajustar texto o Ajustar fondo para AA (4.5:1) o AAA (7:1).

  5. 5

    Cuando cambias un color, la URL de la página guarda ambos colores, así que puedes copiarla para compartir el resultado.

Preguntas frecuentes

¿Qué relación de contraste necesito?

WCAG AA pide 4.5:1 para texto normal y 3:1 para texto grande (24 px o más, o 18.66 px en negrita) y componentes de interfaz como iconos y bordes de campos. AAA pide 7:1 y 4.5:1.

¿Por qué 4.497:1 se muestra como 4.49 y no como 4.50?

La relación nunca se redondea hacia arriba al cruzar un umbral, así que un par que se queda justo por debajo de 4.5:1 no parece que pase.

¿Puedo probar texto semitransparente?

Sí. Usa el control de Opacidad del texto; el texto translúcido se mezcla sobre el fondo antes de medir la relación.

¿Qué es el número APCA?

APCA viene del borrador de WCAG 3 y da un contraste de luminosidad (Lc) que depende de qué color es el texto; los valores negativos significan texto claro sobre fondo oscuro. Sigue siendo un borrador, así que las relaciones de WCAG 2 siguen siendo el objetivo habitual de cumplimiento.

¿Cómo se eligen los colores sugeridos?

Solo se cambia la luminosidad (en OKLCH), así que el tono y la sensación de tu color se mantienen. Si ninguna dirección alcanza el objetivo, dice No se alcanza solo cambiando la luminosidad; prueba a ajustar el otro color.