Verify Color Accessibility Compliance with WCAG 2.1 Standards
A comprehensive tool for checking color contrast ratios against WCAG 2.1 accessibility guidelines. Ensure your designs are accessible to users with visual impairments.
The WCAG Contrast Checker helps you verify that your color combinations meet accessibility standards for users with visual impairments. The tool calculates contrast ratios using the official WCAG 2.1 formula and includes many advanced features for comprehensive accessibility testing.
Multiple specialized views for different testing scenarios
Color blindness simulation for Protanopia, Deuteranopia, Tritanopia, and Achromatopsia
Generate accessible color palettes with harmonies and WCAG analysis
Export to CSS Variables, Tailwind, SCSS, or JSON
Tip: The tool uses the relative luminance formula from WCAG 2.1, which accounts for the non-linear response of human vision to color intensity. Use keyboard shortcuts Ctrl+Z for Undo and Ctrl+Y for Redo.
The WCAG Contrast Checker is organized into 8 main tabs, each specializing in different aspects of color accessibility testing:
The main tab for checking contrast between foreground and background colors. Includes accessibility score, auto-fix suggestions, and live preview.
Device and context preview showing how colors appear on different devices (mobile, tablet, desktop) and in different modes (light, dark, high-contrast).
Test contrast against complex backgrounds including gradients, images, and CSS patterns (dots, grid, checkerboard, lines, etc.).
Export your color combinations to CSS Variables, Tailwind Config, SCSS Variables, or JSON format.
Generate accessible color palettes from a base color with shades, tints, color harmonies (analogous, triadic, split-complementary), and WCAG compliance analysis.
Test multiple foreground/background color combinations simultaneously in a table view. Export results to CSV.
Simulate how your color combination appears to users with different types of color vision deficiency: Protanopia, Deuteranopia, Tritanopia, and Achromatopsia.
View and manage saved color combinations. Includes a contrast matrix showing ratios between all saved colors.
The color selection interface allows you to specify both foreground (text) and background colors in multiple ways.
Click the color swatch to open an interactive color picker. You can select colors visually or enter specific values.
Enter hex color values directly (e.g., #000000 or #FFFFFF). The input validates hex format in real-time.
#RRGGBB6-digit hex (e.g., #FF5733)#RGB3-digit hex (e.g., #F53 → #FF5533)Copy ButtonClick to copy the hex value to clipboardRandom Palette: Use the "Random Palette" button to generate random color combinations for inspiration or testing.
The tool supports multiple ways to input and select colors beyond simple hex values.
The text input accepts multiple color formats including HEX, RGB (rgb(0,0,0)), HSL (hsl(0,0%,0%)), and named colors (red, blue, etc.). The input automatically parses and converts to hex.
Click the eyedropper icon to pick colors directly from any image. Upload an image or paste from clipboard (Ctrl+V), then click anywhere to extract the color. Supports PNG, JPG, GIF, and WebP.
As you select colors, the tool automatically displays all available formats:
The tool includes full undo/redo functionality to help you experiment with different color combinations.
Revert to the previous color state. The tool maintains a history of up to 50 color changes.
Restore a previously undone color change. Works with Ctrl+Y or Ctrl+Shift+Z.
Tip: Use keyboard shortcuts for quick navigation: Ctrl+Z to undo and Ctrl+Y (or Ctrl+Shift+Z) to redo.
The contrast analysis section displays the calculated contrast ratio and provides detailed compliance information.
The contrast ratio is calculated as (L1 + 0.05) / (L2 + 0.05), where L1 is the relative luminance of the lighter color and L2 is the relative luminance of the darker color.
Recommendations: When your color combination doesn't meet WCAG standards, the tool provides specific suggestions for improving contrast.
The Accessibility Score provides a comprehensive overall assessment of your color combination across multiple accessibility dimensions.
When your color combination doesn't meet WCAG standards, the tool automatically suggests alternative colors that would pass.
Tip: The auto-fix tries to preserve your original color hue while adjusting lightness to meet accessibility requirements.
The tool automatically converts colors between multiple formats for easy use in different contexts.
The tool also recognizes CSS named colors (e.g., "red", "blue", "transparent"). When a matching named color exists, it's displayed alongside other formats.
The Color Blindness tab simulates how your color combination appears to users with different types of color vision deficiency. This helps ensure your design is accessible to all users.
Red-blindness, difficulty distinguishing red and green
Green-blindness, most common form of color blindness
Blue-blindness, difficulty distinguishing blue and yellow
Complete color blindness, sees only in grayscale
Important: Color blindness simulation shows how colors are perceived differently. The contrast ratio may change significantly for some color combinations, affecting accessibility.
The Palette tab generates accessible color palettes from a base color, including shades, tints, and color harmonies with WCAG compliance analysis.
Lighter versions of your base color for highlights and backgrounds
Darker versions of your base color for text and emphasis
The palette generator creates harmonious color schemes based on color theory:
The tool analyzes your base color and suggests compliant variants for both white and black backgrounds. Each color variant shows its contrast ratio and WCAG AA/AAA compliance status.
The tool checks compliance against WCAG 2.1 guidelines, which define different levels of accessibility requirements.
The minimum level required for most web content.
Enhanced accessibility for situations requiring higher contrast.
Pass/Fail Indicators: Each compliance level shows a clear Pass (green) or Fail (red) badge, making it easy to see which requirements your color combination meets.
The live preview section shows how your color combination appears in real-world scenarios with adjustable typography settings.
Shows how headings appear with your color combination. Useful for testing section titles and emphasis text.
Demonstrates body text readability. Test longer passages to ensure comfortable reading experience.
Shows how buttons appear with inverted colors. Important for ensuring CTA buttons meet contrast requirements.
The Preview tab shows how your colors appear in different device contexts and display modes.
Preview your colors on a mobile device frame with typical mobile viewport dimensions.
Preview your colors on a tablet device frame with typical tablet viewport dimensions.
Preview your colors on a desktop device frame with typical desktop viewport dimensions.
Standard light background viewing
Dark background viewing for low-light conditions
Maximum contrast for accessibility needs
The Complex BG tab allows you to test contrast against non-solid backgrounds including gradients, images, and CSS patterns.
Test text contrast against linear and radial gradients. Adjust angle, color stops, and positions to find accessible combinations.
Enter an image URL to test contrast against the image. The tool calculates the average luminance for accurate contrast checking.
Test contrast against CSS-generated patterns: Dots, Grid, Checkerboard, Diagonal Lines, Crosshatch, and Zigzag.
The Bulk Test tab allows you to test multiple foreground/background color combinations simultaneously in a table view, making it easy to audit entire color systems.
Tip: Use bulk testing to audit your entire color system at once. Export to CSV to include in accessibility documentation or reports.
The Export tab allows you to export your color combinations in multiple formats for use in different projects and technologies.
Export as CSS custom properties:
:root {
--foreground: #000000;
--background: #ffffff;
}Export as Tailwind CSS theme extension:
theme: {
extend: {
colors: {
foreground: '#000000',
background: '#ffffff',
}
}
}Export as SCSS variables:
$foreground: #000000; $background: #ffffff;
Export as JSON for programmatic use:
{
"foreground": "#000000",
"background": "#ffffff"
}The Saved tab allows you to store and manage color combinations for future reference, with a contrast matrix for analyzing relationships between colors.
Click "Save Combination" to store the current foreground and background colors. Up to 20 combinations can be saved.
Export all saved color combinations as a JSON file for backup or use in other projects.
The contrast matrix provides a visual grid showing contrast ratios between all saved colors. This helps identify which color combinations work well together.
Local Storage: Saved colors are stored in your browser's local storage and will persist between sessions.
Understanding WCAG contrast requirements helps you create inclusive designs that work for all users.
Adequate contrast ensures that text is readable for users with low vision, color blindness, or those viewing in challenging lighting conditions. It also helps in situations where displays have poor quality or are viewed at angles.
Many jurisdictions require websites to meet WCAG accessibility standards. Failure to comply can result in legal action and exclusion of users who rely on accessible design.
| Text Size | AA Minimum | AAA Enhanced |
|---|---|---|
| Normal Text | 4.5:1 | 7:1 |
| Large Text (18pt+) | 3:1 | 4.5:1 |
Ensure your website's text meets accessibility standards. Test different color schemes and find accessible alternatives to problematic combinations.
Verify that buttons, form inputs, and other interactive elements have sufficient contrast for all users to identify and use.
Validate brand color palettes for accessibility compliance. Identify which color combinations can safely be used for text.
Check colors used in documents, presentations, and PDFs to ensure they meet accessibility requirements for distribution.
Test color combinations for mobile interfaces where users may have varying display quality and lighting conditions.
Conduct quick accessibility checks during development or as part of comprehensive accessibility audits.
The tool uses the official WCAG 2.1 relative luminance formula for calculating contrast ratios.
Where each RGB component is linearized using gamma correction before calculating luminance.
Where L1 is the luminance of the lighter color and L2 is the luminance of the darker color.
Gamma Correction: The tool applies proper gamma correction (linearization) as specified in WCAG 2.1, ensuring accurate contrast calculations that match human visual perception.