What is WebAim Contrast Checker?
The WebAIM Contrast Checker is a tool used to evaluate the color contrast between text and background to ensure readability and accessibility, particularly for individuals with visual impairments. It follows the Web Content Accessibility Guidelines (WCAG) standards, which define the required contrast ratios for different levels of accessibility compliance (A, AA, AAA).
What does the contrast checker do?
- Allows users to input foreground (text) and background colors.
- Automatically calculates the contrast ratio.
- Provides pass/fail results based on WCAG 2.0 and 2.1 standards.
- Indicates whether the contrast is sufficient for normal text, large text, and graphical elements.
- Helps designers and developers create accessible digital content.
How to use the contrast checker?
- Visit the WebAIM Color Contrast Checker.
- To use it, enter Hex color values into the Foreground Color and Background Color fields. Alternatively, you can click the color box next to each field to select a color using the color picker.

- You can also enter colors in a different format, like RGB, using the color picker or by directly inputting the color value.
- If you need to extract a color value from a webpage, tools like ColorZilla or the Contrast Color Accessibility app for Mac can help.
- Adjust your colors until they pass the contrast checker. The required contrast ratios depend on the text size.
- Normal-sized text (12-point) requires a contrast ratio of 4.5:1.
- Large-sized text (14-point and bold, 18-point, or larger) requires a contrast ratio of 3:1.