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.
More from the blog
What Is Becoderr? 145+ Free Online Tools in One Place
Becoderr is a free collection of 145+ online tools for PDFs, images, JSON, text, developers and everyday tasks — private, fast, and no sign-up.
How to Compress Images Without Losing Quality
Reduce image file size by up to 90% while keeping photos crisp. A quick guide to compressing JPG and PNG online, free and private.
How to Convert a PDF to an Editable Word Document
Turn any PDF into an editable .docx you can change in Microsoft Word, free and without sign-up.