Color Contrast Checker
Check your color combinations against WCAG 2.1 accessibility standards. Enter a foreground and background color to see the contrast ratio and whether it passes AA and AAA compliance for normal and large text.
Contrast Checker
Enter a hex color for your text
Enter a hex color for your background
How to Use This Tool
Enter Your Colors
Type hex codes or use the color pickers to select your foreground (text) and background colors. Both 3-digit and 6-digit hex codes are supported.
Check Contrast
Click the Check Contrast button to calculate the WCAG 2.1 contrast ratio. Use the Swap Colors button to quickly reverse the foreground and background.
Review Results
See the contrast ratio, a live text preview, and whether your color pair passes AA and AAA standards for both normal and large text sizes.
WCAG 2.1 Contrast Ratio Formula
CR = (L1 + 0.05) / (L2 + 0.05)The contrast ratio is calculated using the relative luminance of each color per the WCAG 2.1 specification. L1 is the luminance of the lighter color and L2 is the luminance of the darker color.
The calculation follows these steps:
- Linearize sRGB: Convert each 8-bit channel to linear light. If the normalized value is <= 0.04045, divide by 12.92; otherwise apply
((val + 0.055) / 1.055) ^ 2.4 - Relative luminance: Weight the linear channels:
L = 0.2126R + 0.7152G + 0.0722B - Contrast ratio: Divide the lighter luminance (plus 0.05) by the darker luminance (plus 0.05) to get a ratio from 1:1 to 21:1
WCAG 2.1 requires a minimum ratio of 4.5:1 for normal text (AA level) and 7:1 for enhanced readability (AAA level). Large text thresholds are lower: 3:1 for AA and 4.5:1 for AAA.
Frequently Asked Questions
What contrast ratio do I need for WCAG AA compliance?
For WCAG 2.1 Level AA, normal text (under 18pt or 14pt bold) needs a minimum contrast ratio of 4.5:1. Large text (18pt and above, or 14pt bold and above) needs a minimum of 3:1.
What is the difference between WCAG AA and AAA?
WCAG AA is the standard level of accessibility compliance required by most regulations. WCAG AAA is a higher, enhanced level. For AAA, normal text needs 7:1 contrast and large text needs 4.5:1. While AAA is ideal, it can be difficult to achieve for all content.
How is the contrast ratio calculated?
The contrast ratio uses the WCAG 2.1 formula based on relative luminance. Each sRGB color channel is converted to linear light, then weighted (0.2126R + 0.7152G + 0.0722B) to get luminance. The ratio is (L1 + 0.05) / (L2 + 0.05) where L1 is the lighter color, yielding a value from 1:1 (no contrast) to 21:1 (maximum contrast).
What counts as large text in WCAG?
Large text is defined as 18 point (24px) or larger for regular weight, or 14 point (approximately 18.66px) or larger for bold weight. Large text has lower contrast requirements because bigger characters are easier to read.