How to Check Color Contrast for WCAG AA and AAA
Check whether your text and background colors meet WCAG contrast requirements, and learn what the ratios mean.
Why contrast matters
Low contrast text is hard to read for many people, especially in bright light or with low vision. WCAG sets minimum contrast ratios so text stays readable.
The ratios
For level AA, normal text needs at least 4.5:1 and large text needs at least 3:1. For level AAA, normal text needs 7:1 and large text needs 4.5:1. Large text means roughly 24px regular or 18.66px bold and above.
How to check your colors
Open the Contrast Checker, pick a text color and a background color or type hex codes such as #1F2937 or #FFF, and read the ratio. The live preview shows how the text looks, and pass or fail badges cover AA and AAA for normal and large text. Swap flips the two colors.
What it does not cover
It compares two solid colors using the WCAG 2.x method. It does not test non-text elements such as icons and form borders, the newer APCA method, transparency, or text over gradients and images, so check those separately.
Más del blog
¿Qué es Becoderr? Más de 120 herramientas online gratis en un solo lugar
Becoderr es una colección gratuita de más de 145 herramientas online para PDF, imágenes, JSON, texto, desarrolladores y tareas diarias: privada, rápida y sin registro.
Cómo comprimir imágenes sin perder calidad
Reduce el tamaño de tus imágenes hasta un 90% manteniéndolas nítidas. Guía rápida para comprimir JPG y PNG en línea, gratis y privado.
Cómo convertir un PDF a un documento de Word editable
Convierte cualquier PDF en un .docx editable que puedes modificar en Microsoft Word, gratis y sin registro.