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.
What people use it for
- 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
Private by design
Everything you type here is processed inside your browser. Nothing is sent to a server, logged or stored, so it is safe to use with real numbers, drafts and anything you would not paste into a hosted tool.
Try these next
- 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.
Browse every tool or read the creator guides.
Questions people ask
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.