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.
Mais do blog
O que é a Becoderr? Mais de 120 ferramentas online gratuitas num só lugar
A Becoderr é uma coleção gratuita de mais de 145 ferramentas online para PDFs, imagens, JSON, texto, desenvolvedores e tarefas do dia a dia — privada, rápida e sem cadastro.
Como comprimir imagens sem perder qualidade
Reduza o tamanho das imagens em até 90% mantendo as fotos nítidas. Guia rápido para comprimir JPG e PNG online, grátis e privado.
Como converter um PDF em documento Word editável
Transforme qualquer PDF em um .docx editável que você altera no Microsoft Word, grátis e sem cadastro.