Contrast Checker – WCAG Color Contrast Ratio Calculator
The Contrast Checker calculates the color contrast ratio between a foreground and background color according to WCAG 2.1 accessibility guidelines. It instantly tells you whether your color combination passes AA or AAA compliance levels for normal and large text. Use this tool to ensure your website or app is accessible to users with low vision or color deficiency.
Enter a hex color code (e.g. #FFFFFF or #FFF) for the text or foreground element.
Enter a hex color code (e.g. #000000 or #000) for the background element.
Font size in pixels. Used to determine if text qualifies as 'large text' (18pt / 14pt bold) under WCAG.
Bold text at 14pt (≈18.67px) or larger qualifies as large text under WCAG guidelines.
Your results will appear here
How to Use This Calculator
1. Enter the hex color code for your foreground (text) color in the Foreground Color field, for example #333333. 2. Enter the hex color code for your background color in the Background Color field, for example #FFFFFF. 3. Optionally, enter the font size in pixels and select whether the font is bold to determine if your text qualifies as 'large text' under WCAG rules. 4. Click Calculate to instantly see the contrast ratio and whether your combination passes WCAG AA and AAA standards for both normal and large text sizes.
What Is Color Contrast?
Color contrast refers to the difference in perceived luminance between two colors — typically the text color and the background it sits on. A high contrast ratio makes text easier to read, especially for users with visual impairments.
How the Contrast Ratio Is Calculated
The WCAG contrast ratio formula compares the relative luminance of two colors. The ratio ranges from 1:1 (no contrast, identical colors) to 21:1 (maximum contrast, black on white).
Step 1: Convert Hex to Relative Luminance
- Each RGB channel is divided by 255 to normalize it between 0 and 1.
- A gamma correction is applied: if the normalized value ≤ 0.03928, divide by 12.92; otherwise, compute ((value + 0.055) / 1.055) ^ 2.4.
- Relative luminance = 0.2126 × R + 0.7152 × G + 0.0722 × B
Step 2: Compute the Ratio
Contrast Ratio = (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter luminance and L2 is the darker luminance.
WCAG Compliance Levels
- AA Normal Text: Minimum ratio of 4.5:1 for text smaller than 18pt (24px) or 14pt bold (≈18.67px).
- AA Large Text: Minimum ratio of 3:1 for text 18pt (24px) or larger, or 14pt bold or larger.
- AAA Normal Text: Enhanced ratio of 7:1 for normal-sized text.
- AAA Large Text: Enhanced ratio of 4.5:1 for large text.
Why This Matters
WCAG (Web Content Accessibility Guidelines) compliance is essential for legal accessibility requirements in many countries, including the ADA in the US, the EN 301 549 standard in Europe, and various other regulations worldwide. Beyond compliance, good contrast simply makes your content easier for everyone to read.