Web AIM Contrast Checker
Check color contrast for WCAG compliance.
Open the official app on webaim.org
This tool is hosted by its maintainers. Click below to open webaim.org in a new tab — it's their official demo.
Browse calculators tools →What's next with Web AIM Contrast Checker?
Choose how you want to get started.
Use it free
Open the official tool or demo — no account needed.
Self-host it
Run the open-source version on your own infrastructure.
What is Web AIM Contrast Checker?
WebAIM Contrast Checker is an open-source web tool designed to evaluate the contrast ratio between foreground and background colors to ensure compliance with Web Content Accessibility Guidelines (WCAG). It helps developers and designers identify color combinations that meet accessibility standards, which is critical for users with visual impairments. The tool is primarily used by web developers, UX designers, and accessibility auditors to test text and UI elements. It solves the problem of ensuring digital content is perceivable by all users, reducing the risk of legal non-compliance and improving usability. By providing precise contrast ratios and adherence to WCAG 2.0 and 2.1 standards, it streamlines the process of creating accessible interfaces. The tool’s simplicity and integration with color selection methods make it a foundational resource for accessibility testing.
How it works
WebAIM Contrast Checker is a free, browser-based tool that calculates contrast ratios between two colors to determine their compliance with WCAG guidelines. It is part of the WebAIM suite of accessibility resources, which focuses on making digital content accessible to people with disabilities. The tool’s primary purpose is to ensure text and graphical elements on websites meet minimum contrast requirements, which are essential for readability. It supports WCAG 2.0 and 2.1 standards, including ratios for normal text, large text, and UI components. The tool allows users to input foreground and background colors via RGB hexadecimal codes or a color picker. It also adjusts transparency using an alpha value and modifies perceived lightness with a slider. It provides contrast ratios for WCAG AA, AAA, and specific UI component requirements, such as 3:1 for graphics under WCAG 2.1.
How to use it
- 1Open the WebAIM Contrast Checker tool in a browser with JavaScript enabled. 2. Enter foreground and background colors using RGB hex codes or the color picker. 3. Adjust transparency with the alpha slider and perceived lightness with the lightness slider. 4. Review the contrast ratio results for WCAG AA, AAA, and UI component requirements. Practical tips: Use the eye dropper tool in the color picker to extract colors from web pages. Test multiple color combinations to ensure compliance across different text sizes and UI elements.
What it can do
- contrast checker
Use cases
Assumptions and limitations
Assumptions
- source: https://webaim.org/resources/contrastchecker/
- license: Open source
- privacy: Opens an external demo
Limitations
- Requires JavaScript to function, which may not work in environments without script support.
- Does not account for complex color gradients or patterns in background images.
- Lacks real-time preview of color combinations on web pages.
- Does not integrate with code editors or development workflows directly.
- Limited to static color checks; does not analyze dynamic or responsive design elements.
Understanding the result
Check color contrast for WCAG compliance.
Tool details
- Clearly flagged when a network request is needed.
- No account, no sign-up, and no tracking of your content.
- Powered by (MIT).
- Built with
- (https://webaim.org/resources/contrastchecker/)
- License
- MIT
- Runs locally
- No — requires a network request
- Verification
- Not yet verified
- Input
- Query
- Output
- Text
Built with https://webaim.org/resources/contrastchecker/. OpenToolVault provides the discovery and browser interface while crediting the original project maintainers.
- Built with
- License
- MIT
Open-source project
OpenToolVault is an independent directory. We are not affiliated with or endorsed by this project.
References
- / — GitHub Repository
Upstream project · GitHub
Frequently asked
How does WebAIM Contrast Checker determine contrast ratios?
The tool calculates contrast ratios using the relative luminance values of the foreground and background colors. It applies the WCAG 2.1 formula for contrast ratio, which compares the difference in luminance between colors to determine readability. Results are categorized as passing or failing WCAG AA or AAA standards based on predefined thresholds.
Can the tool check contrast for non-text elements like icons?
Yes, the tool can assess contrast for graphical objects and UI components, such as icons or borders, by inputting their colors. It adheres to WCAG 2.1 requirements, which mandate a 3:1 contrast ratio for such elements. However, it does not analyze the functionality or context of icons, only their color contrast.
How do I test a specific color combination for large text?
To test large text, input the foreground and background colors, then select the 'Large Text' option in the tool. Enter the text size (e.g., 14-point bold) to ensure it meets WCAG AA (4.5:1) or AAA (7:1) standards. The tool will display the contrast ratio and indicate compliance.
How does WebAIM Contrast Checker compare to other tools like Contrast Checker by WebAIM?
WebAIM Contrast Checker is a standalone tool focused solely on color contrast analysis, while other tools like the WebAIM Contrast Checker (same tool) offer similar functionality. Alternatives include Contrast Checker by WebAIM (same tool) and tools like WAVE or Color Contrast Analyzer. The key difference is that WebAIM’s tool emphasizes WCAG compliance and provides detailed ratio thresholds for text and UI elements.
What should I do if the tool shows a contrast ratio failure?
If the tool indicates a failure, adjust the foreground or background color to meet the required ratio. For text, increase the darkness of the text or lightness of the background. For UI elements, select colors with a higher contrast ratio. Re-test using the tool to confirm compliance after changes.