Color Contrast Checker
Check color contrast ratios for WCAG 2.1 compliance. Verify AA and AAA standards for text and UI elements instantly.
What is WCAG contrast ratio?
WCAG contrast ratio measures the difference in luminance between foreground and background colors. It ranges from 1:1 (no contrast) to 21:1 (maximum contrast, black on white). Higher ratios mean better readability for users with visual impairments.
What are the WCAG AA and AAA requirements?
WCAG AA requires a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text. WCAG AAA requires 7:1 for normal text and 4.5:1 for large text. AAA is the highest accessibility standard.
What counts as large text?
Large text is defined as 18pt (24px) or larger, or 14pt (18.66px) bold or larger. Large text has lower contrast requirements because it's easier to read at lower contrast levels.
Why is color contrast important?
Proper color contrast ensures text is readable for people with visual impairments, including color blindness and low vision. It also improves readability for everyone in various lighting conditions and on different devices.
How do I calculate contrast ratio?
Contrast ratio is calculated using the relative luminance values of foreground and background colors. The formula is (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color and L2 is the darker color.
What is the minimum contrast for UI elements?
WCAG requires a minimum contrast ratio of 3:1 for UI components and graphical objects. This ensures that buttons, icons, and other interface elements are visible and usable.
Can I use any color combination?
Not all color combinations meet accessibility standards. Use this checker to verify that your color choices meet WCAG requirements. Consider both aesthetics and accessibility when designing.
What is relative luminance?
Relative luminance is the perceived brightness of a color, ranging from 0 (black) to 1 (white). It's calculated using the sRGB color space and accounts for human vision sensitivity to different wavelengths.
Do I need to check contrast for images?
Text within images must meet the same contrast requirements as regular text. For decorative images or images with text alternatives, contrast requirements don't apply.
What tools help with color contrast?
Use browser developer tools, design software plugins, or online checkers like this one. Many tools can extract colors from screenshots and calculate contrast ratios automatically.
How to Use Color Contrast Checker
Check text and UI contrast against WCAG 2.1 AA and AAA thresholds instantly, entirely in your browser. Enter two colors and the ratio is computed locally — nothing leaves your device.
- Type or paste your text color into the Foreground Color field, in any supported format such as HEX or RGB.
- Fill the Background Color field with the color sitting behind the text to compute the contrast ratio.
- Read the resulting ratio and the AA and AAA pass/fail badges for normal and large text sizes.
- Tweak either color until the ratio clears 4.5:1 for body text or 3:1 for large text and UI components.
- Swap the Foreground Color and Background Color values to test the inverse pairing, such as light text on a dark theme.
AAA (7:1) is a worthy goal for long-form reading, but 4.5:1 (AA) is the baseline most accessibility guidelines require.
Related Tools
- Color Picker Pick any color from screen with eyedropper. Copy HEX, RGB, HSL codes instantly. Free online color picker tool.
- Color Palette Generator Create beautiful, harmonious color palettes instantly with our free online generator. Supports monochromatic, analogous, complementary, triadic, split-complementary, and tetradic modes. Fine-tune colors with HSL sliders, lock favorites, and export as CSS variables, Tailwind config, JSON, or SVG. 100% browser-based, your data never leaves your device.
- Color Blindness Simulator Free online color blindness simulator. Test designs for Protanopia, Deuteranopia, Tritanopia & other CVD types. 100% private, runs in your browser.
- GIF Split Frames Extract and download individual frames from GIF animations as PNG or sprite sheet. Free online tool with preview and ZIP export.
- GIF Reverse Reverse GIF animation playback order online for free. Upload, preview and download reversed GIFs instantly.
- GIF Speed Changer Change GIF animation speed online. Speed up or slow down GIF files instantly.
- Video to GIF Convert video to animated GIF online. Adjust quality, frame rate and resolution directly in your browser with no upload required.
- Meme Generator Free online meme generator. Add classic top and bottom captions to any image, drag text anywhere and download your meme as PNG or JPEG instantly.