Color Contrast Checker
Check color contrast ratios for WCAG 2.1 compliance. Supports AA/AAA levels, normal/large text, alpha blending, and accessible color suggestions. Works entirely in your browser.
Enter both colors. Supports HEX, RGB, HSL, and named colors.
Contrast Result
Accessible Foreground Colors (WCAG AA)
How to check color contrast
1. Enter foreground and background colors
Input a foreground (text) color and a background color in any supported format: HEX (#RGB, #RRGGBB, #RGBA, #RRGGBBAA), RGB/RGBA, HSL/HSLA, or a named color (e.g., red, blue).
2. Check the contrast ratio
Click Check Contrast. The tool calculates the contrast ratio between the two colors and evaluates it against WCAG 2.1 requirements for your selected font size.
3. Interpret the results
- Normal Text requires a contrast ratio of at least 4.5:1 for WCAG AA and 7:1 for WCAG AAA.
- Large Text (14pt bold or 18pt regular and larger) requires a contrast ratio of at least 3:1 for WCAG AA and 4.5:1 for WCAG AAA.
- UI Components and Graphical Objects require a contrast ratio of at least 3:1 against adjacent colors.
All calculations happen locally in your browser. Your color data never leaves your device.
Frequently Asked Questions
- No. All contrast calculations happen entirely in your browser. Your color values never leave your device.
- For normal text, WCAG AA requires at least 4.5:1 and WCAG AAA requires at least 7:1. For large text (14pt bold or 18pt regular+), AA requires 3:1 and AAA requires 4.5:1. UI components and graphical objects require 3:1.
- Enter a foreground and background color, select your font size (normal or large), and click Check Contrast. The tool reports whether the pair passes WCAG AA and AAA for your chosen text size.
- AA (4.5:1 for normal text, 3:1 for large text) and AAA (7:1 for normal text, 4.5:1 for large text).
- Yes. Alpha blending with the background color is applied before calculating contrast ratios, so HEX colors with alpha (#RRGGBBAA) and RGBA/HSLA values are handled correctly.
- The tool runs entirely client-side and does not generate shareable URLs. Copy the report or download the JSON result to share your contrast findings.
- HEX (#rgb, #rrggbb, #rgba, #rrggbbaa), RGB/RGBA, HSL/HSLA, and named colors (red, blue, etc.).
- Once the page is loaded, the tool works offline because all logic runs client-side.
Color contrast is one of the most fundamental — yet most often overlooked — parts of accessible web design. When foreground text lacks sufficient brightness difference from its background, readers with low vision, color blindness, or age-related vision changes struggle to read content. The Color Contrast Checker gives developers, designers, and content teams a fast, browser-based way to test color pairs against WCAG guidelines before code reaches production. It supports hex, RGB, and HSL values, and updates the contrast ratio instantly as you type so you can iterate quickly. Because the tool runs entirely in the browser, nothing needs to be installed, no account is required, and no design data ever leaves your machine.
Use Cases
Frontend developers use the checker while building buttons, links, navigation menus, cards, and form fields to confirm every element meets contrast requirements during component development, before code review reaches the main branch. UI designers run brand palettes through it early so low-contrast combinations are caught before mockups are handed off to engineering. QA engineers add it to accessibility checklists for dark mode and light mode audits across desktop and mobile breakpoints. Content editors apply it to image text overlays, captions, callout boxes, and alert banners to keep readability high for every audience. Marketing teams use it for campaign landing pages and email newsletters so promotional copy stays legible across devices and email clients. Product teams rely on it to support legal accessibility compliance and reduce remediation costs after launch.
How-To
Enter a foreground color and a background color using hex codes, RGB values, or the built-in color pickers. The tool immediately calculates the contrast ratio and reports whether the pair passes WCAG AA or AAA thresholds for normal-sized text and large text.
- Open the Color Contrast Checker in any modern browser — no installation or signup required.
- Pick a foreground color and a background color using the text inputs or the built-in color pickers.
- Read the contrast ratio result and the WCAG pass/fail status shown for each text size.
- Adjust either color until the ratio meets your target accessibility level.
- Copy the approved foreground and background values into your CSS, design tokens, or style guide.
Running contrast checks early keeps interfaces readable, inclusive, and compliant without slowing down your workflow on every project. Making contrast testing a habit protects your audience, strengthens your brand, and helps you ship accessible experiences with confidence.