About Color Contrast Checker
This color contrast checker compares a text color with a background color and shows the contrast ratio, for example 4.52 : 1. It then lists pass or fail results for WCAG AA and AAA with normal and large text, plus the 3:1 threshold for user interface components. A live preview shows how the pair actually reads.
The required ratios are 4.5:1 for AA normal text, 3:1 for AA large text, 7:1 for AAA normal text and 4.5:1 for AAA large text. Large text means roughly 18 pt, or 14 pt bold, and above. The calculation follows the WCAG relative luminance formula and runs in your browser. Use Swap colors to test the reverse pairing.
How to use Color Contrast Checker
- 01
Choose a text color and a background color.
- 02
Read the contrast ratio.
- 03
Check the WCAG pass/fail results.
When to use it
- Check that body text on a website background is readable for low-vision visitors.
- Test button label and button background colors before handing a design to developers.
- Verify brand colors meet AA when used for text on white or dark backgrounds.
- Compare light-on-dark and dark-on-light versions of the same color pair.
- Prepare evidence for an accessibility review or audit with exact ratios.
Frequently asked questions
What contrast ratio do I need for WCAG AA?
WCAG AA requires at least 4.5:1 for normal text and 3:1 for large text. The checker shows both results, together with the 3:1 threshold often used for interface components such as input borders and icons.
What is the difference between AA and AAA?
AAA is the stricter level. It asks for 7:1 for normal text and 4.5:1 for large text. Many sites aim for AA across the page and use AAA where they can, because not every color palette can reach it.
What counts as large text in WCAG?
Large text is at least 18 point (about 24 CSS pixels) regular, or at least 14 point (about 18.7 CSS pixels) bold. Anything smaller is normal text and needs the higher ratio.
How is the contrast ratio calculated?
The tool converts each color to relative luminance using the WCAG formula, then divides the lighter luminance plus 0.05 by the darker luminance plus 0.05. The result ranges from 1:1 (identical) to 21:1 (black on white).
Can I enter a HEX code instead of using the color picker?
The checker uses color pickers for the text and background colors. Click a picker to choose a color, and the result updates immediately. Use the Swap colors button to reverse text and background.
Is my data sent anywhere?
No. The ratio is calculated in your browser and the colors you pick are not uploaded to i40x. Automated checks cannot judge everything, so also review fonts, sizes and real content on your page.