Color Contrast Checker
Check WCAG AA & AAA contrast compliance for any color pair. Enter hex, RGB, or use the color picker.
Live Preview
Small text — 12px: The quick brown fox jumps over the lazy dog.
Normal text — 16px: The quick brown fox jumps over the lazy dog.
Large text — 24px: The quick brown fox jumps over the lazy dog.
Heading — 32px bold
Text Readability Simulator
See how your color pair looks with real paragraph text at common sizes.
Understanding Color Contrast
Color contrast is one of the most important aspects of accessible design. When text doesn't have enough contrast against its background, it becomes difficult or impossible for many people to read. This is especially true for users with low vision, color blindness, or those viewing screens in bright sunlight.
Good contrast benefits everyone. Even users with perfect vision find high-contrast text easier and faster to read, reducing eye strain during long reading sessions. The WCAG guidelines provide a scientific framework for measuring contrast that takes into account how the human visual system perceives luminance differences.
Caption text — smaller details and supplementary information often use reduced sizes.
Accessible Color Suggestions
If your color pair fails, these adjusted alternatives meet WCAG thresholds.
What is a Color Contrast Checker?
A color contrast checker is an accessibility tool that measures the luminance ratio between two colors, typically a foreground text color and a background color. It evaluates whether the pair meets WCAG (Web Content Accessibility Guidelines) standards for readability. Designers, developers, and accessibility auditors use contrast checkers to ensure their interfaces are usable by people with visual impairments.
Understanding WCAG Contrast Levels
WCAG defines two conformance levels for color contrast:
- AA (Minimum): Requires 4.5:1 for normal text, 3:1 for large text (18pt+ or 14pt bold+), and 3:1 for UI components and graphical objects. This is the standard most organizations target.
- AAA (Enhanced): Requires 7:1 for normal text and 4.5:1 for large text. Recommended for body text in long-form content, critical UI elements, and applications targeting users with low vision.
How Contrast Ratio Works
The contrast ratio formula uses relative luminance — a measure of how bright a color appears to the human eye. Each sRGB channel (red, green, blue) is linearized and weighted according to human perception: green contributes 71.52%, red 21.26%, and blue just 7.22%. The ratio between the lighter and darker luminance values (plus a small offset) produces a number between 1:1 (identical colors) and 21:1 (pure black on pure white).
Tips for Choosing Accessible Colors
Start with your brand colors and adjust lightness to meet contrast thresholds. Darken dark colors or lighten light colors — small changes in lightness have the biggest impact on contrast ratio. Avoid relying solely on color to convey meaning; use icons, patterns, or labels as well. Test your colors on both light and dark backgrounds, and always check on real devices under different lighting conditions.
Frequently Asked Questions
What is WCAG color contrast?
WCAG color contrast refers to the luminance difference between foreground text and its background. The contrast ratio ranges from 1:1 (no contrast) to 21:1 (maximum contrast). Higher ratios make text easier to read, especially for people with low vision.
What contrast ratio is needed for WCAG AA?
WCAG AA requires 4.5:1 for normal text and 3:1 for large text (18pt+ or 14pt+ bold). UI components also need 3:1 against adjacent colors.
What is the difference between AA and AAA?
AAA is stricter: 7:1 for normal text and 4.5:1 for large text, versus AA's 4.5:1 and 3:1. AAA is recommended for long-form reading, while AA is the legal minimum for most websites.
How is contrast ratio calculated?
Each sRGB channel is linearized, then relative luminance is computed as L = 0.2126R + 0.7152G + 0.0722B. The ratio is (L1 + 0.05) / (L2 + 0.05) where L1 is the lighter color.
What if my colors fail contrast requirements?
Darken the darker color or lighten the lighter color until the ratio meets the threshold. This tool suggests the closest accessible alternatives automatically.
Related Tools
- Color Palette Generator — Generate beautiful color schemes with harmony modes and contrast checking.