Color Contrast Checker
Check the contrast ratio between two colors for WCAG 2.1 accessibility compliance.
About the Color Contrast Checker — WCAG 2.1 Accessibility Tool
Web accessibility is not optional — WCAG 2.1 requires minimum contrast ratios between text and background colors for readability. Level AA requires 4.5:1 for normal text and 3.0:1 for large text; Level AAA requires 7.0:1 and 4.5:1 respectively. This checker calculates the precise contrast ratio using the WCAG relative luminance formula, shows pass/fail results for all four compliance levels, and renders a live preview so you can see exactly how your text will look. Enter colors as HEX values or use the native color picker.
Common use cases
- Verify that website color schemes meet WCAG AA requirements
- Test button text against background colors for readability
- Audit existing designs for accessibility compliance
- Choose accessible color combinations for data visualizations
- Ensure dark mode themes maintain sufficient contrast
Why client-side?
Every byte you paste, type, or upload here is processed entirely inside your browser. Nothing is sent to a server, logged, or stored. That means it's safe to use this tool on production secrets, customer data, internal logs, and any input you would not paste into a hosted SaaS formatter.
Want more? Browse all tools or visit the ToolsVault blog for practical guides.
Related tools
- Color Converter Convert between HEX, RGB, RGBA, HSL, and HSLA color formats instantly. Built for designers and frontend developers building CSS variables, dark-mode palettes, and design tokens.
- Color Palette Generator Generate harmonious color palettes from a base color. Create complementary, analogous, and triadic color schemes.
- Gradient Generator Create CSS linear and radial gradients visually. Pick colors, adjust angles, and copy the CSS code.
- CSS Unit Converter Convert between px, rem, em, vh, and vw CSS units. Essential tool for responsive web design.
Frequently Asked Questions
- What is a good contrast ratio?
- WCAG 2.1 Level AA requires at least 4.5:1 for normal text and 3.0:1 for large text. Level AAA (enhanced) requires 7.0:1 for normal text and 4.5:1 for large text.
- What counts as large text in WCAG?
- Large text is defined as 18pt (24px) regular weight or 14pt (18.66px) bold. Anything smaller is considered normal text and requires the higher contrast ratio.
- How is contrast ratio calculated?
- The contrast ratio is calculated using the relative luminance of each color, following the WCAG 2.1 formula: (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color and L2 is the darker color.
- Is this contrast checker free?
- Yes. All calculations happen locally in your browser. No data is sent to any server.