Explosion Tools

Color Contrast Checker

Check WCAG color contrast ratios for accessibility compliance. Free, no signup, works in your browser.

Large Text (24px)

Normal text (16px) — The quick brown fox jumps over the lazy dog.

Small text (14px) — Pack my box with five dozen liquor jugs.

14.63:1

Contrast Ratio

✓AA Normal Text

Requires 4.5:1

✓AA Large Text

Requires 3:1

✓AAA Normal Text

Requires 7:1

✓AAA Large Text

Requires 4.5:1

Contrast ratios are calculated using the WCAG 2.1 relative luminance formula. All processing happens in your browser.

About Color Contrast Checker

This color contrast checker calculates the luminance ratio between a foreground and background color and reports whether the combination passes WCAG 2.1 AA and AAA requirements. Use it to verify that your text colors are readable for people with low vision or color blindness. The tool also suggests the closest passing color when your current pair fails.

Frequently Asked Questions

What is a color contrast ratio?
A contrast ratio measures the luminance difference between two colors. It ranges from 1:1 (no contrast, same color) to 21:1 (maximum contrast, black on white). WCAG guidelines require minimum ratios for text readability.
What contrast ratio is required for WCAG compliance?
WCAG AA requires 4.5:1 for normal text and 3:1 for large text (18pt+ or 14pt+ bold). WCAG AAA requires 7:1 for normal text and 4.5:1 for large text.
What is considered large text?
Large text is defined as 18pt (24px) and above for regular weight, or 14pt (18.66px) and above for bold text. Large text has lower contrast requirements because it is easier to read.
How do I fix failing contrast?
If your colors fail contrast checks, try darkening the darker color or lightening the lighter color. The tool suggests the closest passing color automatically.

Related Tools

Hex to RGB Converter

Convert hex color codes to RGB, HSL, and more

Image Color Picker

Upload an image and click to extract color codes

RGB to HSL Converter

Convert RGB color values to HSL format

HSL to Hex Converter

Convert HSL color values to HEX format

CSS Gradient Generator

Create beautiful CSS gradients with a visual editor and copy the code