# Color Contrast Checker MCP > Color Contrast Checker validates WCAG accessibility compliance for any color combination. It runs contrast ratios between foreground and background colors to confirm text readability, whether you're designing a dark mode UI or just checking black on white. Get instant pass/fail reports required by design standards. ## Overview - **Category:** developer-tools - **Price:** Free - **Tags:** wcag, accessibility, color-contrast, design-system, ui-design ## Description Designers and developers need to know if their chosen colors are actually readable. This MCP lets your agent check the contrast ratio for any pair of foreground and background colors, validating against WCAG AA and AAA standards. You can test custom pairs, or quickly run checks for standard scenarios like white text on a specific color. It verifies readability across light themes, dark themes, pure black backgrounds, and pure white backgrounds. If you're building a design system, this MCP saves time by giving instant pass/fail reports without needing to leave your development environment. You connect it through Vinkius to access thousands of other tools alongside the contrast checker. ## Tools ### check_black_text_on_bg Checks the contrast ratio of pure black text against a specific background color you input. ### check_color_contrast Calculates the WCAG contrast ratio between any two custom foreground and background colors for accessibility auditing. ### check_danger_text_contrast Checks how readable standard error or danger red text is against a specific background color. ### check_dark_mode_surface Validates contrast ratios using the established color scheme for dark mode interfaces. ### check_light_mode_surface Checks color combinations against the standard background and text colors used in light mode interfaces. ### check_text_on_pure_black Determines the contrast ratio of a selected text color when placed on a pure black background. ### check_text_on_pure_white Checks how readable a chosen text color is when set against a pure white background. ### check_white_text_on_bg Calculates the contrast ratio of pure white text placed over a specific, custom background color. ## Prompt Examples **Prompt:** ``` Check if #3B82F6 works on a white background for body text. ``` **Response:** ``` Contrast ratio: 4.0:1. ❌ Fails WCAG AA for normal text (needs 4.5:1). ✅ Passes WCAG AA for large text (needs 3:1). Consider darkening to #2563EB (contrast 5.4:1) for full AA compliance. ``` ## Capabilities ### Audit specific color pairs It calculates the exact WCAG contrast ratio for any foreground and background hexadecimal color code. ### Validate standard modes Checks text readability against industry standards for light mode or dark mode surfaces. ### Test extreme backgrounds Confirms contrast ratios when the background is pure black or pure white. ### Check common elements Runs checks for standard text colors, like black body copy or error red, against a given background. ## Use Cases ### The primary brand color needs to be visible in dark mode. A designer picks a cool accent blue for their app's 'active' state. They ask their agent to use `check_dark_mode_surface` with the blue and the background hex code. The agent confirms the ratio fails WCAG AA, prompting the developer to pick a darker, more compliant shade. ### Testing contrast for an error message on a custom field. A web developer builds a form where the error text color is customized. Instead of manually calculating it, they use `check_danger_text_contrast` with the specific error red and background hex code to guarantee compliance. ### Auditing a large design system's base palette. An accessibility auditor needs to check if all neutral gray shades pass contrast requirements. They use `check_color_contrast` multiple times, inputting the gray shade and the pure white background hex code, gathering an instant report for every token. ### Making sure body text is readable on a non-white page. A content writer uses their agent to verify if their chosen body font color works against a muted beige background. They use `check_color_contrast` with the specific colors, confirming that pure white or black text won't work. ## Benefits - Avoid failing accessibility audits. By using `check_color_contrast`, you validate any custom color pair against the required AA and AAA standards before a single line of code is written. - Maintain consistency across themes. You can run quick validations for both light and dark designs using dedicated tools like `check_light_mode_surface` and `check_dark_mode_surface` to prevent theme-related failures. - Test edge cases reliably. Need to check if a custom blue works on an off-white background? Use the core function, `check_color_contrast`, instead of guessing or relying on manual color pickers. - Verify critical alerts. Never assume your error state is visible. Tools like `check_danger_text_contrast` ensure that important messages use colors that pass contrast requirements. - Confirm pure backgrounds. The dedicated tools, such as `check_text_on_pure_black`, handle the simplest but most overlooked scenarios, making sure basic readability holds up. ## How It Works The bottom line is you get a clear pass or fail status for any combination of colors. 1. Subscribe to this MCP and provide your required API key. 2. Call the tool from your AI client, providing two color codes (foreground and background). 3. Your agent receives an instant report listing the contrast ratio and whether it meets WCAG standards. ## Frequently Asked Questions **How do I use check_color_contrast for my brand colors?** Pass your foreground color and background color hex codes directly to `check_color_contrast`. The MCP returns the precise contrast ratio, letting you see if it meets WCAG AA or AAA requirements. **Does check_danger_text_contrast work for all error colors?** No. It checks standard 'danger' red text specifically. For other alert colors (like warning yellow), you must use the more general `check_color_contrast` tool. **Can I check contrast ratios in dark mode using this MCP?** Yes, you can. Use the dedicated `check_dark_mode_surface` tool to ensure your text looks good against standard dark theme backgrounds. This is critical for mobile design. **What if I need to check a color on an unusual background?** Use `check_color_contrast`. Simply provide the two colors you are working with, and it handles any custom hex code pair for validation. **How do I connect my API key to run check_color_contrast?** You must provide an Apify API key for access. Once subscribed, you input this key directly into your AI client's configuration. This lets your agent use all contrast tools immediately without needing manual setup. **What color format must I provide when using check_text_on_pure_white?** You need to supply standard hex codes, like #RRGGBB. The tool accepts both six-digit and eight-digit formats for the background or text colors. Providing a precise code ensures accurate ratio calculation. **When check_color_contrast fails a test, does it provide recommendations?** Yes, the output reports the failing contrast ratio and the required minimums based on WCAG standards. It also suggests specific color adjustments or alternative pairings that meet compliance. **If I run many checks using check_dark_mode_surface, are there rate limits?** Usage is subject to the Apify API rate limits for efficient processing. The MCP handles batch requests well, but if you need extremely high volume checking, review your subscription tier. **What accessibility standards does it check?** It checks against both WCAG 2.1 Level AA (minimum 4.5:1 for normal text, 3:1 for large text) and Level AAA (7:1 for normal text, 4.5:1 for large text).