Color Contrast Checker

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

Color

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

View All Color

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

Color Mixer

Mix two colors together at any ratio. See the blended result with hex, RGB, and HSL values plus a full gradient preview.