Color Contrast Checker

WCAG contrast ratio measures the difference in luminance between foreground and background colors. It ranges from 1:1 (no contrast) to 21:1 (maximum contrast, black on white). Higher ratios mean better readability for users with visual impairments.

WCAG AA requires a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text. WCAG AAA requires 7:1 for normal text and 4.5:1 for large text. AAA is the highest accessibility standard.

Large text is defined as 18pt (24px) or larger, or 14pt (18.66px) bold or larger. Large text has lower contrast requirements because it's easier to read at lower contrast levels.

Proper color contrast ensures text is readable for people with visual impairments, including color blindness and low vision. It also improves readability for everyone in various lighting conditions and on different devices.

Contrast ratio is calculated using the relative luminance values of foreground and background colors. The formula is (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color and L2 is the darker color.

WCAG requires a minimum contrast ratio of 3:1 for UI components and graphical objects. This ensures that buttons, icons, and other interface elements are visible and usable.

Not all color combinations meet accessibility standards. Use this checker to verify that your color choices meet WCAG requirements. Consider both aesthetics and accessibility when designing.

Relative luminance is the perceived brightness of a color, ranging from 0 (black) to 1 (white). It's calculated using the sRGB color space and accounts for human vision sensitivity to different wavelengths.

Text within images must meet the same contrast requirements as regular text. For decorative images or images with text alternatives, contrast requirements don't apply.

Use browser developer tools, design software plugins, or online checkers like this one. Many tools can extract colors from screenshots and calculate contrast ratios automatically.